Ajax not sending data without reload

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>

`.submit()` submits the form. Use `.click()`instead. [Docs](http://api.jquery.com/submit/) — pvorb, May 20 '13 at 10:29
Tried putting the `event.preventDefault()` above your `str` variable declaration? — naththedeveloper, May 20 '13 at 10:30
Change the type of your submit button from 'submit' to 'button' and then call the function on "onclick" event — Manish Jangir, May 20 '13 at 10:32
Also, your form serialisation is incorrect... should be `var str = $("#addProducts").serialize();` - missing the `#` from the form ID — naththedeveloper, May 20 '13 at 10:33
Possible duplicate of http://stackoverflow.com/questions/8481682/php-jquery-ajax-file-upload-server-side-understanding — underscore, May 20 '13 at 10:36

score 2 · Answer 1 · answered May 20 '13 at 10:56

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.

underscore · Answer 2 · 2013-06-11T17:28:51.210

1

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

edited Jun 11 '13 at 17:28

answered May 20 '13 at 10:28

underscore

6,495
6
39
78

if u use ajax serialize for file upload this will not work .And u have type error in $("#addProducts") here.U missed # – underscore May 20 '13 at 10:30
no change, the input values are just going up with url & the page reloads every time – Jaskaran S.P May 20 '13 at 10:30
how can i upload files using this script – Jaskaran S.P May 20 '13 at 10:31
don't use submit ever.use click event – underscore May 20 '13 at 10:32
Here is a example of what you is talking about. http://www.phpletter.com/Our-Projects/AjaxFileUpload/ – underscore May 20 '13 at 10:35

score 1 · Answer 3 · answered May 20 '13 at 10:31

1

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
   })});

});

answered May 20 '13 at 10:31

Mykyta Karpyshyn

198
2
13

don't copy and paste. what this $("addProducts") – underscore May 20 '13 at 10:33
$("addProducts") should be $("#addProducts") – underscore May 20 '13 at 10:39

Zeeshan Bilal · Answer 4 · 2013-08-22T08:55:16.453

1

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
    });
});

edited Aug 22 '13 at 08:55

answered May 20 '13 at 10:33

Zeeshan Bilal

1,147
1
8
22

serialization approach. – Zeeshan Bilal Jan 20 '17 at 15:39

score 1 · Answer 5 · edited Jun 07 '13 at 18:45

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/

score 1 · Answer 6 · answered May 20 '13 at 11:18

<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>

score 1 · Answer 7 · answered May 22 '13 at 09:11

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>

score 1 · Answer 8 · answered May 22 '13 at 11:20

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>

score 1 · Answer 9 · edited Jan 20 '17 at 15:43

1

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();

edited Jan 20 '17 at 15:43

CDspace

2,639
18
30
36

answered Jul 15 '13 at 21:41

Banning

2,279
2
16
20

Karl · Answer 10 · 2013-08-07T07:58:16.443

0

<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

edited Aug 07 '13 at 07:58

answered May 20 '13 at 10:29

Karl

5,435
11
44
70

did u even know ajax? why both event.preventDefault(); and return false; .those doing same thing – underscore May 20 '13 at 10:31
Well considering preventDefault isn't Ajax, you clearly have no idea! It's called cross browser testing, you may want to do some research. – Karl May 20 '13 at 10:32
$("addProducts") should be $("#addProducts") – underscore May 20 '13 at 10:37

Ajax not sending data without reload

10 Answers10