javascript - 成功后附加 $this 输入的值

Question

我的网站上有多个具有相同输入名称的表单，因此我使用 dataString = $(this).parent().serialize();。

脚本本身运行良好，但我不想附加特定输入字段中的文本。

AJAX:

$(document).ready(function(){
    $('.AnswerPQSubmit').click(function() {
        dataString = $(this).parent().serialize();
        var pqid = $(".pqid").val();
        var answerpq = $(".answerpq").val();
        $.ajax({
          type: 'post',
          url: 'postpqanswer.php',
          data: dataString,
          dataType: 'html',
            success: function(data) {
                $(".comment"+pqid).append('<p>'+answerpq'</p>');
            }
         });
        return false;
    });
});

HTML:

<form method="post">
    <input type="text" name="answerpq" class="answerpq" placeholder="Write your answer" />
    <input type="hidden" name="pqid" class="pqid" value="<?php echo $rowA['pq_id']; ?>" />
    <input type="submit" name="AnswerPQSubmit" class="AnswerPQSubmit" value="Send" />
    <span class="comment<?php echo $rowA['pq_id']; ?>"></span>
</form>

我尝试做的是通过在“评论”末尾添加帖子的 ID 来为“评论范围”提供一个唯一的类。

所以...我正在尝试将特定输入中的文本附加到评论id。它有点工作，但因为我使用这个: dataString = $(this).parent().serialize(); this var var pqid = $(".pqid").val( ); 只是查找文档中的第一个 pgid 类，而不是 $this 形式的类。

我正在寻找的是这样的:

var pqid = $(this).(".pqid").val(); 我知道这条线不起作用。但这让你知道我在寻找什么。我现在迷路了。

Answer 1

您的实现问题是 $(".pqid").val() 将始终返回第一个元素的值。您可以使用 .siblings() 来定位同级元素。

var pqid = $(this).siblings(".pqid").val();
var answerpq= $(this).siblings(".answerpq").val();

<小时/>

但是我建议您绑定(bind) submit 事件而不是 click。

HTML

<form class="PQSubmit" method="post">
    <input type="text" name="answerpq" class="answerpq" placeholder="Write your answer" />
    <input type="hidden" name="pqid" class="pqid" value="<?php echo $rowA['pq_id']; ?>" />
    <input type="submit" name="AnswerPQSubmit" class="AnswerPQSubmit" value="Send" />
    <span class="comment comment<?php echo $rowA['pq_id']; ?>"></span>
</form>

脚本

$(document).ready(function(){
    $('.PQSubmit').submit(function(event) {
        event.preventDefault(); //cancel default action
        dataString = $(this).serialize();
        var pqid = $(this).find(".pqid").val();
        var answerpq = $(this).find(".answerpq").val();
        var commentSection = $(this).find(".comment")
        $.ajax({
          type: 'post',
          url: 'postpqanswer.php',
          data: dataString,
          dataType: 'html',
            success: function(data) {
                commentSection.append('<p>'+answerpq'</p>');
            }
         });
        return false;
    });
});