I've written a simple form & AJAX function that should post the data of the form.
Can anyone help me determine why this is failing to post?
Fiddle: https://jsfiddle.net/onyeLp4d/2/
HTML
<div id="lp-pom-form-25"> <form method="POST"> <div class="row"> <div class="col-6"> <label>First Name <input id="your_first_name" name="your_first_name" type="text" /></label> <label>Last Name <input id="your_last_name" name="your_last_name" type="text" /></label> <label>Company Name <input id="your_company_name" name="your_company_name" type="text" /></label> <label>Email Address <input id="your_work_email" name="your_work_email" type="text" /></label> </div> <div class="col-6"> <label>Referrals First Name <input id="your_referrals_first_name" name="your_referrals_first_name" type="text" /></label> <label>Referrals Last Name <input id="your_referrals_last_name" name="your_referrals_last_name" type="text" /></label> <label>Referrals Company Name <input id="your_referrals_company_name" name="your_referrals_company_name" type="text" /></label> <label>Referrals Email Address <input id="your_referrals_email_address" name="your_referrals_email_address" type="text" /></label> <label>Referrals Phone Number <input id="your_referrals_phone_number" name="your_referrals_phone_number" type="text" /></label> <label>How did you hear about us? <input id="how_did_you_hear_about_electrics_referral_program" name="how_did_you_hear_about_electrics_referral_program" type="text" /></label> </div> <button type="submit"> Submit </button> </div> </form> </div> jQuery
jQuery(document).ready(function () { jQuery("form").submit(function (e) { e.preventDefault(); var form = jQuery(this); var formData = { your_first_name: jQuery("#your_first_name").val(), your_last_name: jQuery("#your_last_name").val(), your_company_name: jQuery("#your_company_name").val(), your_work_email: jQuery("#your_work_email").val(), your_referrals_first_name: jQuery("#your_referrals_first_name").val(), your_referrals_last_name: jQuery("#your_referrals_last_name").val(), your_referrals_company_name: jQuery("#your_referrals_company_name").val(), your_referrals_email_address: jQuery("#your_referrals_email_address").val(), your_referrals_phone_Number: jQuery("#your_referrals_phone_number").val(), how_did_you_hear_about_electrics_referral_program: jQuery("#how_did_you_hear_about_electrics_referral_program").val() } console.log(formData); $.ajax ({ type: form.attr('method'), data: formData, dataType: 'json', success: function (data) { console.log("Success!"); console.log(data); }, error: function (data) { console.log("An error has occured!"); console.log(data); } }); }); }); It seems quite simple:
- Prevent form from submitting as normal
- Get form data (saving to variable so I can remap some of it eventually)
- Post the form data via AJAX so that the page does not reload
I am expecting the form to submit successfully using AJAX. I have tried numerous alterations of my code but it is quite simple so I must be missing something small or silly.
