Formular wegen anderer Formen verstecken Javascript

Question

Ich habe zwei Formen beide sind unterschiedlich und haben verschiedene Namen/ID. Ich habe einen Code zum Ausblenden/Anzeigen für eines der Formulare hinzugefügt, das einwandfrei funktioniert. Aber leider ist auch die andere Form davon betroffen.

Der Code folgt als :: FORM 1/FORM 2/FORM 1 JS/

<?php 
     echo '<button class="add" id="add_'.$index.'"><B>Add Answer</B></button>'; 
     echo '<form style="display:none;" name="answer_'.$index.'" method="post" action="output.php" onClick="refresh()">'; // I dont think openning form from row to row would be nice! 
     echo '<input type="hidden" name="questionid" value="'. $row['id'].'"/>'; 
     echo '<textarea type="text" class="addtext" name="addtext" required id="addtext_'.$index.'" placeholder="Please type your answer here.." ></textarea>'; 
     echo '<button onClick="addsubmit('.$index.');" type="submit" id="addsubmit_'.$index.'" class="addsubmit"><B>Submit</B></button>'; 
     echo '</form>'; 
    ?> 

    <div id="frm"> 
     <form action="enjoin2.php" method="POST"> 
     <p> 
      <label class="username" style="font-family:verdana"><B>Username</B></label> 
      <input type="text" class="user" name="user" required /> 
     </p> 
     <p> 
      <input type="submit" class="login" value="Login" /> 
      <input type="submit" class="register" value="Register" /> 
     </p> 
     </form> 
    </div> 

    <script type='text/javascript'> 
      $(document).ready(function() { 
      $('.add').click(function(e) { 
        e.stopPropagation(); 
       e.preventDefault(); 
       $(this).parent().find('form').slideDown('slow'); 
       $(this).parent().find('form textarea.addtext').focus(); 
       $(this).hide(); 
      }); 

      $('form').click(function(e){ 
       e.stopPropagation(); 
      }); 

      $(window).click(function(e) { 
       console.log($(e.target)); 
       if(!$(e.target).is('form')){ 
       $('.add').show(); 
       $('form').slideUp(); 
       } 

      }); 
     }); 
    </script> 

Jede Hilfe sehr geschätzt wird.

Answer 1

Sie müssen die Form und auf die Schaltfläche Hinzufügen verwenden bewegen wickeln in die gleichen Eltern - im Moment Ihre Linie:

$(this).parent().find('form') 

Ist beide Formen, wie sie zu finden, einen sowohl Witz Hin die Eltern der Schaltfläche Hinzufügen

Wenn Sie Ihre PHP folgenden ändern, sollte es Ihr Fehler

<?php 
    echo '<div class="wrapper">'; 
    echo '<button class="add" id="add_'.$index.'"><B>Add Answer</B></button>'; 
    echo '<form style="display:none;" name="answer_'.$index.'" method="post" action="output.php" onClick="refresh()">'; // I dont think openning form from row to row would be nice! 
    echo '<input type="hidden" name="questionid" value="'. $row['id'].'"/>'; 
    echo '<textarea type="text" class="addtext" name="addtext" required id="addtext_'.$index.'" placeholder="Please type your answer here.." ></textarea>'; 
    echo '<button onClick="addsubmit('.$index.');" type="submit" id="addsubmit_'.$index.'" class="addsubmit"><B>Submit</B></button>'; 
    echo '</form>'; 
    echo '</div>'; 
?> 

Sie beheben müssen, um auch dieses Stück jQuery ändern:

$(window).click(function(e) { 
    console.log($(e.target)); 
    if (!$(e.target).is('form')) { 
    $('.add').show(); 
    $('form').slideUp(); // this is targetting all forms - you may need to change it to target specific form 
    } 
}); 

aktualisieren

ok Update auf Ihre Kommentare basierend - loszuwerden, die Fenster Click-Ereignis oben und dann klicken Sie auf Hinzufügen ändern, damit es auf die Schaltfläche zwischen einem Add schaltet/entfernen (mit dem Wrapper div oben):

$('.add').click(function(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    
 
    var button = $(this), // get the current button 
 
     form = $(this).parent().find('form'); // get the appropriate form button 
 
    
 
    if (form.is(':visible')) { 
 
    // run this code if your form is visible 
 
    form.slideUp(); 
 
    button.text('Add Answer'); // change the button text so it says add answer 
 
    } else { 
 
    // run this code if the form is not visible 
 
    form.slideDown('slow'); 
 
    form.find('textarea.addtext').focus(); 
 
    button.text('Hide answer'); // change the button text so it says hide answer 
 
    } 
 

 
});

Answer 2

Ausgabe kann in dieser Zeile zu finden:

$(this).parent().find('form').slideDown('slow'); 

Sie sind für alle Formen suchen, die unter der Schaltfläche Eltern sind, die alle Formen ist.

Probieren Sie die Taste in der Form und

$(this).parents('form').slideDown('slow'); 

oder verwenden Sie die folgende, wenn das Formular

immer das nächste Element ist

$(this).next('form').slideDown('slow');