Prepopulate SmartCapture form with AmpScript and JavaScript

Question

I have a SmartCapture form that has fields - CODE, FirstName, LastName and EMail Address.

There are two buttons - One is "Apply Code" and the Second is "Submit". (Submit comes standard with the SmartCapture form)

The expectation is that the user enters CODE and hits "Apply Code" button. On the ONCLICK action of this button, I want to fetch the firstname and lastname from Salesforce. Below is the code to fetch these details. However, cannot get the JavaScript for Onclick to work in conjunction with AmpScript as shown below.

Is this even supposed to work in two steps?

Can I populate (partly execute ampscript on first button click) the form-fields with prefetched Salesforce data before I submit the form (and execute rest of the ampscript).

 <div>
   <b>CODE*</b>
</div>
<div>
   <input name="CODE12" id="CODE12" type="text" size="75" maxlength="50" value="" /><br />
<br />
   <button onclick="getCode()">Apply Code</button>
<br />
</div>

<script runat="server">
Platform.Load('Core','1');
</script>
<script>
function getCode()
{
var x = document.getElementById("CODE12").value;
</script>
%%[ var @CODE12 ]%%
<script runat="server">
Variable.SetValue("@CODE12",x);
</script>
%%[
var  @ContactRow
SET @ContactRow = RetrieveSalesforceObjects("Contact", "FirstName, LastName", "mail_cd__c", "=", @CODE12)
IF ROWCOUNT(@ContactRow) != 0 THEN
SET @FirstName= Field(Row(@ContactRow,1),"FirstName")
SET @LastName= Field(Row(@ContactRow,1),"LastName")
ENDIF
]%%
<script>
var fn = Variable.GetValue("@FirstName");
var ln = Variable.GetValue("@LastName");
document.getElementById("FirstName").value= fn;
}
</script>

<form action="%%= RequestParameter('PAGEURL') =%%" method="POST">
<input name="FirstName" id="FirstName" type="text" size="75" maxlength="100" value="" /><br />
.....

Answer 1

That's not the way it works. AMPScript is server-side, not client-side. You can set values in client-side JS with AMPScript, but only at before the page is displayed.

If you need to retrieve SFMC info, you'll need to build a page to accept parameters from your form, then call your page call (via POST or AJAX). This new page would do the API function and return a result-set back to your page.