Jquery 提交表单时请参阅文本区域

我的页面中有很多表单（让我们说2个）。我想使用Ajax提交它们

我如何“告诉”我的脚本只引用我提交的表单中的输入字段（而不是另一个）

我可以这样做吗：

form_data.$(this).parents('form').$("#textArea").val();

而不是：

form_data.append('comment[text]',  $("#textArea").val());

HTML:

---

您应该做的第一件事是删除重复的

id

属性-它们在页面上下文中应该是唯一的。改为使用公共类来标识字段，并从提交的

表单

元素遍历以检索其值

还请注意，更好的做法是挂接到

表单

的

提交

事件，而不是点击提交按钮的

。这也让你的问题变得毫无意义。试试这个：

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

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

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

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

另外，我建议从
addComment.php
返回JSON而不是纯文本。如果将来需要更改返回的数据，它的可扩展性会更大。
而不是
$（“#textArea”）。val（）
执行以下任一操作：


$（“#addCommentForm”+refID+“#textArea”）.val（）

$（“#addCommentForm”+refID）.find（“#textArea”）.val（）

$（“#textArea”，$（“#addCommentForm”+refID））.val（）
要按照您的建议使用JSON，我需要做哪些更改？
$(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; 
    });
});

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

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

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

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