ajax表单提交空白描述只有第一个ID

Question

我有下面的代码提交表单与Ajax但只有第一个实例出5个评论框正在提交余额我得到discription =“，也被插入到错误的ID 。这里是我的代码和活生生的例子，我想允许用户在任何项目发表评论

http://way2enjoy.com/app/jokestest-991-1.php 

$output .='<div id="'.$idd.'" align="left" class="messagelove_box" ><div class="content_box_1"> 
     <div class="content_box_2z"><sup class="joke_icon"></sup></div> 
     <div class="content_box_3_title"></div> 
     <div class="content_box_3_text">'.nl2br($cont).'</div> 



     <script type="text/javascript"> 
var ajaxSubmit = function(formEl) { 

       var url = $(formEl).attr(\'action\'); 


       var comment=document.getElementById("jokes_comment").value; 
       var joke_id=document.getElementById("joke_id_hidden'. $idd.'").value; 
       $.ajax({ 
        url: url, 
        data:{ 
         \'action\':\'addComment\', 
         \'comment\':comment, 
         \'joke_id\':joke_id 
        }, 
        dataType: \'json\', 
        type:\'POST\', 
        success: function(result) { 

          console.log(result); 
          $.ajax({ 
          url: url, 
          data:{ 
          \'action\':\'getLastComment\', 
          \'joke_id\':joke_id 
          }, 
          dataType: \'json\', 
          type:\'POST\', 
          success: function(result) { 

          $(\'#jokes_comment\').val(""); 
          console.log(result[0].description); 
          $("#header ul").append(\'<li>\'+result[0].description+\'</li>\'); 



          }, 
          error: function(){ 
          alert(\'failure\'); 


        } 
       }); 

        }, 
        error: function(){ 
         alert(\'failure\'); 


        } 
       }); 

       return false; 
      } 

</script> 
     <div id="header" class="content_box_31_text"><ul id="commentlist" class="justList">'.$contpp.'</ul></div> 
      <form method="post" action="check/process2.php" class="button-1" onSubmit="return ajaxSubmit(this);"><input type="hidden" value="'. $idd.'" id="joke_id_hidden'. $idd.'"><input type="text" id="jokes_comment" value="" name="jokes_comment"> 
<input type="submit" value="comment"></form> 


</div></div> 
'; 

Answer 1

发布并没有告诉完整的故事，但看着不提到的网址，你已经该段代码这个意思是ajaxSubmit函数的每一个定义都会覆盖前一个，并且你有多个输入元素都具有相同的id，这也就不足为奇了。至于要做什么。你只需要一个提交功能，如果它写得不错，它可以处理所有不同的评论输入。并且您的评论输入不能每次都有相同的ID，但他们可以拥有相同的CSS类，并且由于它们都在表单中，当我们提交特定的表单时，我们知道我们正在处理的上下文，以及jQuery可以自动查找表单中的所有字段，而无需编写代码单独访问它们。

因此，考虑到这种设计，请定义您的JavaScript像这样，并确保它只在您的整个页面输出中得到一次。为了利用jQuery提供的更简单的语法，我重新编写了它。

$(".comment-form").submit(function(event) { 
    event.preventDefault(); //prevent the default postback behaviour 
    var form = $(this); 
    var jokeID = form.find(".joke_id").val(); 

    $.ajax({ 
    url: form.attr("action"), 
    type: "POST", 
    dataType: "json", 
    data: $(this).serialize(), //automatically finds all the form fields and puts the data in postback-friendly format 
    success: function(result) { 
     //I'm not convinced you need this second ajax call - can't you just write the contents of the input box directly into the list? But I'll leave it here in case you want it 
     $.ajax({ 
     url: form.attr("action"), 
     type: "POST", 
     dataType: "json", 
     data:{ 
      "action":"getLastComment", 
      "joke_id": jokeID 
     }, 
     success: function(result) { 
      form.find(".jokes_comment").val(""); 
      $("#header-" + jokeID + " ul").append("<li>" + result[0].description + "</li>"); 
     }, 
     error: function (jQXHR, textStatus, errorThrown) { //this is the correct definition of the error function as per jQuery docs 
        alert("An error occurred while contacting the server: " + jQXHR.status + " " + jQXHR.responseText + "."); 
     } 
     });   
    }, 
    error: function (jQXHR, textStatus, errorThrown) { //this is the correct definition of the error function as per jQuery docs 
        alert("An error occurred while contacting the server: " + jQXHR.status + " " + jQXHR.responseText + "."); 
    } 
    }); 
}); 

其次，使生成的每个笑话的注释标记看起来像这样的PHP：

<div id="header-'.$idd.'" class="content_box_31_text"> 
    <ul id="commentlist" class="justList">'.$contpp.'</ul> 
</div> 
<form method="post" action="check/process2.php" class="button-1 comment-form"> 
    <input type="hidden" value="'. $idd.'" name="joke_id"/> 
    <input type="hidden" value="addComment" name="action" /> 
    <input type="text" class="jokes_comment" value="" name="comment" /> 
    <input type="submit" value="comment"> 
</form>