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

Question

I currently have the following:

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

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

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

But this is not true. Any ideas on how to add an item to a serialization string? This is a global page variable that is not specific.

Answer 1

Instead

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

you probably want

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

You should be careful with the URL encoding of the NonFormValue value if it can contain any special characters.

Answer 2

While the matte b 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 an encoding with URLs. In this way, jQuery handles the serialization 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), }); 

Answer 3

Add an element first and then serialize:

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

Answer 4

firstly not worth it

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

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

Answer 5

Do not forget that you can always:

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

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

Answer 6

You can write an additional function to process the form data, and you must add your non-information data as the value of the data in the form. 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 to handle the form

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