populate data string in ajax request

Question

Hi!

i have a form that can have different number of text fields (hoding translation value). Their names are for example: "textfield_eng", "textfield_ger", "textfield_dut".

in my ajax request i want these fields submitted ofcourse, but i can't figure out how to populate these field names and their values in to the data string.

This is what the data call looks like:

$.ajax({
   type: "POST",
   url: $("#optionForm").attr("action"),
   dataType: "xml",
   cache: false,
   data: { formname: $("#optionForm input[name='formname']").val(), 
    submit: $("#optionForm input[name='submit']").val()
    }, 
   success: function(xml){
                                bladibla....

And this is how i would like it to have:

  $.ajax({
   type: "POST",
   url: $("#optionForm").attr("action"),
   dataType: "xml",
   cache: false,
   data: { formname: $("#optionForm input[name='formname']").val(), 
    submit: $("#optionForm input[name='submit']").val(),
textfield_eng : "english",
textfield_ger : "german",
textfield_dut : "dutch"
    }, 
   success: function(xml){
                               bladiblla...

What is the best way to do this?

<input id="sOption_dut" name="sOption_dut" class="form_textfield" type="text" value="" />
<input id="sOption_eng" name="sOption_eng" class="form_textfield" type="text" value="" />
<input id="sOption_ger" name="sOption_ger" class="form_textfield" type="text" value="" />

Answer 1

Have you checked out the jQuery Form plugin? Makes submitting forms via ajax much easier.

Answer 2

Well figured it out all by myself. Checked in the jquery documentation and noticed that you could also submit the data string as an array (as mentioned as a comment above). That got me thinking in the right way.

This is how to do it:

    var aData = [];
    $("input", $("#myForm")).each(function(){
        aData.push({name: $(this).attr("name"), value: $(this).val()});
    });

    $.ajax({
        type: "POST",
        url: $("#myForm").attr("action"),
        dataType: "xml",
        cache: false,
        data: aData, 
        success: function(xml){
                           blablabla...

so, loop through the forms input fields (i only have textfields but if you have radios or selects, you need to change this a bit, look elsewhere on this site for tips on how to loop through a field) and then build the array. The only thing you have to do then is to push it in the ajax request.

it was after all that simple...