Który formularz został kliknięty? (modal, zabezpieczenie przed przypadkowym usunięciem).

Question

<script>
  $(document).ready(function() {
  $( "div#confirmBox" ).hide();                 
      $( 'input#usunFot ').click(function() { // element który uruchamia skrypt                      
           var szer = 400;             
    $( "#confirmBox" ).dialog({  // id elementu w którym zdefiniowano okno                  
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "Usuń element": function() {       
          $( "form#formUsunFot" ).submit();  // ID formularza, który ma być wysłany
          $( this ).dialog( "close" );             
        },
        "Anuluj akcję": function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });    
 });
</script>


<script>
  $(document).ready(function() {
  $( "div#confirmBox" ).hide();                   
      $( 'input#usunWpisConf ').click(function() {  // element który uruchamia skrypt                 
           var szer = 400;             
    $( "#confirmBox" ).dialog({      //  id elementu w którym zdefiniowano okno                  
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "Usuń element": function() {       
          $( "form#usunWpis" ).submit();   // ID formularza, który ma być wysłany
          $( this ).dialog( "close" );             
        },
        "Anuluj akcję": function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });    
}); 
</script>

<div id="confirmBox" title="Usuwanie elementu">
  <p><span class="ui-icon ui-icon-alert"></span>
  Czy na pewno chcesz usunąć ten element?</p>
</div>

      <form id="formUsunFot" enctype="multipart/form-data" action='#' method="POST">              
          <input type="submit" name="usunFot" value="usuń" style="display:none" />
          <input id="usunFot" type="button" name="usunFot" value="usuń zdjęcie" style="" />
               
      </form>
      
      
      <form id="usunWpis" action="#" method="POST">
         <input type="submit" name="fotOut" value="usuń" class="grau" style="display:none" /> 
         <input id="usunWpisConf" type="button" name="fotOut" value="usuń wpis" style="" />   
      </form>  

Witam wszystkich, oto opis sytuacji:

W kodzie HTML mam kilka formularzy, które mogą usuwać elementy z bazy. Żeby się zabezpieczyć przed przypadkowym usunięciem czegoś, zastosowałem gotowe rozwiązanie - po kliknięciu "usuń"  treści jest przysłaniana warstwą, na której są przyciski "potwierdź" i "anuluj". Formularz jest wysyłany tylko w przypadku kliknięcia "potwierdź". Na chwilę obecną dla każdego formularza mam dedykowany kod jQuery, który reaguje na kliknięcie skojarzonego z nim formularza. Wszystko działa prawidłowo, ale w ramach optymalizacji chciałbym mieć tylko jeden kod jQuery, który obsłużył by wszystkie formularze. W tym celu trzeba do skryptu jQuery przekazać (z formularza HTML) ID klikniętego przycisku, oraz ID formularza, który to formularz powinien być wysłany na skutek potwierdzenia. JS i jQuery dopiero się uczę (w wolnych chwilach). W JS potrafię to przekazać, jednak nie wiem jak to zrobić w jQuery. Jeżeli ktoś wie jak to zrobić, bardzo proszę o pomoc, najlepiej z choćby krótkim wyjaśnieniem jak to działa. Oczywiście dołączam kod o którym mowa, pozdrawiam.

Answer 1

Nadaj wszystkim przyciskom submit w formularzach tą samą klasę np "form-submit". ID konkretnego właśnie klikniętego przycisku wyciągniesz z kontekstu "this" (czyli z elementu który wywołał daną akcję). Następnie szukając w górę w drzewie DOM znajdź najbliższy element form i z niego też wyciągnij ID. Przykład:

    $('.form-submit').click(function() {
        const buttonID = $(this).attr('id')
        const formID = $(this).closest('form').attr('id')
    })

 

Comments

Dziękuję, dokładnie o to mi chodziło, wszystko działa !