Populate data string in ajax request

Question

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

In my ajax request I want these fields submitted of course, 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 be:

  $.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="" />

ok, much better now. Keep rewarding users who make an effort to provide a good and helpfull answer. — Natrium
– Natrium, Commented Feb 4, 2010 at 12:28
yes sir! Hopefully i can help some others on some other subjects too. but jquery is quite new to me. — half-a-nerd
– half-a-nerd, Commented Feb 4, 2010 at 12:32
remove comma , after "dutch" and put a comma , behind val() — Natrium
– Natrium, Commented Feb 4, 2010 at 12:42
thanks. a typo. but that is not the case. What i want to reach is that in site A (that runs languages "eng" and "dut") in need the script to generate the "textfield_eng" field too. so the script needs to generate: textfield_eng: thevalue — half-a-nerd
– half-a-nerd, Commented Feb 4, 2010 at 12:48

PetersenDidIt · Accepted Answer · 2010-02-04 12:45:29Z

2

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

answered Feb 4, 2010 at 12:45

PetersenDidIt

25.6k3 gold badges69 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

half-a-nerd Over a year ago

just quickly. but dug into it a little deeper now and saw that you can submit data to a ajax request as an array as well [{'name': 'value'}, {'name':'value'}] and that certainly can help. it does somehow walk through the form and creates this array so the answer must be somewhere there.

PetersenDidIt Over a year ago

It also handles some of the anomalies that happen between browsers for you. Makes live so much happier.

half-a-nerd · Accepted Answer · 2010-02-04 14:37:51Z

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...

edited Feb 4, 2010 at 14:37

answered Feb 4, 2010 at 14:26

half-a-nerd

3137 silver badges21 bronze badges

2 Comments

Gabriele Petrioli Over a year ago

ok ... i had missed completely what the problem was.. sorry about that.. Take a look at serializeArray() of jQuery as it is what you want.. use it like data: $('#myForm').serializeArray()

half-a-nerd Over a year ago

Hi again. I tried that again and now i remember why this didn't work for me. serializeArray() doesn't serialize hidden fields and submit fields. that does work with the above lines.

Gabriele Petrioli · Accepted Answer · 2010-02-04 13:43:13Z

0

update the way to create new text boxes with jquery would be

$('<input />').attr({
                     id: 'sOption_dut',
                     name: 'sOption_dut',
                     class: 'form_textfield' ,
                     type: 'text',
                     value: ''
                    }).appendTo('form_or_otherwise_selector_here');

The above shows how to create an input field with the specified attributes and then append it to some other element (usually a form).

Keep in mind that that code above should be executed either at page load, or when you decide to show the form to the end-user.. It should not be placed in the ajax call code as that would mean that it will get generated at the time of the submission, not giving the end-user the chance to fill in data.. (unless that is the intended effect..)

change the form_or_otherwise_selector_here to tell it where to place the input box

You have a typo in your code

data: { formname: $("#optionForm input[name='formname']").val(), submit: $("#optionForm input[name='submit']").val() textfield_eng : "english", textfield_ger : "german", textfield_dut : "dutch", }

you need to remove the last comma (after the dutch text), and add one after the submit value ..
so it should be

data: { formname: $("#optionForm input[name='formname']").val(), submit: $("#optionForm input[name='submit']").val(), textfield_eng : "english", textfield_ger : "german", textfield_dut : "dutch" }

edited Feb 4, 2010 at 13:43

answered Feb 4, 2010 at 12:50

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

3 Comments

Gabriele Petrioli Over a year ago

@Natrium, oups sorry.. did not see that .. So you want the user to be presented with these textboxes so he can fill in the data ?

half-a-nerd Over a year ago

Yes. the form would look something like 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="" />

half-a-nerd Over a year ago

Gaby, the javascript wasn't meant to create the form, just to get the values from the form into the ajax request.

Collectives™ on Stack Overflow

Populate data string in ajax request

3 Answers 3

2 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related