Jquery: Wie bekomme ich die Eingabe vom richtigen Zielformular

Question

Ich habe eine Seite mit zwei Formen erstellt. Jedes Formular hat ein Textfeld und eine Senden-Schaltfläche. Wenn eines der Formulare ausgelöst wird, möchte ich, dass die (gleiche) Übermittlungsfunktion ausgelöst wird. Die Funktion muss dann erkennen können, welches Formular gefeuert wurde, und den eingegebenen Text sowie eine ID erhalten.

Es funktioniert für die erste Form, aber nicht für die zweite Form. Wenn ich auf die zweite Schaltfläche "Senden" klicke, wird die ID = "1" korrekt gelesen, aber die Eingabe wird aus dem ersten Textfeld gelesen. Im Allgemeinen fällt es mir schwer, Ziele zu navigieren: Manchmal ist es nur das erste Element, das die Zündung verursacht und manchmal ist es alles.

 <div> 
     <p>First form</p> 
     </div> 
     <div class = 'add_video_form' id = "3"> 
     <form method="post" action="dummy/"> 
      <input type="text" id="url"> 
      <input type="submit" value = "Add video"> 
     </form> 
     </div>   
     <div> 
     <p>Second form</p> 
    </div> 
     <div class = 'add_video_form' id = "1"> 
     <form method="post" action="dummy/"> 
      <input type="text" id="url"> 
      <input type="submit" value = "Add video"> 
      </form> 
    </div>  

Das Skript ist:

$(document).ready(function(){ 

    $("form").submit(function() { 

    var v_new_url = $("input#url").val(); 

    var v_cat_id = $(event.target).parents(".add_video_form").attr("id"); 


    alert(v_new_url); 
    alert(v_cat_id); 

    return false; 

}); 
    });  //end of $(document).ready 

Answer 1

$('form').submit(function() { 

    var input_value = $(this).find('input:text').val(); 
    var id = $(this).parent().attr('id'); 

    return false; 

}); 

Answer 2

Sie haben einige Probleme mit Ihrer IDs.

Die wichtigste Antwort auf Ihre Frage ist this zum <form> beziehen zu verwenden, das das Ereignis erhalten:

var v_new_url = $(this).find("input#url").val(); 

Das Problem ist, dass eine ID nicht mit einer Zahl in HTML4 beginnen.

<div class = 'add_video_form' id = "3"> <!-- invalid ID in HTML4 --> 

und Sie können keine doppelten IDs auf derselben Seite haben.

<!-- first form --> 
<input type="text" id="url"> <!-- duplicate ID --> 

<!-- second form --> 
<input type="text" id="url"> <!-- duplicate ID --> 

Es wäre besser, wenn url eine Klasse war:

<!-- first form --> 
<input type="text" class="url"> 

<!-- second form --> 
<input type="text" class="url"> 

Wählen Sie dann von der Klasse:

var v_new_url = $(this).find("input.url").val();