Execute AMPScript into the same CloudPage

Question

I'm trying to update a variable in AMPscript in order to get a list of values that contain a keyword. This value is inserted in an input and after that I click on a search button to find the results. I tried adding some jQuery code but this has not worked. How can I get the value of the input into my AMPscript and refresh the table with the values?

This is my current code:

<div>
  <label for="keyword">Please enter a keyword for search</label>
  <input type="text" id="keyword" name="keyword">
  <button id="searchBtn">Search</button>
</div>
<div id="content">
%%[
var @rows, @rowcount, @i, @code, @value, @keyword
set @rows = LookupRows("MyDataExtension","Active",1)
set @rowcount = RowCount(@rows)
IF @rowcount > 0 THEN]%%
<table>
  <tr>
    <th>Code</th>
    <th>Value</th>
  </tr>
%%[
FOR @i = 1 TO @rowcount DO
set @row = Row(@rows, @i)
set @code = Field(@row,"Code")
set @value = Field(@row,"Value")
]%%
  <tr>
    <td>%%=v(@code)=%%</td>
    <td>%%=v(@value)=%%</td>
  </tr>
%%[NEXT @i]%%
</table>
%%[ELSE]%%
<p>
  No Account Records
</p>
%%[ENDIF]%%
</div>

Answer 1

My suggestion is to create a second page that will retrieve the data for you and return it in a form of a JSON.

Then, using jQuery or plain JavaScript, you send an Ajax request to that page with some parameters and on callback you build your HTML dynamically.

Here is an article that you might find interesting:

https://ampscript.xyz/how-tos/how-to-enhance-your-forms-with-ajax-and-ampscript/