Menu
I have sending my data in ajax using submit button without any page refresh. But the page refreshed.
Please check my code and let me know the problem.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$("#idForm").submit(function() { alert("hi");
var url = "ajax.php";
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(),
success: function(data) {
alert(data);
}
});
return false;
});
</script>
<form id="idForm" method="post" enctype="multipart/form-data">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<input name="image" type="file" />
<input type="submit" name="submit" value="Submit" />
</form>
ajax.php
echo "Hello";
952
The code in the question already prevents the form from submitting by this line:
return false;
which means: The JavaScript code in the question isn't running at all.
The problem here is that when this line of code runs:
$("#idForm")...
that element isn't in the dom yet. As such the submit handler isn't attached to anything - when the form submits it's just a standard HTTP post request.
To just fix the problem in the question - do one of the following
If the script runs after the element appears in the source code - the form does exist:
<form id="idForm">...
<script>
$("#idForm")...
</script>
If the js is in a ready handler:
<script>
$(function() {
$("#idForm")...
});
</script>
<form id="idForm">...
It doesn't matter where the script tag is as the dom has already finished loading when it runs.
If javascript is systematically put allat the end of the page:
<body>
<form id="idForm">...
...
<script src="//ajax.googleapis.c...
<script>
$("#idForm")...
</script>
</body>
That would be following established best practices, avoid such problems, don't need to use ready-handlers in any js code (as the html source is always already in the dom when scripts are parsed that way) and have pages that are perceived to load faster.
73
//Program a custom submit function for the form
$("form#data").submit(function(event){
//disable the default form submission
event.preventDefault();
//grab all form data
var formData = new FormData($(this)[0]);
$.ajax({
url: 'formprocessing.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (returndata) {
alert(returndata);
}
});
return false;
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
