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

注意拼写，您已将addCommentform用于表单，但comentonpost用于该字段。

Answer 2

将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

Answer 3

首先请允许我指出您在那里有无效的XML。 id属性必须是唯一的。但是，您的comentonpost输入都具有相同的id。由于您似乎打算在网页上添加多个这些表单，因此 id不明确。您应该使用id而不是class。（对于您的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

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

3 个答案: