Question

我想问一下，当我在一个页面上有多个同名的表格时，我是如何从HTML表单中获取输入值的唯一一个。[

它看起来像这样：

首先打印的HTML表单：

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

第二次印刷：

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

并且还有更多。

我必须使用comentonpost的值，因为我需要在我的Javascript中使用它，所以当我发表评论时，它会出现在提交表单的addCommentContainer之前。
并且有整个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

这将满足您的需求：

$(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());
    });
});

这样可行，但您应该记住，您的文档无效，因为您的元素具有相同的ID。 ID必须在文档中是唯一的才能有效。

Answer 2

当您使用jquery选择ID时，它将返回0或一个匹配的元素，它将匹配它找到的第一个元素。来自http://api.jquery.com/id-selector/

使用id选择器作为参数调用jQuery（）（或$（））返回一个包含零或一个集合的jQuery对象 DOM元素。

每当你使用$（“＃submit”）它通过DOM解析并找到<input type="submit" id="submit" value="Submit" />的第一个实例并返回该元素时。您真正希望在搜索范围内做些什么。你知道你想要从提交的表单输入，所以你应该尝试

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

这将从表单元素开始，并仅搜索表单中包含ID为submit的第一个元素的元素。

更新

没有意识到你的活动只与第一种形式挂钩，这整件事需要一些工作。

你有一个通用的表单模板，当你有这样的多个表单时，你真的不应该给它们所有相同的ID。相反，开始将事件处理程序绑定到类，并使用dom来存储表单是否“正常工作”

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

Answer 3

您可能只需要更改此部分：

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

我会建议这样的事情

$(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
    }); 
});

编辑：

要防止因表单提交而导致页面重新加载，请添加onSubmit =“return false;”在表单元素上，例如：

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

但正因为如此，我们必须使用点击事件来跟随另一种方法：

$(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
    }); 
});

点击事件和取消提交事件的组合应该有效。但只是为了记录（你应该已经知道这一点，但我可以想象你可能有理由这样做）在多个html元素上使用相同的id并不是一个好策略。

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

4 个答案: