I have an HTML form that should fire JS on submit but it is not working. I have looked for syntax errors or any mismatches between the JS and the form but I haven't found anything. I have been trying to fix this all day and I would really appreciate it an extra pair of eyes on this. Thanks a lot for looking
This is my HTML form:
<div style="margin-top: 1rem">
<div
id="wpcf7-f2066-p2006-o2"
class="wpcf7"
dir="ltr"
lang="en-US"
role="form"
>
<div class="screen-reader-response"></div>
<form
class="download-form"
method="POST"
id="download-form"
>
<p style="padding-bottom: 30px">
<label for="platform" style="color:white;">Select Platform:</label>
<select id="Platform__C" name="Platform">
<option value="ovf">VMware/Oracle Virtual Box (ovf)</option>
<option value="xva">Citrix Xenserver (xva)</option>
<option value="vhd">Microsoft HyperV (vhd)</option>
<option value="qcow2">Xen/OpenStack/KVM (qcow2)</option>
</select>
</p>
<div style="display: table-caption;">
<label style="color:white;">
First Name
<span class="f-name">
<input type="text" id="firstname" name="firstname" placeholder="First Name" required="" />
</span>
</label>
<label>
Last Name
<span class="l-name">
<input type="text" id="lastname" name="lastname" placeholder="Last Name" required="" />
</span>
</label>
<label>
Company
<span class="company">
<input type="text" id="company" name="company" placeholder="Company" required="" />
</span>
</label>
<label>
Business Address
<span class="email-618">
<input type="email" id="email" name="email" placeholder="Business Email" required="" />
</span>
<div id="dialog" visibility="hidden"></div>
</label>
<label for="message">Message</label>
<textarea
id="message"
name="message"
placeholder="Message"
required=""
></textarea>
</div>
<div class="update_terms" style="color:white;">
<label>
<input
id="f_term_condition"
class="update_term_condition"
name="acceptance-263"
type="checkbox"
value="1"
aria-invalid="false"
/><span class="wpcf7-list-item-label"
>I agree to <a href="https://device42.com/eula/">EULA</a> and
<a href="https://device42.com/privacy/">Privacy Policy</a></span
>
</label>
</div>
<!-- Following must be set carefully for form type/name-->
<input type="hidden" id="Download_Form" name="Download_Form__c" value="Download">
<!--Leave following untouched. These are filled by GAConnector integration-->
<input type="hidden" id="fc_campaign" name="gaconnector__First_Click_Campaign__c">
<input id="fc_channel" name ="gaconnector__First_Click_Channel__c" style="display: none">
<input id="fc_content" name ="gaconnector__First_Click_Content__c" style="display: none">
<input id="fc_landing" name ="gaconnector__First_Click_Landing_Page__c" style="display: none">
<input id="fc_medium" name ="gaconnector__First_Click_Medium__c" style="display: none">
<input type="hidden" id="fc_referrer" name ="gaconnector__First_Click_Referrer__c">
<input id="fc_source" name ="gaconnector__First_Click_Source__c" style="display: none">
<input type="hidden" id="fc_term" name ="gaconnector__First_Click_Term__c">
<input type="hidden" id="lc_campaign" name ="gaconnector__Last_Click_Campaign__c">
<input type="hidden" id="lc_channel" name ="gaconnector__Last_Click_Channel__c">
<input type="hidden" id="lc_content" name ="gaconnector__Last_Click_Content__c">
<input type="hidden" id="lc_landing" name ="gaconnector__Last_Click_Landing_Page__c">
<input type="hidden" id="lc_medium" name ="gaconnector__Last_Click_Medium__c">
<input type="hidden" id="lc_referrer" name ="gaconnector__Last_Click_Referrer__c">
<input type="hidden" id="lc_source" name ="gaconnector__Last_Click_Source__c">
<input type="hidden" id="lc_term" name ="gaconnector__Last_Click_Term__c">
<input type="hidden" id="OS" name ="gaconnector__Operating_System__c">
<input id="GA_Client_ID" name ="gaconnector__Google_Analytics_Client_ID__c" style="display: none">
<input type="hidden" id="gclid" name ="gaconnector__GCLID__c">
<input type="hidden" id="browser" name ="gaconnector__Browser__c">
<input type="hidden" id="city" name ="gaconnector__City__c">
<input type="hidden" id="country" name ="gaconnector__Country__c">
<input type="hidden" id="device" name ="gaconnector__Device__c">
<input type="hidden" id="time_zone" name ="gaconnector__Time_Zone__c">
<input type="hidden" id="latitude" name ="gaconnector__Latitude_from_IP__c">
<input type="hidden" id="longitude" name ="gaconnector__Longitude__c">
<div class="send-button">
<button type="submit" id="submit" style="background-color:#F37033; padding:10px 20px 10px 20px; color: white; margin-top:20px;">Send</button>
</div>
</form>
</div>
</div>
This is the JS that should be firing:
<!-- JavaScript -->
<script>
function convertFormToJSON(form) {
const array = $(form).serializeArray(); // Encodes the set of form elements as an array of names and values.
const json = {};
$.each(array, function () {
//console.log(this.name);
json[this.name] = this.value || "";
});
return json;
}
$("#download-form").on("submit", function (e) {
e.preventDefault();
const form = $(e.target);
var jsond = convertFormToJSON(form);
grecaptcha.ready(function() {
grecaptcha.execute('6Lcwyh4gAAAAADLf0CVv04A7IGftq8_zxWuFirnO', {action: 'submit'}).then(function(token) {
// Add your logic to submit to your backend server here.
jsond["recaptcha_token__c"] = token;
//console.log(jsond);
const jsondstring = JSON.stringify(jsond);
//console.log(jsondstring);``
$.ajax({
type: "POST",
url : "https://3dvchn7hw6.execute-api.us-east-1.amazonaws.com/prod/submit",
//url : "http://localhost:8090/hello",
dataType: "json",
crossDomain: "true",
contentType: "application/json; charset=utf-8",
data: jsondstring,
headers: {
"Content-Type": "application/json" // this shows the expected content type
},
success: function (data) {
// clear form and show a success message
alert("Successful "+ data.responseText);
document.getElementById("download-form").reset();
location.reload();
},
error: function (data) {
// show an error message
alert("UnSuccessful "+ data.responseText);
$("dialog").css('visibility','visible');
$("#dialog").html("Please use a Business Email address or double check for any typos");
}});
});
});
});
</script>