成功後從$ 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();這個變種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(); 

---

不過我建議你綁定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; 
    }); 
}); 

Answer 2

你可以通過這個當前輸入值：

var pqid = $(this).parent("form").find(".pqid").val(); 

Answer 3

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

將上面兩行代碼移到ajax成功的內部以獲取最新值。

$(document).ready(function(){ 
    $('.AnswerPQSubmit').click(function() { 
     dataString = $(this).parent().serialize(); 

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