如何使用javascript获取表单名称和输入？

Question

如何仅在提交时获取表单输入的值？我有这个..

<form id="addCommentForm<?PHP echo $PostID;?>" method="post" action="">
  <input type="hidden" value="<?PHP echo $PostID;?>" name="comentonpost" id="comentonpost"/>
  <textarea class="commentinput" name="body" id="body" cols="20" rows="5"></textarea>
  <input type="submit" id="submit" value="Submit" />
</form>

$PostID 是在页面中打印的每个表单中不同的数字，因此页面上的所有表单名称都不同。在 HTML 中，它看起来像这样：

打印的第一个表格：

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

第二次打印：

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

我在 javascript 中得到 comentonpost id 值，如下所示：

$(document).ready(function(){
  var name_element = document.getElementById('comentonpost');
  var x = name_element.value;
});

我需要这个值，所以下面的脚本会将新评论放在#addCommentContainer'+x

这是整个 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');

});

   });

但是通过这种方式，它获取了打印的第一个表单的值。如何仅在提交的表单上获取comentonpost 的值？

Answer 1

当您使用 jQuery 时，您可以使用 "attribute starts with" 选择器选择表单，并使用 .serialize() 或 .serializeArray() 方法获取整个表单的数据：

$('[id^="addCommentForm"]').on('submit', function (e) {
    var formData;
    //as string i.e. foo=bar&fizz=buzz
    formData = $(this).serialize();

    //as array i.e. [{name: 'foo', value: 'bar'}, {name: 'fizz', value: 'buzz'}]
    formData = $(this).serializeArray();
    e.preventDefault();
});

对于表单内单个字段的数据，只需选择字段并调用.val()：

fieldVal = $('#comentonpost').val();

也就是说，最好简单地为所有表单添加一个公共类并在其上进行选择：

_PHP:

<form class="add-comment-form" id="addCommentForm<?PHP echo $PostID;?>" method="post" action="">

_JS:

$('.add-comment-form').on('submit'...

---

注意拼写，您在表单中使用了add<b>Comment</b>form，但在字段中使用了<b>coment</b>onpost。

Answer 2

首先让我指出您那里的 XML 无效。 id 属性必须是唯一的。但是，您的comentonpost 输入都具有相同的id。由于您似乎打算在您的页面上包含多个这些表单，因此 ids 是模棱两可的。你应该使用class 而不是id。 （您的 ID body 和 submit 也是如此。）

基于此修复，这里有一个 jQuery 函数做你想做的事：

$(document).ready(function(){
    $("form").submit(function(eventObject){        
        var commentOnPost = $(this).find(".comentonpost");
        var x = $(commentOnPost[0]).val();
        alert(x); // for debuggin prompts the found value
        return false; // this will prevent form submit - you might have to remove it
    });
});

DEMO HERE

Answer 3

像这样将onsubmit 属性添加到表单中：

<form id="addCommentForm<?php echo $PostID;?>" method="post" action="" onsubmit="doSomething(this, event)">
    <input type="hidden" value="<?php echo $PostID;?>" name="comentonpost" id="comentonpost"/>
    <textarea class="commentinput" name="body" id="body" cols="20" rows="5"></textarea>
    <input type="submit" id="submit" name="submit" value="Submit" />
</form>

javascript：

var working = false;

function doSomething(elm, e) {
    var form    = elm,
        x       = form.comentonpost.value,
        submit  = form.submit;

    e.preventDefault();
    if (working) return false;
    working = true;
    submit.value = 'working..';
    $('span.error').remove();

    $.post('comment.submit.php', $(form).serialize(), function (msg) {
        working = false;
        submit.value = 'submit';
        $(msg.html).hide().insertBefore('#addCommentContainer' + x).slideDown();
    }, 'json');

}

jsfiddle