Jquery：正しいターゲットフォームからの入力を取得する方法

Question

2つのフォームを持つページを作成しました。各フォームにはテキストボックスと送信ボタンがあります。いずれかのフォームが起動されると、（同じ）submit関数を起動します。この関数は、どのフォームが起動されたかを知ることができ、入力されたテキストとIDを取得する必要があります。

これは最初のフォームでは機能しますが、2番目のフォームでは機能しません。 2番目のSubmitボタンをクリックすると、id = "1"が正しく取得されますが、最初のテキストボックスから入力が読み込まれます。一般的に私はターゲットをナビゲートするのに苦労しています：時々、それは発射を引き起こす要素の最初のものに過ぎないこともあります。

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

スクリプトは次のとおりです。

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

あなたのIDを持ついくつかの問題があります。

あなたの質問への答えは、メインイベントを受信し<form>を参照するためにthisを使用することです：

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

トラブルはIDがHTML4の数字で始めることができないということです。

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

と同じページにIDを重複させることはできません。

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

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

urlがクラスだった場合、それは良いだろう：

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

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

そして、クラスによって選択：

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