在同一頁面上的多個窗體上運行javascript

-1

我是新建網站並需要一些幫助。我在頁面上有三種形式。兩種形式是模態。我試圖在所有它們上運行java腳本。但它看起來像Java腳本將只運行在首先使用的窗體上。有誰能告訴我我哪裏出錯了。下面是我的代碼在同一頁面上的多個窗體上運行javascript

$(function() { 
 

 
    // Get the form. 
 
    var form = $('#ajax-contact'); 
 
    var form = $('#ajax-enquires'); 
 
    var form = $('#ajax-cv'); 
 

 
    // Get the messages div. 
 
    var formMessages = $('#form-messages'); 
 

 
    //Hide image on page load 
 
    $('#loader').hide(); 
 

 
    // Set up an event listener for the contact form. 
 
    $(form).submit(function(e) { 
 
    // Stop the browser from submitting the form. 
 
    e.preventDefault(); 
 

 
    // disable button double submits 
 
    $("#submit").attr('disabled', true); 
 

 
    // Show image before making ajax call 
 
    $('#loader').show(); 
 

 
    // Serialize the form data. 
 
    var formData = $(form).serialize(); 
 

 
    // Submit the form using AJAX. 
 
    $.ajax({ 
 
     type: 'POST', 
 
     url: $(form).attr('action'), 
 
     data: formData 
 
     }) 
 
     .done(function(response) { 
 
     // Hide always after every request 
 
     $('#loader').hide(); 
 
     // Make sure that the formMessages div has the 'success' class. 
 
     $(formMessages).removeClass('error'); 
 
     $(formMessages).addClass('success'); 
 

 
     // Set the message text. 
 
     $(formMessages).text(response); 
 

 
     //Remove message after x seconds 
 
     setTimeout(function() { 
 
      $(formMessages).text(''); 
 
      $(formMessages).removeClass('success') 
 
     }, 3000); 
 

 
     //rest form 
 
     $("#ajax-contact")[0].reset(); 
 
     $("#ajax-enquires")[0].reset(); 
 
     $("#ajax-cv")[0].reset(); 
 

 
     // enable button 
 
     $("#submit").attr('disabled', false); 
 

 
     }) 
 
     .fail(function(data) { 
 
     // Hide always after every request 
 
     $('#loader').hide(); 
 
     // Make sure that the formMessages div has the 'error' class. 
 
     $(formMessages).removeClass('success'); 
 
     $(formMessages).addClass('error'); 
 

 
     // Set the message text. 
 
     if (data.responseText !== '') { 
 
      $(formMessages).text(data.responseText); 
 
     } else { 
 
      $(formMessages).text('Oops! An error occured and your message could not be sent.'); 
 
     } 
 

 
     //Remove message after x seconds 
 
     setTimeout(function() { 
 
      $(formMessages).text(''); 
 
      $(formMessages).removeClass('error') 
 
     }, 5000); 
 

 
     // enable button 
 
     $("#con-submit").attr('disabled', false); 
 

 
     }); 
 

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<title></title> 
 
<meta charset="UTF-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="css/styles_test.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
<body> 
 

 

 
    <div class="w3-content w3-container w3-padding-64"> 
 
    <div class="w3-row w3-padding-32 w3-section"> 
 
     <div class="w3-col m8 w3-container w3-section"> 
 
     <form id="ajax-contact" method="POST" action="php/contact.php"> 
 
      <div class="w3-row-padding" style="margin:0 -16px 8px -16px"> 
 
      <div class="w3-half"> 
 
       <input class="w3-input w3-border" type="text" placeholder="Name" required name="name"> 
 
      </div> 
 
      <div class="w3-half"> 
 
       <input class="w3-input w3-border" type="text" placeholder="Email" required name="email"> 
 
      </div> 
 
      </div> 
 
      <textarea class="w3-input w3-border" type="text" placeholder="Message" required name="message"></textarea> 
 
      <button class="w3-btn w3-gold w3-right w3-padding w3-section" type="submit" id="con-submit"> 
 
      <i class="fa fa-paper-plane"></i> SEND MESSAGE 
 
     </button> 
 
     </form> 
 
     <div id="form-messages"></div> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="w3-display-left w3-display-container w3-center" style="white-space:nowrap;"> 
 
    <div class="w3-padding-xlarge"> 
 
     <button class="w3-btn w3-white w3-padding-large w3-large w3-opacity w3-hover-opacity-off" onclick="document.getElementById('subscribe').style.display='block'">SUBMIT CV</button> 
 
     <button class="w3-btn w3-gold w3-padding-large w3-large w3-opacity w3-hover-opacity-off" onclick="document.getElementById('client').style.display='block'">CLIENT ENQUIRES</button> 
 
    </div> 
 
    </div> 
 

 
    <!-- Subscribe Modal --> 
 
    <div id="subscribe" class="w3-modal w3-animate-opacity"> 
 
    <div class="w3-modal-content w3-padding-jumbo"> 
 
     <div class="w3-container w3-white"> 
 
     <i onclick="document.getElementById('subscribe').style.display='none'" class="fa fa-remove w3-xlarge w3-closebtn w3-hover-text-grey w3-margin"></i> 
 
     <h2 class="w3-wide">SUBMIT YOUR CV TODAY</h2> 
 
     <p></p> 
 
     <form id="ajax-cv" method="POST" action="php/cv.php"> 
 
      <p><input class="w3-input w3-border" placeholder="Full Name" required name="name"></p> 
 
      <p><input class="w3-input w3-border" placeholder="Email Address" required name="email"></p> 
 
      <p><input class="w3-input w3-border" placeholder="Telephone Number" required name="number"></p> 
 
      <p><input type="file" name="cv" accept="file_extension|.doc"></p> 
 
      <button type="submit" id="submit" class="w3-btn-block w3-padding-large w3-gold w3-margin-bottom">Submit</button> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <!-- Client Enquires Modal --> 
 
    <div id="client" class="w3-modal w3-animate-opacity"> 
 
    <div class="w3-modal-content w3-padding-jumbo"> 
 
     <div class="w3-container w3-white"> 
 
     <i onclick="document.getElementById('client').style.display='none'" class="fa fa-remove w3-xlarge w3-closebtn w3-hover-text-grey w3-margin"></i> 
 
     <h2 class="w3-wide">CLIENT ENQUIRES</h2> 
 
     <p></p> 
 
     <form id="ajax-enquires" method="POST" action="php/enquires.php"> 
 
      <p><input class="w3-input w3-border" placeholder="Full Name" required name="name"></p> 
 
      <p><input class="w3-input w3-border" placeholder="Email Address" required name="email"></p> 
 
      <p><input class="w3-input w3-border" placeholder="Telephone Number" required name="number"></p> 
 
      <p><textarea class="w3-input w3-border" placeholder="Message" required name="message"></textarea></p> 
 
      <button type="submit" id="submit" class="w3-btn-block w3-padding-large w3-gold w3-margin-bottom">Send</button> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <script src="js/contact.js"></script> 
 

 
</body> 
 

 
</html>

來源

2017-03-08 KMD

您正在用每個連續表單覆蓋「form」變量。如果你想在一個jQuery對象中放置多個表單，用逗號分隔它們的選擇器，如下所示：'var form = $（'＃ajax-contact，＃ajax-inquires，＃ajax-cv'）;'同樣使用在'click（）'事件處理函數內使用'this'關鍵字代替'form'變量 –

把你的代碼放在一個函數中，當*和*在你需要代碼運行的地方調用該函數。這可能是一些事件處理程序。您可以根據需要多次調用該函數，如果需要，可以將該表單作爲參數傳遞。編輯：羅裏所說的工作也是如此，使用選擇器來選擇你需要的表單。我想說，這更具體到你的情況。 – Theraot

看你在做什麼這裏：

var form = $('#ajax-contact'); 
var form = $('#ajax-enquires'); 
var form = $('#ajax-cv');

這些線路的所有三個後，你有什麼期待form變量是什麼？無論你最後設置爲。

如果你想form（或者更恰當地forms）選擇所有這三個的，與選擇一次設置標識所有三個：

var form = $('#ajax-contact, #ajax-enquires, #ajax-cv');

然後，當你設置你的提交處理程序，它將被設置爲所有這三個匹配元素。

還要注意的是，在您的提交處理程序中，您不希望以您的方式引用form變量。相反，請使用this，以便處理程序的每個實例都知道要使用哪個匹配表單。例如：

var formData = $(this).serialize();

來源

2017-03-08 17:25:54 David

@KMD，但你的html仍然是錯誤的;） – mtizziani

$('form').on('submit', function(){ 
    console.log($(this).attr('id')); 
    // do something 
    $(this).find('button[type="submit"]').attr('disabled', 'disabled'); 
});

媒體鏈接試過這樣的事情？

您每次都會覆蓋您的var表單。

<form id="form1"> 
    <button type="submit">btn1</button> 
</form> 
<form id="form2"> 
    <button type="submit">btn2</button> 
</form>

並且在你的html中也是失敗的，id的只能用一次。你在每種形式中都使用id="submit"。更好地殺死身份證號碼，並在您的js代碼中使用$(this).find('button[type="submit"]')

來源

2017-03-08 17:30:12 mtizziani

你能解釋爲什麼我的HTML是錯誤的，因爲現在所有的表單都工作。新手在這裏:) – KMD

在同一頁面上的多個窗體上運行javascript

回答

相關問題