Im trying to submit a HTML form using AJAX using this example.
My HTML code:
<form id="formoid" action="studentFormInsert.php" title="" method="post">
<div>
<label class="title">First Name</label>
<input type="text" id="name" name="name" >
</div>
<div>
<label class="title">Name</label>
<input type="text" id="name2" name="name2" >
</div>
<div>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</form>
My script:
<script type="text/javascript">
$(document).ready(function() {
$('#formoid').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
This is not working, I'm not even getting the alert message and when I submit I don't want to redirect to another page, I just want to show the alert message.
Is there a simple way of doing it?
PS: I have several fields, I have just put two as an example.
This question is related to
jquery
ajax
form-submit
var postData = "text";
$.ajax({
type: "post",
url: "url",
data: postData,
contentType: "application/x-www-form-urlencoded",
success: function(responseData, textStatus, jqXHR) {
alert("data saved")
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
}
})
If you add:
jquery.form.min.js
You can simply do this:
<script>
$('#myform').ajaxForm(function(response) {
alert(response);
});
// this will register the AJAX for <form id="myform" action="some_url">
// and when you submit the form using <button type="submit"> or $('myform').submit(), then it will send your request and alert response
</script>
You could use simple $('FORM').serialize() as suggested in post above, but that will not work for FILE INPUTS... ajaxForm() will.
Source: Stackoverflow.com