Ajax not sending data without reload - php

Question

The follwing ajax script isn't sending data to php, the page just reloads & form input values are passed onto the url.
Script
<script>
$("#addProducts").submit(function(event) {
var str = $("addProducts").serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str
})
});
</script>
HTML Form
<form enctype="multipart/form-data" id="addProducts">
...
</form>

Answer 1

There's already a problem in your code: $("addProducts").serialize(); should be $("#addProducts").serialize();.
I just ran some tests. The problem is because you try to bind your function before your document is ready. Please replace your code by the code below:
$(document).ready(function() {
$("#form1").submit(function(event) {
var str = $("#form1").serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "test.php",
data: str
});
});
});
About what Zeeshan Bilal and pvorb said, I'm afraid it's false. submit() is the right function to use (see jQuery documentation).
Description: Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.

Answer 2

Perhaps you are trying to bind your function when document is not ready.
$(document).ready(function() {
$("#addProducts").submit(function(event) {
var str = $("addProducts").serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str
})});
});

Answer 3

<script>
$("#addProducts").submit(function(event) {
event.preventDefault();
var str = $("#addProducts").serialize();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str
})
});
</script>
HTML Form
<form enctype="multipart/form-data" id="addProducts" action="">
...
<input type="submit" name="submit" value="submit">
</form>

Answer 4

To solve this problem you should modify your code in this way:
<script>
$("#addProducts").submit(function(event) {
var str = $("#addProducts").serialize();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str,
success: function(data){
//perform your success process here
return false;
}
})
});
</script>

Answer 5

Try Setting the Ajax async property to false as shown below
<script>
$("#addProducts").submit(function(event) {
var str = $("addProducts").serialize();
event.preventDefault();
$.ajax({
async:false
type: "POST",
url: "subAddProduct.php",
data:str
})
});
</script>

Answer 6

Adjust your JS as below
<script>
$("#addProducts").click(function(event) {
$.ajax({
type: "POST",
url: "subAddProduct.php",
dataType : 'json', //data type can be any type like json, html etc.
data:'str='+str
success : function(data) {
//perform your success process here
}
});
});
</script>
I have not tested the above code, but it should work, as i use same codes for my ajax features.
Also check jquery docs for $.ajax http://api.jquery.com/jQuery.ajax/

Answer 7

$("#addProducts").click(function(event) {
var str = $("#addProducts").serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str
});
});

Answer 8

Its not ajax issue, actually you are using $("#addProducts").submit that send a page submit request and cause page reload. Use click instead of submit.
The another mistake $("addProducts").serialize(), add # for id selector. Below is the sample code:
$("#addProducts").click(function(event) {
var str = $("#addProducts").serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str
});
});

Answer 9

Missing the hashtag when you serialize... your code is having jQuery look for an element called "addProducts" not an element with an id of "addProducts" change this line
var str = $("addProducts").serialize();
to this line
var str = $("#addProducts").serialize();

Answer 10

<script>
$("#addProducts").submit(function(event) {
event.preventDefault();
var str = $("#addProducts").serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "subAddProduct.php",
data:str
})
});
return false;
</script>
You need to preventDefault, which stops the form being submitted normally, causing the page to reload. You then need to return false after because Firefox doesn't like preventDefault :P