JQuery: как получить данные из правильной целевой формы

Question

Я создал страницу с двумя формами.Каждая форма имеет текстовое поле и кнопку отправки.Когда любая форма запускается, я хочу, чтобы (та же самая) функция отправки была запущена.Затем функция должна иметь возможность сказать, какая форма была запущена, получая введенный текст, а также идентификатор.

Она работает для первой формы, но не для второй формы.Когда я нажимаю вторую кнопку «Отправить», она правильно получает 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

У вас есть некоторые проблемы с вашими идентификаторами.

Основной ответ на ваш вопрос - использовать this для обозначения <form>, получившего событие:

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

Проблема в том, что идентификатор не может начинаться с цифры в HTML4.

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

, и вы не можете иметь дубликаты идентификаторов на одной странице.

 <!-- 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();