提交表單沒有刷新頁面使用ajax，仍然刷新我的頁面

我已閱讀和閱讀並看了這樣的例子，並試圖找到我的問題的答案，但似乎無法找到它，但是，這是我的場景具體問題：提交表單沒有刷新頁面使用ajax，仍然刷新我的頁面

Main.php

具有AA搜索形成向上頂，基於搜索，它張貼在頁面的左側結果與CSS的幫助。

當你點擊一個結果時，基於它運行的一些sql查詢，它會檢查該人是否完成了某個事件。如果他們沒有，我希望它張貼在右側的表單輸入一些信息，因爲如果你是第一次，用的是另一個PHP頁面

Main.php

搜索表單
--- --------------------------------------------------
結果發佈... | Tabset.php帶有其他
........................... |第一次使用的用戶形式
........................... |
........................... |
........................... |
........................... |

粗糙的ASCIIish類型的藝術道歉，只是試圖給出更好的視覺發生了什麼事情。

Tabset.php

所以在標籤集PHP頁面我有以下代碼：

<div id="main_form"> 
     <h3>Please enter the following:</h3> 
     <FORM id="form1" METHOD="POST"> 
      <INPUT TYPE = "text" id = "someVAR1" placeholder="someVAR1"/>/
      <INPUT TYPE = "text" id = "someVAR2" placeholder="someVAR2"/> 
      <INPUT TYPE = "submit" id = "submit" VALUE = "ok"/> 
     </FORM> 
    </div> 
    <?php 

    if($_POST) 
    { 
     $someVAR1=$_POST['someVAR1']; 
     $someVAR2=$_POST['someVAR2']; 
    }

refreshform.js

$(document).ready(function() { 
    $("#submit").click(function(e) { 
    e.preventDefault(); 
    var someVAR1= $("#someVAR1").val(); 
    var someVAR1= $("#someVAR2").val(); 

    if(someVAR1=='' || someVAR2=='') 
    { 
     alert("Some Fields are Blank....!!! Please enter something!!!"); 
    } 
    else 
    { 
     $.ajax({ 
     type: "POST", 
     url: "Tabset.php", 
     success: function(){ 
      $('#form1').fadeOut(200).hide(); 
      $('.success').fadeIn(200).show(); 
      $('.error').fadeOut(200).hide(); 
      $('#form1')[0].reset(); 
     } 
     }); 
    } 
    return false; 
    }); 
});

當我點擊提交按鈕，它沒有捕獲的領域是空的，它仍然刷新我的main.php頁

任何幫助將不勝感激......

我也試過爲我的JS以及，具有相同的結果：

$(document).ready(function(){ 
    $("#submit").click(function(){ 
    var someVAR1= $("#someVAR1").val(); 
    var someVAR2= $("#someVAR2").val(); 
    //alert(sBP); 

    if(someVAR1==''|| someVAR2==''){ 
     alert("Some Fields are Blank....!!! Please enter something!!!");  
    } 
    else{ 
     alert("Resetting data now..."); 
     $('#form')[0].reset(); //To reset form fields 

    } 
    }); 
});

來源

2015-08-18 devNub

我會首先懷疑JavaScript錯誤。請使用瀏覽器控制檯中的工具來捕獲錯誤。 – Twisty

你有沒有試過$（「＃form1」）.submit（function（event）{instead of $（「＃submit」）。點擊？ – jperry1147

你有沒有包含JQuery庫？：] – WhoIsJohnDoe

你有someVAR1定義了兩次。最好使用===。小提琴：http://jsfiddle.net/Twisty/3o9bjhyg/

$(document).ready(function() { 
    $("#submit").click(function (e) { 
     e.preventDefault(); 
     var someVAR1 = $("#someVAR1").val(); 
     var someVAR2 = $("#someVAR2").val(); 

     if (someVAR1 === '' || someVAR2 === '') { 
      alert("Some Fields are Blank....!!! Please enter something!!!"); 
     } else { 
      $.ajax({ 
       type: "POST", 
       url: "Tabset.php", 
       success: function() { 
        $('#form1').fadeOut(200).hide(); 
        $('.success').fadeIn(200).show(); 
        $('.error').fadeOut(200).hide(); 
        $('#form1')[0].reset(); 
       } 
      }); 
     } 
     return false; 
    }); 
});

來源

2015-08-18 16:01:57 Twisty

糾正它謝謝你。 – devNub

我的測試工作。我希望它對你有用。如果這回答了你的問題，我希望你會標記它。 – Twisty

它停止了刷新，但它仍然沒有捕捉到我的警報... – devNub

喜與重裝你的問題是，當你按下在提交類型化按鈕提交事件被觸發，而不是點擊請嘗試：

$(document).ready(function() { 
    $("#submit").submit(function(e) { 
    e.preventDefault(); 
    var someVAR1= $("#someVAR1").val(); 
    var someVAR1= $("#someVAR2").val(); 

    if(someVAR1=='' || someVAR2=='') 
    { 
     alert("Some Fields are Blank....!!! Please enter something!!!"); 
    } 
    else 
    { 
     $.ajax({ 
     type: "POST", 
     url: "Tabset.php", 
     success: function(){ 
      $('#form1').fadeOut(200).hide(); 
      $('.success').fadeIn(200).show(); 
      $('.error').fadeOut(200).hide(); 
      $('#form1')[0].reset(); 
     } 
     }); 
    } 
    return false; 
    }); 
});

來源

2015-08-18 15:58:29 volkinc

提交表單沒有刷新頁面使用ajax，仍然刷新我的頁面

回答

相關問題