如何將 javascript function 用於多個 html forms

Question

我正在嘗試將 java 腳本 function 用於多個 html ZAC68B62ABFD6A9FE26E8C42 沒有運氣。 以下是我的代碼。 請幫幫我。 謝謝

html forms

<form id="my_form_id">
    Your Email Address: <input type="text" id="email" /><br>
    <input type="submit" />
    <div id='loader' style='display:none'>
        <img src='images/loader.gif'/>
    </div>
</form>
<form id="my_form_id">
    Your Email Address: <input type="text" id="email" /><br>
    <input type="submit" />
    <div id='loader' style='display:none'>
        <img src='images/loader.gif'/>
    </div>
</form>

Javascript

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#my_form_id').on('submit', function(e){
                     $('#loader').show();
                    //Stop the form from submitting itself to the server.
                    e.preventDefault();
                    var email = $('#email').val();
                    $.ajax({
                        type: "POST",
                        url: 'xml.php',
                        data: {email: email},
                        success: function(data){
                            alert(data);
                            $('#loader').hide();
                        }
                    });
                });
            });
        </script>

Answer 1

您可以使用 jquery多選器，如

$('#my_form_id,#my_form_id2').on('submit', function(e){

每個 html 元素的Id必須是唯一的

還有重復的 email id。 但是您會希望獲得特定於該表單的 email。 在這種情況下，您可以使用 class 然后使用find

 $(document).ready(function() { $('#my_form_id,#my_form_id2').on('submit', function(e) { $('#loader').show(); //Stop the form from submitting itself to the server. e.preventDefault(); var email = $(this).find('.email').val(); // children console.log(email) }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="my_form_id"> Your Email Address: <input type="text" class="email" /><br> <input type="submit" /> <div id='loader' style='display:none'> <img src='images/loader.gif' /> </div> </form> <form id="my_form_id2"> Your Email Address: <input type="text" class="email" /><br> <input type="submit" /> <div id='loader' style='display:none'> <img src='images/loader.gif' /> </div> </form>

Answer 2

文檔中的 id 應該是唯一的，將 id 轉換為 class，

<form class="my_form_class">

並附上選擇 class 的監聽器。

$('.my_form_class').on('submit', function(e){// rest of the code})

Answer 3

主要問題是因為id屬性需要是唯一的。 當您在form和 email 輸入的 HTML 中重復它們時，只會找到每個的第一個實例。

要解決此問題，請將它們更改為class屬性。 從那里您可以使用 DOM 遍歷來查找與提交的表單相關的元素，以便檢索所需的數據。 嘗試這個：

 jQuery(function($) { $('.my_form').on('submit', function(e) { e.preventDefault(); var $form = $(this); var email = $form.find('input[name="email"]').val(); $form.find('.loader').show(); $.ajax({ type: "POST", url: 'xml.php', data: { email: email }, success: function(data) { console.log(data); $form.find('.loader').hide(); } }); }); });

 .loader { display: none; }

 <form class="my_form"> Your Email Address: <input type="text" name="email" /><br> <button type="submit">Submit</button> <div class="loader"> <img src="images/loader.gif" /> </div> </form> <form class="my_form"> Your Email Address: <input type="text" name="email" /><br> <button type="submit">Submit</button> <div class="loader"> <img src="images/loader.gif" /> </div> </form> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>