$(this).serialize() -- How to add a value?

Question

currently I have the following:

$.ajax({
    type: 'POST',
    url: this.action,
    data: $(this).serialize(),
});

This works fine, however I would like to add a value to data, so I tried

$.ajax({
    type: 'POST',
    url: this.action,
    data: $(this).serialize() + '&=NonFormValue' + NonFormValue,
});

But that didn't post correctly. Any ideas on how you can add an item to the serialize string? This is a global page variable that isn't form specific.

Can you clarify what "that didn't post correctly" means? What happened? What was received by the server? — matt b, Jun 30 '11 at 18:40

Daisy Leigh Brenecki · Answer 1 · 2013-12-04T04:46:11.093

237

While matt b's answer will work, you can also use .serializeArray() to get an array from the form data, modify it, and use jQuery.param() to convert it to a url-encoded form. This way, jQuery handles the serialisation of your extra data for you.

var data = $(this).serializeArray(); // convert form to array
data.push({name: "NonFormValue", value: NonFormValue});
$.ajax({
    type: 'POST',
    url: this.action,
    data: $.param(data),
});

edited Dec 04 '13 at 04:46

answered Jul 23 '13 at 11:40

Daisy Leigh Brenecki

7,571
6
28
43

16

This is definitely the best option - leaving the serialization entirely to jQuery, while still having the ability to add new values to those retrieved from the form. – jcsanyi Nov 15 '13 at 02:29
5

This is the best way to do it, no playing with strings – Brett Gregson Nov 25 '15 at 10:45
1

This should be the accepted answer. Clean and the right way – Mike Aron Feb 03 '20 at 13:20
Can you help me on this https://stackoverflow.com/questions/73194619/how-can-i-add-formdata-with-html-beginform – Developer Aug 02 '22 at 05:19

score 128 · Accepted Answer · answered Jun 30 '11 at 18:41

128

Instead of

 data: $(this).serialize() + '&=NonFormValue' + NonFormValue,

you probably want

 data: $(this).serialize() + '&NonFormValue=' + NonFormValue,

You should be careful to URL-encode the value of NonFormValue if it might contain any special characters.

answered Jun 30 '11 at 18:41

matt b

138,234
66
282
345

3

use `encodeURIComponent` to ensure that the `NonFormValue` does not have any special characters – Yahya Uddin Feb 29 '16 at 14:14

score 8 · Answer 3 · answered Jun 05 '15 at 03:11

8

Don't forget you can always do:

<input type="hidden" name="NonFormName" value="NonFormValue" />

in your actual form, which may be better for your code depending on the case.

answered Jun 05 '15 at 03:11

Jonathan

3,893
5
46
77

Nikhil Bhandari · Answer 4 · 2013-04-15T19:27:13.100

7

firstly shouldn't

data: $(this).serialize() + '&=NonFormValue' + NonFormValue,

be

data: $(this).serialize() + '&NonFormValue=' + NonFormValue,

and secondly you can use

url: this.action + '?NonFormValue=' + NonFormValue,

or if the action already contains any parameters

url: this.action + '&NonFormValue=' + NonFormValue,

edited Apr 15 '13 at 19:27

answered Jun 30 '11 at 18:41

Nikhil Bhandari

1,584
2
16
34

Your second answer wouldn't have the same effect as what the question asked for; `NonFormValue` would be sent as a URL parameter, not in the POSTed data. This might not be ideal if a) whatever's running on the server side expects it to be POSTed (eg using `request.POST` instead of `request.REQUEST` in Django), or b) `NonFormValue` is something that shouldn't appear in the URL bar or history either for security reasons or because it's a transient value. – Daisy Leigh Brenecki Jul 23 '13 at 04:56

score 6 · Answer 5 · edited Jan 10 '18 at 08:10

6

We can do like:

data = $form.serialize() + "&foo=bar";

For example:

var userData = localStorage.getItem("userFormSerializeData");
var userId = localStorage.getItem("userId");

$.ajax({
    type: "POST",
    url: postUrl,
    data: $(form).serialize() + "&" + userData + "&userId=" + userId,
    dataType: 'json',
    success: function (response) {
        //do something
    }
});

edited Jan 10 '18 at 08:10

Pratik Gadoya

1,420
1
16
27

answered Jan 10 '18 at 07:34

Tapeshwar

71
1
2

score 6 · Answer 6 · answered Jun 30 '11 at 18:40

6

Add the item first and then serialize:

$.ajax({
    type: 'POST',
    url: this.action,
    data: $.extend($(this), {'NonFormValue': NonFormValue}).serialize()
});

answered Jun 30 '11 at 18:40

Mrchief

75,126
20
142
189

1

Did not work for me as well. Though it extends the object but did not work as expected. – punitcse Dec 17 '18 at 11:50

score 2 · Answer 7 · answered Nov 30 '19 at 21:58

2

this better:

data: [$(this).serialize(),$.param({NonFormValue: NonFormValue})].join('&')

answered Nov 30 '19 at 21:58

eugene

66
4

Please add a more detailed description as to why this is a better approach. – Mark Nov 30 '19 at 23:26
one line code and you can use json object for more params. – eugene Jan 09 '20 at 15:47

score 0 · Answer 8 · answered Oct 27 '17 at 05:06

You can write an extra function to process form data and you should add your nonform data as the data valu in the form.seethe example :

<form method="POST" id="add-form">
    <div class="form-group required ">
        <label for="key">Enter key</label>
        <input type="text" name="key" id="key"  data-nonformdata="hai"/>
    </div>
    <div class="form-group required ">
        <label for="name">Ente Name</label>
        <input type="text" name="name" id="name"  data-nonformdata="hello"/>
    </div>
    <input type="submit" id="add-formdata-btn" value="submit">
</form>

Then add this jquery for form processing

<script>
$(document).onready(function(){
    $('#add-form').submit(function(event){
        event.preventDefault();
        var formData = $("form").serializeArray();
        formData = processFormData(formData);
        // write further code here---->
    });
});
processFormData(formData)
{
    var data = formData;
    data.forEach(function(object){
        $('#add-form input').each(function(){
            if(this.name == object.name){
                var nonformData = $(this).data("nonformdata");
                formData.push({name:this.name,value:nonformData});
            }
        });
    });
    return formData;
}

$(this).serialize() -- How to add a value?

8 Answers8

Linked

Related