当用户使用jQuery单击按钮时，选择相同表单的输入内容

Question

我在同一页面上有多个表单，此时我使用jQUery ajax将其内容发送到另一个服务器，在发送之前使用单个唯一选择器获取它们的值。为了减少代码，我想改变方法：

而不是使用单独的唯一选择器，例如：

$(#form-1 button).click(function(){
    var name = $("[name='name-1']").val();
});

像这样的事情：

$(form button).click(function(){
   var name = $(this).sibbling("[name='name']").val();
});

​

$("#form-1 button").click(function(){
  var name = $("[name='name']").val();
  var phone = $("[name='phone']").val();
  console.log(name);
  console.log(phone);
  // [...] ajax stuff
});
$("#form-2 button").click(function(){
  var name = $("[name='name-2']").val();
  var phone = $("[name='phone-2']").val();
  console.log(name);
  console.log(phone);
  // [...] ajax stuff
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form-1">
  <div class="form-group">
    <label for="name">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="name">
  </div>
  <div class="form-group">
    <label for="phone">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="phone">
  </div>
  <button type="button">Send </button>
 </form>

<form id="form-2">
  <div class="form-group">
    <label for="nombre">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="name-2">
  </div>
  <div class="form-group">
    <label for="phone-2">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="phone-2">
  </div>
  <button type="button">Send </button>
 </form>

​

我所有的表单都有相同的3个值(姓名、电子邮件和电话)。

Answer 1

我在这里使用事件委托，在this中使用jQuery，重点是按类进行选择：

事件-委托方法只将事件处理程序附加到一个元素，在本例中为表单，而事件只需要将一个级别(从单击的按钮到窗体)气泡起来。

这也只会触发单击按钮的函数及其关联的输入。这将防止按任一按钮处理这两种窗体。

参考文献

这个jQuery选择器：

let name = $(this).parent().find("[name='name']").val();

工作方式如下：

$(this)是单击的button元素。然后，我们转到单击按钮的父键，即form。然后，我们使用.find()，它将“获取当前匹配元素集中每个元素的后代，并由选择器、jQuery对象或元素过滤。”在本例中，我们希望找到名称为name的元素，它是文本输入，所以我们使用.find("[name='name']")。更重要的是，这是我们所做的工作所需要的潜在的许多输入的特定输入。最后，我们使用.val()获取选择器的值。

​

$(".myForm").on('click', "button", function() {
  let name = $(this).parent().find("[name='name']").val();
  let phone = $(this).parent().find("[name='phone']").val();
  console.log(name);
  console.log(phone);
  // [...] ajax stuff
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form-1" class="myForm">
  <div class="form-group">
    <label for="name">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="name">
  </div>
  <div class="form-group">
    <label for="phone">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="phone">
  </div>
  <button type="button">Send </button>
</form>

<form id="form-2" class="myForm">
  <div class="form-group">
    <label for="nombre">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="name">
  </div>
  <div class="form-group">
    <label for="phone-2">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="phone">
  </div>
  <button type="button">Send </button>
</form>

​

Answer 2

你需要循环元素。

https://api.jquery.com/each/

并使用正确的选择器(注意选择器中的"^“)。

id的jQuery选择器以特定文本开头。

​

$("button").click(function(){
  
  $("[name^='name']").each(function(){
     console.log($(this).attr("name") + " - val : " + $(this).val());            
  })
  
  $("[name^='phone']").each(function(){
     console.log($(this).attr("name") + " - val : " + $(this).val());            
  })

  // [...] ajax stuff
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form-1">
  <div class="form-group">
    <label for="name">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="name">
  </div>
  <div class="form-group">
    <label for="phone">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="phone">
  </div>
  <button type="button">Send </button>
 </form>

<form id="form-2">
  <div class="form-group">
    <label for="nombre">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="name-2">
  </div>
  <div class="form-group">
    <label for="phone-2">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="phone-2">
  </div>
  <button type="button">Send </button>
 </form>

​

或使用表单选择器

​

$("button").click(function(){
  
  $("form[id^='form']").each(function(){
    console.log($(this).attr('id'));
    console.log($(this).find("input[name^='name']").attr("name") + " - val : " + $(this).find("input[name^='name']").val());  
    console.log($(this).find("input[name^='phone']").attr("name") + " - val : " + $(this).find("input[name^='phone']").val());  
  })

  // [...] ajax stuff
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form-1">
  <div class="form-group">
    <label for="name">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="name">
  </div>
  <div class="form-group">
    <label for="phone">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="phone">
  </div>
  <button type="button">Send </button>
 </form>

<form id="form-2">
  <div class="form-group">
    <label for="nombre">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="name-2">
  </div>
  <div class="form-group">
    <label for="phone-2">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="phone-2">
  </div>
  <button type="button">Send </button>
 </form>

​

或使用表单选择器

​

$("button").click(function(){
  

    console.log($(this).parent('form').attr('id'));
    console.log($(this).parent('form').find("input[name^='name']").attr("name") + " - val : " + $(this).parent('form').find("input[name^='name']").val());  
    console.log($(this).parent('form').find("input[name^='phone']").attr("name") + " - val : " + $(this).parent('form').find("input[name^='phone']").val());  

  // [...] ajax stuff
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form-1">
  <div class="form-group">
    <label for="name">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="name">
  </div>
  <div class="form-group">
    <label for="phone">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="phone">
  </div>
  <button type="button">Send </button>
 </form>

<form id="form-2">
  <div class="form-group">
    <label for="nombre">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="name-2">
  </div>
  <div class="form-group">
    <label for="phone-2">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="phone-2">
  </div>
  <button type="button">Send </button>
 </form>

​