根據按鈕ID顯示/隱藏表格

我正在嘗試爲每個窗體構建一個按鈕;當用戶點擊它時，具有特定ID的特定表單將再次顯示或隱藏。根據按鈕ID顯示/隱藏表格

我已經嘗試了下面的JavaScript代碼，但它不起作用。

這段代碼錯了嗎？還是我錯過了什麼？有人有另一個想法嗎？在此先感謝。

$(function(){ 
 
    $('.btn').on('click', function(e){ 
 
     e.preventDefault(); 
 
     $(this).next('.form2').show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<?php 
 
$result_posts = $conn -> prepare("SELECT * FROM posts WHERE post_topic=:post_topic ORDER BY DATE(post_date) ASC"); 
 
$result_posts -> bindParam(':post_topic',$topic_id); 
 
$result_posts -> execute(); 
 
while ($row2 = $result_posts ->fetch(PDO::FETCH_ASSOC)) 
 
{ 
 
?> 
 

 
<a class="btn" id="<?php echo $row2['post_id']; ?>"><i class="fa fa-commenting" aria-hidden="true"></i>Comment</a> 
 

 
<form name="form2" class="form2" id=" <?php echo $row2['post_id']; ?>" style="display:none"> 
 
<textarea class="commenting" id="commenting" placeholder="Comment here..." cols="30" rows="5"></textarea> 
 
<input type="submit" class="comment_submit2" value="Submit" > 
 
</form> 
 

 
<?php } ?>

來源

2017-04-14 Ioannis P.

你有沒有在你的片段包括jQuery的 - 你，包括它在你的網頁？考慮編輯你的PHP/HTML代碼，而不是一個精確代表輸出的小型HTML代碼片段。 – Santi

我正在使用「jquery-3.1.0.min.js」 –

您是否正在通過ajax加載您的表單？我在代碼中看不到任何問題，它應該可以工作。 –

需要使用toggle()： -

工作例如： -

$(function(){ 
 
    $(document).on('click', '.btn',function(e) { 
 
     e.preventDefault(); 
 
     $(this).next('.form2').toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="btn"><i class="fa fa-commenting" aria-hidden="true"></i>Comment</a> 
 

 
<form name="form2" class="form2" style="display:none"> 
 
<textarea class="commenting" id="commenting" placeholder="Comment here..." cols="30" rows="5"></textarea> 
 
<input type="submit" class="comment_submit2" value="Submit" > 
 
</form> 
 

 
<br> 
 
<br> 
 
<a class="btn"><i class="fa fa-commenting" aria-hidden="true"></i>Comment</a> 
 

 
<form name="form2" class="form2" style="display:none"> 
 
<textarea class="commenting" id="commenting" placeholder="Comment here..." cols="30" rows="5"></textarea> 
 
<input type="submit" class="comment_submit2" value="Submit" > 
 
</form>

注意： - 請注意不要在任何情況下重複id（在您的代碼中它發生的按鈕id和它的相應的表單ID）。

我已經從按鈕以及從我的代碼中的窗體中刪除了ID。（如果需要的話，然後嘗試使它們爲每一個不同的）

來源

2017-04-14 18:26:41

-ve已標記的人，請問爲什麼？ –

這裏是與jQuery一個例子，示出了多於一個的形式。第一個表單內容默認顯示。

$(function(){ 
 
    $('.btn').on('click', function(e){ 
 
     e.preventDefault(); 
 
     $("form").css("display","none"); 
 
     var TargetDiv = $(this).attr("data-target"); 
 
     $("#" + TargetDiv).show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="btn" data-target="form1">Form 1</button> 
 
<button class="btn" data-target="form2">Form 2</button> 
 
<button class="btn" data-target="form3">Form 3</button> 
 

 
<form id="form1" style="display: block;"> 
 
    <label>show form one content by default</label> 
 
</form> 
 
<form id="form2" style="display: none;"> 
 
    <label>form two content</label> 
 
</form> 
 
<form id="form3" style="display: none;"> 
 
    <label>form three content</label> 
 
</form>

來源

2017-04-14 18:32:09 EdwardM

首先，你不應該repeate同一個文檔中的ID。我可以注意到你會有按鈕和表單ID相同。

所以你可以做什麼Concat的一些字符串post_id像按鈕

「btn_」 + POST_ID

和後像 -

「form_」 + POST_ID

使用toggel，因此它會反轉每次點擊的形式狀態。如果隱藏，它將顯示，如果點擊時可見，它將被隱藏。

檢查我的小提琴。 https://jsfiddle.net/stdeepak22/crrwa7Ls/

來源

2017-04-14 18:33:11

根據按鈕ID顯示/隱藏表格

回答

相關問題