Jquery：如何从正确的目标表单中获取输入答案

【问题标题】：Jquery: How to get input from correct target formJquery：如何从正确的目标表单中获取输入
【发布时间】：2011-01-02 15:14:28
【问题描述】：

我创建了一个包含两个表单的页面。每个表单都有一个文本框和一个提交按钮。当任一表单被触发时，我希望（相同的）提交函数被触发。然后该函数必须能够判断触发了哪个表单，获取输入的文本以及 ID。

它适用于第一种形式，但不适用于第二种形式。当我单击第二个提交按钮时，它正确获取了 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

【问题讨论】：

标签： jquery forms

【解决方案1】：

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

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

    return false;

});

【讨论】：

【解决方案2】：

您的 ID 存在一些问题。

您问题的主要答案是使用this 来指代收到事件的<form>：

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

问题是在 HTML4 中 ID 不能以数字开头。

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

【讨论】：