提交按鈕不適用於HTML和JavaScript

每當我嘗試點擊提交按鈕，什麼都不會發生。提交按鈕不適用於HTML和JavaScript

我試圖改變按鈕，但我懷疑這是問題。

JavaScript代碼：

$('#contactForm').submit(function() { 

     $.ajax({ 
      type: "POST", 
      url: "php/contact.php", 
      data: $('#contactForm').serialize(), 
      success: function (msg) { 
       if (msg == 'SEND') { 
        $('.success').fadeIn(); 
        $('.error').fadeOut(); 
        $('#contactForm')[0].reset(); 
       } else { 
        $('.success').fadeOut(); 
        $('.error').fadeIn().find('h3').text(msg); 
       } 
      } 
     }); 
     return false; 
    });

HTML代碼：

<div> 
      <h2 class="small-heading">CONTACT US</h2> 

      <div class="contact-form col-sm-11 clearfix"> 

       <form action="contact-complete.php" id="contactForm" method="post" name="contactForm"> 
        <fieldset> 
         <div class="col-sm-12"> 
          <input id="name" name="name" placeholder="Your Name*" type="text" value=""> 
         </div> 


         <div class="col-sm-12"> 
          <input id="email" name="email" placeholder="Your Email*" type="text" value=""> 
         </div> 

         <div class="col-xs-12"> 
          <textarea cols="5" id="message" name="message" placeholder="Your Message....*"></textarea> 
         </div> 

         <div class="col-xs-12"> 
          <button type="submit" form="contactForm" class="submit active">SEND</button> 

         </div> 

         <div class="error col-xs-12"> 
          <h3></h3> 
         </div> 

         <!-- Error Message [ END ] --> 

         <div class="success col-xs-12" id="update"> 
          <h3>Success! Your message was sent.</h3> 
         </div> 

         <!-- Submit Button [ END ] --> 

        </fieldset> 
       </form> 

       <!-- Contact Form [ END ] --> 

      </div> 
     </div>

如果你能請幫我出這將是非常讚賞。

非常感謝您的幫助。

來源

2017-03-24 kiefx

你確定要加載JS嗎？嘗試加上'alert（'hello'）' – math2001

是的，JavaScript正在加載。還有其他腳本在頁面上運行時沒有問題。 – kiefx

是否在'$（document）.ready（）'裏面的Javascript？ – Barmar

-1

你的按鈕可是沒有一個動作，你在JS鴕鳥政策聽，要麼

<button type="submit" form="contactForm" class="submit active" OnClick="submit()">SEND</button>

或添加ID，並聽取該

來源

2017-03-24 23:12:06

謝謝，但是我已經在收聽ID了。 @adeneo回答了我的問題。 :-) – kiefx

提交按鈕將不提供任何腳本提交表單。當它在表單中時，它的表單屬性默認引用表單，即使它沒有名稱或ID。 – RobG

是的，我有點齋戒。我一直使用類似 <按鈕ID = 「＃身份識別碼」/> $（「＃身份識別碼」）。點擊（函數（）{//東西} 爲了避免與不需要形式提交的問題... –

這似乎是AJAX中的問題呼叫。我刪除了「返回false」;從代碼，它似乎工作。但是，它發送了兩次信息。所以我只是一起刪除了AJAX代碼，它很好地重定向到PHP郵件（）腳本。

感謝您的幫助。

來源

2017-03-24 23:24:50 kiefx

你應該發佈一個答案作爲答案，或者刪除該問題 – RobG

我曾經發布過它作爲答案，smarty pants。Stackoverflow聲明我不應該刪除這個問題，因爲它會阻止其他人學習我告訴過你什麼是修復是的，我不明白爲什麼你一定是如此憤世嫉俗，拿一個冷藏藥羅布。 – kiefx

這似乎更像是對我的評論。如果你已經刪除了整個AJAX部分，那麼你只是做一個標準的表格提交這個問題真的有什麼價值嗎？當然你的選擇，你也可以接受你自己的答案，這樣其他人就會知道你不會尋求進一步的答案。 – RobG

除了根據發送的內容（自定義數據驗證）將呼叫呈現爲success的自定義php應用邏輯之外，您的$.ajax()調用本身可以成功或不成功。

本身，如果通話返回的狀態代碼的範圍爲200+，則success ful和success函數被執行。如果status code高於300，那麼這是一個錯誤，並且您的$.ajax()的error函數會得到執行，如果您提供了一個函數。

大多數時候，XHR的故障（ajax）調用是由於在處理該請求，並可以是任何類型的錯誤（從簡單的404 s到unathorized要求，對內部服務器錯誤遇到php錯誤。

要更多地瞭解發生了什麼，添加一個error處理功能，以您的通話$.ajax：

$.ajax({ 
    ... 
    error: function(response) { 
    console.log(response); 
    } 
});

請注意，即使你不console.log()你的反應，大多數瀏覽器允許您登錄所有的網絡活動，includi開發者工具中的XHR請求和響應。您可以查看他們的姓名，狀態，大小和時間，點擊後可以查看發送的請求標題，預覽和查看回復（如果有）以及詳細時間。

要在Chrome瀏覽器中查看上述詳細信息，您需要打開開發者工具，轉到網絡標籤，點擊XHR。和許多其他調試工具一樣，Network只會在您開啓了您的開發控制檯時進行記錄，因此您需要發送一個工具打開的$.ajax()以記錄它。

如果您的XHR沒有返回錯誤，請嘗試調試您的PHP代碼。從函數的第一行開始處理$.ajax調用，返回$_REQUEST對象。如果你把它放回到你的頁面中，那麼你的方向是正確的，繼續調試你的腳本直到你發現錯誤。另請注意，通常的做法是將您的回覆編碼爲json，因爲它允許發送結構化數據。

來源

2017-03-25 02:02:15

提交按鈕不適用於HTML和JavaScript

回答

相關問題