如何从jQuery中获取html表单的输入值？

Question

I want to ask how i can get value of input ONLY ON SUBMIT in Javascript from HTML form when i have many forms with same name on one page.

It's looking like this:

First printed HTML form:

<div id="addCommentContainer3">
<form class="add-comment-form" id="addCommentForm3" method="post" action="">
<input type="hidden" value="3" name="comentonpost" id="comentonpost"/>
<textarea class="commentinput" name="body" id="body" cols="20" rows="5"></textarea>
<input type="submit" id="submit" value="Submit" />
</form>
</div>

Second printed:

<div id="addCommentContainer2">
<form class="add-comment-form" id="addCommentForm2" method="post" action="">
<input type="hidden" value="2" name="comentonpost" id="comentonpost"/>
<textarea class="commentinput" name="body" id="body" cols="20" rows="5"></textarea>
<input type="submit" id="submit" value="Submit" />
</form>
</div>

And like this there are many more .

I must take the value of comentonpost because i need it in my Javascript so when i post comment it wil appear before addCommentContainer of the submited form.
And there is the whole Javascript:

$(document).ready(function(){

var name_element = document.getElementById('comentonpost');
var x = name_element.value;

/* The following code is executed once the DOM is loaded */

/* This flag will prevent multiple comment submits: */
var working = false;

/* Listening for the submit event of the form: */
$('#addCommentForm'+x).submit(function(e){

    e.preventDefault();
    if(working) return false;

    working = true;
    $('#submit').val('Working..');
    $('span.error').remove();

    /* Sending the form fileds to submit.php: */
    $.post('comment.submit.php',$(this).serialize(),function(msg){

        working = false;
        $('#submit').val('Submit');


            /* 
            /   If the insert was successful, add the comment
            /   below the last one on the page with a slideDown effect
            /*/

            $(msg.html).hide().insertBefore('#addCommentContainer'+x).slideDown();


    },'json');

});

  });

And in this way when i press the Submit button it's working only for the first form printed in the page.

Answer 1

This will do what you need:

$(document).ready(function(){
    /* Watch OnSubmit for all forms */
    $('form').submit(function(e){
        e.preventDefault();

        /* Show the 'commentonpost' for the submitted form */
        alert($(this).children('#comentonpost').val());
    });
});

This works, but you should keep in mind that your document is not valid because you have elements that have the same IDs. IDs must be unique within a document for it to be valid.

Answer 2

when you use jquery to select an ID, it will return 0 or one elements that match, and it will match the first one it finds. from http://api.jquery.com/id-selector/

Calling jQuery() (or $()) with an id selector as its argument will return a jQuery object containing a collection of either zero or one DOM element.

whenever you use $("#submit") its parsing through the DOM and finding the first instance of <input type="submit" id="submit" value="Submit" /> and returning that element. what you really want to do in your to scope your search down. you know you want the input from the form that was submitted, so you should try

$(this).find("#submit")

this will start at the form element, and search only elements contained inside the form for the first element with an ID of submit.

update

didnt realize your event was only tied to the first form, this whole things needs some work.

you've got a generic form template, and when you've got multiple forms like this, you really shouldnt be giving them all the same ID. instead, start binding event handlers to classes, and use the dom to store whether a form is 'working' or not as well

http://jsfiddle.net/neKdz/3/

Answer 3

You may only need to change this part:

$(document).ready(function(){
  /* The following code is executed once the DOM is loaded */

  /* This flag will prevent multiple comment submits: */
  var working = false;

  /* Listening for the submit event on all the forms: */
  $('form[id^=addCommentForm]').on('submit', (function(e) {
    var submitted_form = $(this);
    //etc...

Answer 4

I would suggest something like this

$(document).ready(function(){
    $(".add-comment-form").submit(function(e){
        var x = $(this).find("#comentonpost").eq(0).val();
        // now you have number x of submitted form and you can do the rest
    }); 
});

Edit:

To prevent page reloading because of form submission, add onSubmit="return false;" on form elements, eg:

<form class="add-comment-form" id="addCommentForm3" method="post" action="" onSubmit="return false;" >

But because of this we have to follow another approach using click event:

$(document).ready(function(){
    $("#submit").click(function(e){
        var x = $(this).parent(".add-comment-form").eq(0).find("#comentonpost").eq(0).val();
        // now you have number x of submitted form and you can do the rest
    }); 
});

Combination of click event and cancelling submit event should work. But just for the record (you should already know this, but I can imagine you might have a reason for doing it) using same id on multiple html elements is not a good strategy.