JSFiddle - React, Tailwind, and code Playground
HTML
<h3>Standard Form</h3>
<form id="standard_submit">
<input type="text" name="name"><-Name<br/>
<input type="spec_code" name="special_code"><-Special Code<br/>
<input type="magic_num" name="magic_number"><-Magic Number<br/>
<input type="submit">
</form>
<h3>AJAX Only Form</h3>
<form id="ajax_submit">
<input type="text" name="name"><-Name<br/>
<input type="spec_code" name="special_code"><-Special Code<br/>
<input type="magic_num" name="magic_number"><-Magic Number<br/>
<input type="submit">
</form>
<h3>AJAX + iFrame From</h3>
<form id="iframe_submit">
<input type="text" name="name"><-Name<br/>
<input type="spec_code" name="special_code"><-Special Code<br/>
<input type="magic_num" name="magic_number"><-Magic Number<br/>
<input type="submit">
</form>
CSS
body {
font-family: Arial, sans-serif;
font-size: 12px;
color: #333;
}
h3 {
font-size: 18px;
margin-bottom: 12px;
}
form {
margin-bottom: 24px;
}
form input {
margin: 5px;
padding: 5px;
border: 1px solid #ccc;
}
iframe {
display: none;
}
JavaScript
// AJAX Form //
$('#ajax_submit').bind('submit', function(e){
e.preventDefault(); // Prevent Standard Submit for Testing
var name = $('input[name="name"]', this).val(),
code = $('input[name="special_code"]', this).val(),
magic = $('input[name="magic_number"]', this).val();
// Output to Console for Test //
console.log(name);
console.log(code);
console.log(magic);
});
// AJAX + iFrame Form //
$('#iframe_submit').bind('submit', function(e){
e.preventDefault(); // Prevent Standard Submit for Testing
var name = $('input[name="name"]', this).val(),
code = $('input[name="special_code"]', this).val(),
magic = $('input[name="magic_number"]', this).val();
// Output to Console for Test //
console.log(name);
console.log(code);
console.log(magic);
// Create Clone of Submitted Form, Append to iFrame and Trigger Submit
// This Forces Autocomplete to Register
var $clone = $('#iframe_submit').clone();
$clone.attr('id', 'iframe_clone'); // Only One ID Allowed
$('<iframe />').appendTo('body').contents().find('body').append($clone);
$('iframe').contents().find('#iframe_clone').submit();
});