1

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

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

我comentonpost在 javascript 中获取 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仅在提交的表单上获取值？

4

3 回答 3

1

As you're using jQuery, you can use the "attribute starts with" selector to select the form, and the .serialize() or .serializeArray() methods to get the entire form's data:

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

For the data of a single field within the form, you can simply select the field and call .val():

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

That said, it'd be better to simply add a common class to all of the forms and select on that:

PHP: 
<form class="add-comment-form" id="addCommentForm<?PHP echo $PostID;?>" method="post" action="">
JS: 
$('.add-comment-form').on('submit'...

Be careful with spelling, you've used addCommentform for the form, but comentonpost for the field.

于 2013-06-02T19:58:00.717 回答
0

首先让我指出您那里有无效的 XML。该id属性必须是唯一的。但是，您的comentonpost输入都具有相同的id. 由于您似乎打算在您的页面上有多个这些表单，因此ids 是模棱两可的。而不是id你应该使用class. （您的 idbody和. 也是如此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
    });
});

在这里演示

于 2013-06-02T20:17:46.040 回答
0

像这样向表单添加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

于 2013-06-02T19:45:22.103 回答