Submitting a form using jQuery AJAX

HTML form, that’s to be submitted by jQuery AJAX.

[html]
<form id=”employee” action=”employee.php” method=”POST” name=”contact”>
<div>Name: <input id=”name” type=”text” name=”name” size=”30″ value=”" /></div>
<div>Email: <input id=”email” type=”text” name=”email” size=”30″ value=”" /></div>
<div>Phone: <input id=”phone” type=”text” name=”phone” size=”30″ value=”" /></div>
<div><input id=”submit_btn” type=”submit” name=”submit” value=”Send” /></div>
</form>
<div id=”result”></div>
[/html]

Java Script code using jQuery AJAX

[js]

<script type=”text/javascript”>
$(document).ready(function() {
$("form").submit(function() {
var frm = $(‘#employee’);
$.ajax({
type: frm.attr(‘method’),
url: ‘/employee.php’,
data: frm.(serialize),
success: function (data) {
alert(‘Submitted’);
$(‘#result’).html(data);
},
error: function(jqXHR, textStatus, )errorThrown{
// log the error to the console
console.log(
"The following error occured: "+
textStatus, errorThrown
);
}
});
return false;
});
});
</script>
[/js]

Permanent link to this article: https://blog.openshell.in/2013/12/submit-form-using-jquery-ajax/

Leave a Reply

Your email address will not be published.