0


我想问一下，当我在一页上有许多同名的表单时，我如何才能从 HTML 表单中仅在 Javascript 中提交时获取输入值。

它看起来像这样：

第一个打印的 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只获得提交的表格而不是第一次打印的值，这个脚本有没有更好的工作方式？

提前致谢！

4

4 回答 4

2

这将满足您的需要：

$(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 在文档中必须是唯一的才能有效。

于 2013-06-02T23:08:58.470 回答
0

当你使用 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/

于 2013-06-02T22:47:53.377 回答
0

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

$(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...
于 2013-06-02T23:01:25.597 回答
0

我会建议这样的事情

$(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 并不是一个好的策略。

于 2013-06-02T23:12:32.877 回答