當用戶使用jQuery單擊按鈕時選擇相同表單的輸入內容-有解無憂

我在同一頁面上有多個表單，此時我正在使用 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 個值（姓名、電子郵件和電話）。

uj5u.com熱心網友回復：

你需要回圈元素。

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>

uj5u.com熱心網友回復：

我在這里和thisjQuery 中使用事件委托，并專注于按類選擇：

事件委托方法僅將事件處理程式附加到一個元素，在本例中為表單，并且事件只需要向上一層（從單擊的按鈕到表單）。

這也只會觸發被點擊的按鈕及其相關輸入的功能。這可以防止同時按下任一按鈕處理兩種形式。

參考

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/322546.html

標籤：javascript html 查询

上一篇：用C語言將大的位元字串轉換為十六進制

下一篇：如何使用javascript中的split函式拆分值以只檢查第一次和最后一次出現