如何仅引用我提交的表单中的输入字段

时间:2015-07-25 14:30:42

标签: jquery ajax

我的页面中有多个表单(让我们说2)。我想用ajax提交它们。

我如何"告诉"我的脚本只能引用我提交的表单中的输入字段(而不是另一个)?

HTML:

<form class="form-horizontal" action='#' method="post" id="addCommentForm4" enctype="multipart/form-data">
    <input type='hidden' name='comment[pageName]' value='<?PHP echo $_GET['page'] ?>' id="pageName" />
    <input type='hidden' name='comment[refID]' value='4' id="refID" />

    <textarea class="form-control" name="comment[text]" id="textArea"></textarea>
    <input type='file' name='file[]' class='multi form-control' maxlength='1' accept='gif|jpg|png|bmp' id="files"/>
    <a class="btn btn-primary submit" id="submit" refID='4'>Send</a>

</form>

<form class="form-horizontal" action='#' method="post" id="addCommentForm5" enctype="multipart/form-data">
    <input type='hidden' name='comment[pageName]' value='<?PHP echo $_GET['page'] ?>' id="pageName" />
    <input type='hidden' name='comment[refID]' value='5' id="refID" />

    <textarea class="form-control" name="comment[text]" id="textArea"></textarea>
    <input type='file' name='file[]' class='multi form-control' maxlength='1' accept='gif|jpg|png|bmp' id="files"/>
    <a class="btn btn-primary submit" id="submit" refID='5'>Send</a>

</form>     

AJAX:

$(function() {
    $(".submit").click(function() {

        var element = $(this);
        var refID = element.attr("refID");
        alert(refID);

        var file_data = $('#addCommentForm'+refID+' #files').prop('files')[0];   
        var form_data = new FormData();                  
        form_data.append('file[]', file_data);
        var files_data =  form_data;

        var act = 'add';
        form_data.append('act', act);
        form_data.append('comment[text]',  $("#textArea").val());   
        form_data.append('comment[pageName]',  $("#pageName").val());   
        form_data.append('comment[refID]',  $("#refID").val()); 


        $.ajax({
               type: "POST",
               url: "ajax/addComment.php",

               dataType: 'text',  // what to expect back from the PHP script, if anything
               cache: false,
               contentType: false,
               processData: false,  

               data: form_data,
               success: function(data)
               {
                    $('#commentsBox').html(data);
               }

             });

        return false; 
    });
});

1 个答案:

答案 0 :(得分:1)

您的id不是唯一的。 $("#textArea").val()不知道要采取哪个值!您可以使用$(this).parents('form').serialize()从提交按钮获取表单数据。