Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

How to partially serialize a form and do an ajax submit

Posted on 2010-11-09
10
636 Views
Last Modified: 2012-06-27

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!
0
Comment
Question by:dlcnet
  • 5
  • 4
10 Comments
 
LVL 29

Expert Comment

by:Badotz
ID: 34094548
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).
0
 

Author Comment

by:dlcnet
ID: 34094663
@Badotz

Thank you for your quick response. I do have my form in a div and I actually and I do a this.name / 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
0
 
LVL 82

Expert Comment

by:leakim971
ID: 34094828
Similar question here (not really but you will see the code in action) : http://www.experts-exchange.com/Programming/Languages/Scripting/AJAX/Q_26518491.html
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:dlcnet
ID: 34095262
@leakim971

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
0
 
LVL 82

Expert Comment

by:leakim971
ID: 34095359
>Would this Code behave like a form.submit?

Yes. But be aware of the method, GET or POST.
0
 

Author Comment

by:dlcnet
ID: 34096734
@leakim971:

$(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" ?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 34099072
serializeArray : http://api.jquery.com/serializeArray/

var param1 = {"param1":true};
var model = {"model":1};
var params = $(this).parents("div").serializeArray();
params.push(param1, model);
0
 

Author Comment

by:dlcnet
ID: 34100645
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();
          alert(params);
            var ajaxSettings = {
                      cache: false,
                      type: "POST",
                  data:  params,
                  success: function(response) {
                        doResponse();
                  }                     
                }
                jQuery.ajaxQueue.post("calculate", ajaxSettings);
    });
0
 

Author Comment

by:dlcnet
ID: 34100789
@leakim971

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 :(
0
 
LVL 82

Expert Comment

by:leakim971
ID: 34102186
>however I do get undefined when I do this:

So :
$(this) is not an object having a name attribute
What is $('#val') ?
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question