2017-04-04 57 views
1

更正下面進行..樹視圖留言板 - 禁用提交按鈕不起作用兒童

我有一個留言板(如會話樹),有父消息和子消息。我已經實現了下面的jquery,在輸入框中沒有輸入任何內容時禁用提交按鈕。它適用於父提交按鈕(#sendcomment輸入框),但不適用於子代(也適用於#sendcomment輸入框)。有任何想法嗎?

<div id="defaultcontainerwrapper" class="maxwidth"> 
    <div class="messageList" style="margin-top:10px; margin-left:30px;"> 
      <?php foreach($this->messageList as $k=>$message){ 
       $postId=$message['postId']; 
       if($message['depth']!=0){ 
        $depth=$message['depth']; 
        do{ 
         echo(": . . "); 
         $depth--; 
        } 
        while($depth!=0); 
       } 
       ?> 

     <span class="viewThread"> 
      <a style="color:#cd6b2e;text-decoration:underline; cursor:pointer; cursor: hand;" 
       onclick="<?php echo "javascript:ajaxView(" . $postId . ");"; ?>"><?php echo $message['content'] ? nl2br(substr($message['content'], 0, 30)) . '...' : ''; ?></a> 
      <?php echo htmlspecialchars("<");?><a style="color:grey;"><?php echo $message['posterName'];?></a><?php echo htmlspecialchars(">")."&nbsp".$message['date']."<br/>\n";?> 
     </span> 

       <div class="displayPanel" id="<?php echo $postId;?>" > 
        <div class="displayContent" > 
        </div> 

        <div class="RepForm-loggedin" > 
         <form name="RepForm" method="POST" action="<?php echo $this->newReply;?>"> 
          <table name="RepFormTable" style="width:100%"> 
           <script type="text/javascript" src="data/js/jquery_lib/jquery.min.js"></script> 

           <tr> 
            <td style="width:100%"> 
             <input type="text" maxlength="75" id="repContent" class="inputbox inputbox-title placeholder-soc-med" 
               name="repContent" placeholder="Add your comment here. . ."/> 
             <span><input type="submit" id="sendComment" name="sendComment" class="dgrey-button cancel-button" value="Submit"></span> 

            </td> 
           </tr> 
          </table> 

          <textarea style="display: none" name="content"></textarea> 
          <input type="hidden" value="<?php echo $this->tag ;?>" name="tag"> 
          <input type="hidden" value="" name="parentId"> 
          <input type="hidden" value="" name="depth"> 
         </form> 
        </div> 
       </div> 
      <?php } ?> 
     <div class="clear"></div> 
    </div> 
</div> 



<script type="text/javascript"> 
$(document).ready(function(){ 

    var sendComment = document.getElementsByName("sendComment"); 
    var repContent = document.getElementsByName("repContent"); 
    $(sendComment).attr('disabled', true); 
    $(repContent).keyup(function() { 
     if ($(this).val().length != 0) 
      $(sendComment).attr('disabled', false); 
     else 
      $(sendComment).attr('disabled', true); 
    }) 

}); 

<script> 
+1

可能是重用ID #sendComment一個問題的所有元素。 id屬性意味着每頁都是唯一的 –

+0

謝謝@RyanTuosto。這解決了問題。 – ian

+0

@RyanTuosto我的解決方案是爲輸入添加name =「sendComment」。然後我使用document.getElementsByName(「sendComment」)來引用名稱。像魅力一樣工作。上述更正。再次感謝。 – ian

回答

0

id屬性指定其元素的唯一標識符(ID)。該值在元素的主子樹中的所有ID中必須是唯一的,並且必須至少包含一個字符。該值不能包含任何空格字符。 https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

如果你願意,你可以在父郵件ID添加諸如id="sendComment-<?php echo $postId; ?>"然後使用選擇$("[id*=sendComment]")查詢其ID中包含「sendComment」