2016-06-28 141 views
0

使用Google搜索後,找不到我的代碼的正確解決方案。在這裏,我將JQuery與ajax google庫鏈接以進行HTML FORM驗證。它可以正常工作,但不會在成功提交表單後刷新。請指導我。刷新表單提交不起作用

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

<script> 
function Submit(){ 
    var emailRegex = /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/; 
    var formemail = $("#femail").val(); 
    var name = $("#name").val(); 
     var name = $("#place").val(); 
    var femail = $("#femail").val(); 

     if($("#name").val() == ""){ 
      $("#name").focus(); 
      $("#error").html("Enter the Name."); 
      return false; 
     }else if($("#place").val() == ""){ 
       $("#place").focus(); 
       $("#error").html("Enter the Place."); 
       return false; 
     }else if($("#femail").val() == ""){ 
       $("#femail").focus(); 
       $("#error").html("Enter the email."); 
       return false; 
     }else if(!emailRegex.test(formemail)){ 
       $("#femail").focus(); 
       $("#error").html("Enter the valid email."); 
       return false; 
     }else if($(name != '' && place != '' && femail != '')){ 
      $("#error").html("Form submitted successfully.") 
       } 
     } 
</script> 

<form id="form_name" name="form" method="post" action=" "> 
    <div id="error"></div> 
     NAME: <input type="text" name="Name" id="name" > <br> 
     PLACE: <input type="text" name="Place" id="place"> <br> 
     EMAIL: <input type="text" name="Email" id="femail"> <br><br> 
     <input type="button" id="submit" value="Submit" onClick="Submit()"/> 
</form> 

一旦提交了HTML表單,它就會顯示「表單提交成功」,然後顯示要刷新的表單。

+1

'類型=「按鈕」'不會提交表單... – Rayon

+0

在您最後一次'elseif'reset的投入? – DaniP

回答

0

除了由人造絲建議的修改,你可以刷新你放置$("#form_name")[0].reset()下方$("#error").html("Form submitted successfully.")形成:

function Submit(e){ 
    e.preventDefault(); 
    // You will have to submit your form using ajax. 
    var emailRegex = /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/; 
    var formemail = $("#femail").val(); 
    var name = $("#name").val(); 
     var name = $("#place").val(); 
    var femail = $("#femail").val(); 

     if($("#name").val() == ""){ 
      $("#name").focus(); 
      $("#error").html("Enter the Name."); 
      return false; 
     }else if($("#place").val() == ""){ 
       $("#place").focus(); 
       $("#error").html("Enter the Place."); 
       return false; 
     }else if($("#femail").val() == ""){ 
       $("#femail").focus(); 
       $("#error").html("Enter the email."); 
       return false; 
     }else if(!emailRegex.test(formemail)){ 
       $("#femail").focus(); 
       $("#error").html("Enter the valid email."); 
       return false; 
     }else if($(name != '' && place != '' && femail != '')){ 
      $("#error").html("Form submitted successfully.") 
      $("#form_name")[0].reset(); 
     } 
    } 

但是,如果你沒有使用ajax提交你的表單,你的頁面將被重新加載,從而破壞了顯示「表單提交成功」消息的目的。你應該在你的程序做

+0

我已經檢查過,在輸入第一個數據後,它給予成功和自動刷新。 – guruje

+0

@guruje是否修改了輸入以傳遞事件? ?這對我來說可以。如果我只輸入一個字段,它會請求剩餘的字段 – StaticBeagle

+0

謝謝,它正在工作 – guruje

1

type = 'button',它不會充當submit-button

  • 使用type = "submit"
  • 使用event.preventdefault()防止表單提交,如果客戶端驗證失敗

function Submit(e) { 
 
    var emailRegex = /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/; 
 
    var formemail = $("#femail").val(); 
 
    var name = $("#name").val(); 
 
    var name = $("#place").val(); 
 
    var femail = $("#femail").val(); 
 

 
    if ($("#name").val() == "") { 
 
    $("#name").focus(); 
 
    $("#error").html("Enter the Name."); 
 
    e.preventDefault(); 
 
    } else if ($("#place").val() == "") { 
 
    $("#place").focus(); 
 
    $("#error").html("Enter the Place."); 
 
    e.preventDefault(); 
 
    } else if ($("#femail").val() == "") { 
 
    $("#femail").focus(); 
 
    $("#error").html("Enter the email."); 
 
    e.preventDefault(); 
 
    } else if (!emailRegex.test(formemail)) { 
 
    $("#femail").focus(); 
 
    $("#error").html("Enter the valid email."); 
 
    e.preventDefault(); 
 
    } else if ($(name != '' && place != '' && femail != '')) { 
 
    $("#error").html("Form submitted successfully.") 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<form id="form_name" name="form" method="post" action=" "> 
 
    <div id="error"></div> 
 
    NAME: 
 
    <input type="text" name="Name" id="name"> 
 
    <br>PLACE: 
 
    <input type="text" name="Place" id="place"> 
 
    <br>EMAIL: 
 
    <input type="text" name="Email" id="femail"> 
 
    <br> 
 
    <br> 
 
    <input type="submit" id="submit" value="Submit" onClick="Submit(event)" /> 
 
</form>

+0

與之前一樣正常工作,但刷新未實現。 – guruje

+0

@guruje,在SO片段中,表單提交被阻止..在你的代碼中測試.. – Rayon

+0

@guruje - 你使用'ajax'表單提交嗎? – Rayon

0

使用以下功能...

location.reload(true); 

window.location.reload() 

window.location.href=window.location.href 
+0

一旦成功消息出現,那麼只有刷新纔會發生。 – guruje

0

兩個步驟如下:

  1. 需要給表單的名稱使用下面的一個

<形式ID = 「FORM_NAME」 NAME = 「形式」方法= 「POST」 行動=」「>

代替上述系U

<形式名稱= 「形式」 ID = 「FORM_NAME」 NAME = 「形式」 的方法= 「郵報」 行動=」「>

2.加在你的腳本行 」提交「

文件.form.reset();

//這裏「形式」是你的表單名稱