如何知道我點擊了哪個表單按鈕類

我怎麼知道我單擊的表單？它可以用按鈕類而不是帶ID的按鈕嗎？如何知道我點擊了哪個表單按鈕類

$(document).ready(function() { 
    $(".form-buttons").click(function() { 
     //I only want the form wich corresponds to the button i clicked 
     var formDates = $(form).serialize() 
     alert ("You clicked "+formDates) 
    }) 
})

<form id="form1"> 
    <input type="text" value="date1" name="name1"/> 
    <input type="text" value="date2" name="name2"/> 
    <input type="text" value="date3" name="name3"/> 
    <button type="button" class="form-button"></button> 
</form> 
<form id="form2"> 
    <input type="text" value="date4" name="name1"/> 
    <input type="text" value="date5" name="name2"/> 
    <input type="text" value="date6" name="name3"/> 
    <button type="button" class="form-button"></button> 
</form>

來源

2016-07-02 SilverSurfer

是的，它可以使用名稱屬性和它的屬性。 –

使用表單提交處理程序和提交按鈕更簡單，因此用戶可以使用鍵盤提交 – charlietfl

對於類似的元素，可以使用class而不是id。請試試這個。

注意：form-button是在你的HTML類的名稱，而不是form-buttons

$(document).ready(function() { 
    $(".form-button").click(function() { 
     var formDates = $(this).closest('form').serialize(); 
     alert ("You clicked "+formDates) 
    }) 
})

來源

2016-07-02 18:36:12 dinesh

Op需要知道哪個表單被點擊，然後纔會採取行動。沒有意義。如果它是第一種形式或第二種形式，您如何識別使用上述代碼？ –

'this'關鍵字將返回點擊按鈕，'最近'方法將返回相應的表單元素。實際上，@ silversurfer122想要根據點擊函數內代碼中的註釋序列化特定的表單元素值。 – dinesh

@AkshayKhandelwal在'最接近（）'的地方查看jQuery API。這實際上比在大多數情況下使用'parents（）'更好的方法 – charlietfl

您可以通過使用this關鍵字這是指，在DOM事件，到cibled元素得到元素的名稱：

$(document).ready(function() { 
    $(".form-buttons").click(function() { 
     alert('You clicked the form' + this.parentElement.getAttribute('id')); 
    }) 
})

來源

2016-07-02 18:31:17 ClementNerma

我想你會尋找

$('.form-button').on('click', function() { 
    alert($(this).parents('form').attr('id')); // Check the ID of the form clicked 
});

東西可能像上面提到的那樣。

來源

2016-07-02 18:32:57

您可以在幾個不同的方式做到這一點。您可以遍歷DOM並查看使用哪種表單或 - 這是我的最愛 - 您可以提交表單！

解決方案1：向上遍歷DOM

<script> 
     $(document).ready(function() { 
      $(".form-button").click(function() { 
       var clicked_form = $(this).parent(); 
       var formDates = clicked_form.serialize(); 
       alert ("You clicked "+formDates); 
      }) 
     }) 
    </script> 
</head> 

<body> 
    <form id="form1"> 
     <input type="text" value="date1" name="name1"/> 
     <input type="text" value="date2" name="name2"/> 
     <input type="text" value="date3" name="name3"/> 
     <button type="button" class="form-button"></button> 
    </form> 
    <form id="form2"> 
     <input type="text" value="date4" name="name1"/> 
     <input type="text" value="date5" name="name2"/> 
     <input type="text" value="date6" name="name3"/> 
     <button type="button" class="form-button"></button> 
    </form> 
</body>

解決方案2：提交表單

你已經在使用的形式，爲什麼不提交？將按鈕更改爲使用提交類型輸入元素並攔截提交事件，如下所示。這是我認爲應該是完成。這對用戶體驗來說也更好，因爲用戶可以通過按回車來提交表單。

<script> 
     $(document).ready(function() { 
      $("form").on('submit', function (e) { 
       e.preventDefault();      
       var formDates = $(this).serialize() 
       alert ("You clicked "+formDates) 
      }) 
     }) 
    </script> 
</head> 

<body> 
    <form id="form1"> 
     <input type="text" value="date1" name="name1"/> 
     <input type="text" value="date2" name="name2"/> 
     <input type="text" value="date3" name="name3"/> 
     <input type="submit" class="form-button"></input> 
    </form> 
    <form id="form2"> 
     <input type="text" value="date4" name="name1"/> 
     <input type="text" value="date5" name="name2"/> 
     <input type="text" value="date6" name="name3"/> 
     <input type="submit" class="form-button"></input> 
    </form> 
</body>

來源

2016-07-02 18:39:10

檢查這把小提琴怎麼做。

https://jsfiddle.net/xtfeugav/

簡單使用

$("form").submit(function(e) {

聽每一個提交所有必須的形式。爲了獲取表單的ID您使用

var formid = $(this).attr('id');

我以前e.preventDefault();防止形式不更新頁面。

記得在表單上使用<input type="submit" value="Submit">來完成這項工作。

它是一個簡單的代碼，希望它有幫助。

來源

2016-07-02 18:53:53 Aprilsnar

如何知道我點擊了哪個表單按鈕類

回答

相關問題