CODEWITHSUNDEEP
javascriptjqueryajaxforms
half-a-nerd
half-a-nerd

Reputation: 313

Populate data string in ajax request

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

Upvotes: 1

Views: 3206

Answers (3)

half-a-nerd
half-a-nerd

Reputation: 313

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

Upvotes: 2

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

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

Upvotes: 0

PetersenDidIt
PetersenDidIt

Reputation: 25610

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

Upvotes: 2

Related Questions