How to specify correct input using jQuery Ajax to submit multiple forms (variable number)

Question

I have a webpage that contains multiple forms. The forms are dynamically generated and the number of forms varies.

I'm using jQuery AJAX to submit the forms without refreshing the page, but it's not submitting the right information for some of the forms. The problem I have is that the jQuery only seems to pick up the info from the first form on the page. So, if the first form has <input value="sentence A" name="sentence"> , then "sentence A" will be submitted as the sentence for all the forms, even though other forms on the page should have different sentences associated with them.

I've seen some multi-form jQuery solutions that involve using form ID's, but I think I can't use ID's since the forms are generated and the number varies.

Any suggestions would be much appreciated! My jQuery and an example form html are provided below.

I am using the following jQuery to submit the forms on the page (based on this tutorial )

$(document).ready(function() {
$(".button").click(function() {
    var gene1 = $.trim( $("input.gene1").val() );
    var gene2 = $.trim( $("input.gene2").val() );
    var sentence = $.trim( $("input.sentence").val() );
    var suggested_label = $.trim( $("input.suggested_label").val() );

    var dataString = 'gene1='+gene1 + '&gene2=' + gene2 + '&sentence=' + 
    sentence + '&suggested_label=' + suggested_label;

    $.ajax({
        type : "POST",
        url : "/submit_label",
        data : dataString,
        success : function(){
            alert(dataString);
        }
    });

    return false;
});
});

My forms look like the one below. On a given page, the form's content for sentence and suggested_label will vary.

<form action="" name="label_form">
<input value="  5058 " name="gene1" type="hidden" class="gene1">
<input value="  8411 " name="gene2" type="hidden" class="gene2">
<input value="To further demonstrate..." name="sentence" type="hidden" class="sentence">
<div class="textbox">
    <input placeholder="Suggested Label" name="suggested_label" type="text" class="suggested_label">
</div>
<div>
    <button class="button">Submit</button>
</div>
</form>

Answer 1

The problem here is that you have several inputs with the class gene1 , several inputs with the class gene2 , etc... As you mention, when you call $("input.gene1").val() jQuery returns the value of the first matching input with class gene1 .

What you want here is to select the input with class gene1 that is the closest to the button that was clicked. You can achieve it by starting from the button and travelling the DOM structure

For example, in your code, replace

var gene1 = $.trim( $("input.gene1").val() );

with

var gene1 = $.trim( $(this).parent().siblings("input.gene1").val() );

and so on for the other inputs

The suggested_label input needs an extra effort because it is nested: you can use the children() method :

var suggested_label = $.trim($(this).parent().siblings("div").children("input.suggested_label").val());

Note : $(this) represents the clicked button in this context

Here is a complete example

Answer 2

I think conceptually, the solution will be as follows:

1. Loop through the forms on the page (Using $('form').each( function(){ ... }) )
2. Keep a counter to dynamically assign each form an ID (set a variable like var formNum = 0 and then add to it each iteration in the form loop like: formNum++ )
3. Then, do .attr('id','ajax_form_' + formNum)
4. Now, you can refer to each specific form's fields: $('#ajax_form_' + formNum + ' input[name="sentence"])...

Let me know if you need some more direction as to how to go about this!