How to partially serialize a form and do an ajax submit

Hi Experts!

I have quite a long form with 150 inputs. I would like to be able somehow to "ajax" submit this form with only the value that the user actually changed. A form submit is mandatory since I am using Struts on the backend. Right now I am transporting all the 150 elements to the server and this takes some time :)

Will be this possible?

Thank you!
Who is Participating?
leakim971Connect With a Mentor PluritechnicianCommented:
serializeArray :

var param1 = {"param1":true};
var model = {"model":1};
var params = $(this).parents("div").serializeArray();
params.push(param1, model);
You can wrap all of the inputs in a DIV, and sink the "onchange" event for the DIV, then by checking the SOURCE of the event, determine the ID of the input element that triggered the event (was changed). Upon submit, use this list to send only the changed element(s) and the content(s).
dlcnetAuthor Commented:

Thank you for your quick response. I do have my form in a div and I actually and I do a / this.value.
I do not know however  how to put this in code that only this is submited in the form by $('#myform').submit
Can you provide me an example?

Thank you
7 new features that'll make your work life better

It’s our mission to create a product that solves the huge challenges you face at work every day. In case you missed it, here are 7 delightful things we've added recently to monday to make it even more awesome.

Similar question here (not really but you will see the code in action) :
dlcnetAuthor Commented:

Would this Code behave like a form.submit?
 I am actually doing the same thing now but still the backend does not see this as a form submit event

Thank you for your input
>Would this Code behave like a form.submit?

Yes. But be aware of the method, GET or POST.
dlcnetAuthor Commented:

$(this).parents("div").serializeArray() this seems that will work. However how would I be able to add to this to more parameters say I need to send additionally "&param1=true&model=1" ?
dlcnetAuthor Commented:
leakim971: I have the following code, where field1 is a select box.
In firefox when I look in the post firebug console I do not see nothing posted :(

$('#field1').change(function() {            
          var params = $(this).closest('tr').serializeArray();
            var ajaxSettings = {
                      cache: false,
                      type: "POST",
                  data:  params,
                  success: function(response) {
      "calculate", ajaxSettings);
dlcnetAuthor Commented:

First was my problem :
var params = $("*", "#my-tr").serializeArray();

however I do get undefined when I do this:
var fieldName = $(this).attr('name')
var modelValue= $('#val').text();

var key= {"model":modelValue};
var field= {"fieldId":fieldName};
paams.push(key, field);

in firefox console teh serializeArray shows the values from the chosen id, however the other thow are undefined : undefine :(
>however I do get undefined when I do this:

So :
$(this) is not an object having a name attribute
What is $('#val') ?
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.