7

i want to submit a form with about 10 input using jquery/ajax,but i don't know how can i pass the data to it through data parameters of ajax.should i serialize them ?

hd.
  • 17,596
  • 46
  • 115
  • 165
  • What are you passing the data to? ASP.NET, PHP? Is the server you are passing data to expect JSON data or just a string of key value pairs? – David May 08 '11 at 19:37
  • I think that by submiting a form, all of its fields are sent automatically. – Miguel Angelo May 08 '11 at 19:39

2 Answers2

15

The jQuery.serialize can be helpful for you. It is important that you use name property for all fields of the form which you want to submit. The corresponding code can be about the following

$("form#myFormId").submit(function() {
    var mydata = $("form#myFormId").serialize();
    console.log(mydata); // it's only for test
    $.ajax({
        type: "POST",
        url: "myUrlToPostData.php",
        data: mydata,
        success: function(response, textStatus, xhr) {
            console.log("success");
        },
        error: function(xhr, textStatus, errorThrown) {
            console.log("error");
        }
    });
    return false;
});
royhowie
  • 11,075
  • 14
  • 50
  • 67
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • where's the html output? – a coder May 06 '15 at 04:05
  • @phpPluginMaster: I'm not sure what you mean. `submit` event handler returns `false`, so one have no redirection by submit. One send just the data of the form to the server. The `response` parameter of `success` callback can optionally have the data returned from the server (`url: "myUrlToPostData.php"`). – Oleg May 06 '15 at 04:51
  • IF you're using ajax, you normally want to output something upon success. I don't see the output on success other than console.log – a coder May 06 '15 at 23:16
  • @phpPluginMaster: I disagree with you. Deleting of item for example don't need processing of any response from the server. The HTTP response code define whether `success` or `error` callback will be called. Moreover you should reread *the question* to which I wrote the answer. The question was about collection information from 10 input fields from the form. So the usage of `$.serialize` is the short answer on the question. The processing of `response` parameter is not a real problem. It's corresponds the data returned from the server. – Oleg May 07 '15 at 05:26
4
$.ajax({
type: "POST",
url: "handle.php",
data: "n="+name+"&e="+email,
success: function() {
alert('It worked');
}
});

Here is the simplest way to use it. This would just send two post variables, $_POST['n'] and $_POST['e'], to handle.php. Your form would look like this if your ajax is in a function called send(): 

<form id="form" onsubmit="send(this.name.value, this.email.value); return false;">
Mike Soule
  • 732
  • 1
  • 6
  • 11
  • thank you,but i have 10 input fields to post to server and i think separating them to make data string will create a long string.i use PHP. – hd. May 08 '11 at 19:45
  • For IE at least there is no limit to POST data as it is passed through the header. Since you will be referencing these strings as variables you will not even notice the length of the string unless it is being limited by the server or the PHP/JavaScript. "However, the POST method is not limited by the size of the URL for submitting name/value pairs. These pairs are transferred in the header and not in the URL." From: http://support.microsoft.com/default.aspx?scid=kb;EN-US;q208427 – Mike Soule May 08 '11 at 21:51
  • 1
    serialize() is better option. This works when you want to post certain data only. – Supriti Panda Apr 25 '13 at 17:13