Question

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

Answer 1

您的身份证上存在一些问题。

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

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

Answer 2

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

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

    return false;

});

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

2 个答案: