Zeige/verstecke Formulare basierend auf Button-ID

Question

Ich versuche, eine Schaltfläche für jedes Formular zu erstellen; Wenn die Benutzer darauf klicken, wird das spezifische Formular mit der spezifischen ID ein- oder ausgeblendet.

Ich habe bereits den untenstehenden JavaScript-Code versucht, aber es funktioniert nicht.

Ist dieser Code falsch oder vermisse ich etwas? Hat jemand eine andere Idee? Vielen Dank im Voraus.

$(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 } ?>

Answer 1

Notwendigkeit zu verwenden toggle(): -

Arbeitsbeispiel: -

$(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>

Hinweis: - Achten Sie darauf, dass keine ID in jedem Fall wiederholt wird (in Ihrem Code geschieht dies für die Schaltflächen-ID und die entsprechende Formular-ID).

Ich hatte IDs aus der Schaltfläche sowie aus Formularen in meinem Code entfernt. (Wenn nötig, dann versuchen Sie, sie für jeden zu unterscheiden)

Answer 2

Hier ist ein Beispiel mit jQuery, das mehr als ein Formular zeigt. Der erste Formularinhalt wird standardmäßig angezeigt.

$(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>

Answer 3

vor allem, sollten Sie die ID in demselben Dokument nicht repeate. Ich kann bemerken, dass Sie die gleiche Schaltfläche und die gleiche Formular-ID haben.

Also, was Sie Concat einige Zeichenfolge mit post_id wie für Taste

"btn_" + post_id

und für die Zeit nach so etwas wie tun kann -

"FORM_" + post_id

verwenden Der Toggel wird also den Zustand der Form bei jedem Klick umkehren. Wenn es versteckt ist, wird es sichtbar sein, und wenn es beim Klicken sichtbar ist, wird es versteckt.

Überprüfen Sie meine Geige. https://jsfiddle.net/stdeepak22/crrwa7Ls/