通過處理或等待，並通過處理或等待，並從服務器端驗證

在這我必須這樣做，當我點擊保存按鈕，然後首先處理（等待）工作，然後形式提交，並從服務器驗證表單方太所有驗證可以從服務器端工作太通過處理或等待，並通過處理或等待，並從服務器端驗證

form.html

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script src="js/validate.js"></script> 
    <script src="js/function.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
</head> 
<body> 
    <form action="insert.php" method="post" id="register-form" onsubmit=" return add();"> 
    <div class="label"> Name<input type="text" id="name" name="name" /><br /></div> 
    <div class="label">Email<input type="text" id="email" name="email" /><br /></div> 
    <div class="label">Phone<input type="text" id="phone" name="phone" /><br /></div> 
    <div class="label">budget 
     <select id="budget" name="budget"> 
     <option value="">select</option> 
     <option value="0-99">0-99</option> 
     <option value="100-199">100-199</option> 
     <option value="200-299">200-299</option> 
     <option value="300-399">300-399</option> 
     </select></div> 
     <br /><br /> 
     <input type="submit" onclick="add()" name="submit" value="SAVE" /> 
     <div id="message"></div> 
    </form> 
</body> 
</html>

function.js

function add(){ 
    $("#register-form").validate({ 
     rules: { 
      //name: "required", 
      email: { 
       required: true, 
       email: true 
      }, 
      budget: { 
       required: true, 
      }, 
      phone:"required", 
     }, 
     messages: { 
      name: "Please enter your Name", 
      email: "Please enter a valid Email address", 
      phone: "Please enter a valid Phone Number", 
      budget: "Please Select a Budget", 
     }, 
     submitHandler: function(form) { 
      //alert("success") 
      $.ajax({ 
       url:"insert.php", 
       type:"POST", 
       //dataType : 'json', 
       data:$('#register-form').serialize(), 
       success: function(response){ 
        $("#message").html(response); 
       } 
      }); 
     } 
    }); 
}

insert.php

<?php 
include("config.php"); 
$name=$_POST["name"]; 
$email=$_POST["email"]; 
$phone=$_POST["phone"]; 
$budget=$_POST['budget']; 
if($name=='' || $email=='' || $phone=='' || $budget=='') { 
    echo 'fill your information'; 
} 
else{ 
    $insert_query="insert into form(name,email,phone,budget) values ('$name','$email','$phone','$budget')"; 
    $con=mysql_query($insert_query); 
    echo 'data save'; 
} 

?>

來源

2014-02-19 user3292597

首先除去行動= 「insert.php」從形式。並在ajax中添加event.preventDefault（）。 –

試試下面的代碼。

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script src="js/validate.js"></script> 
    <script src="js/function.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
<style> 
    #wait 
    { 
    background-color:rgba(0,0,0,0.7); 
    position:fixed; 
    display:none; 
    text-align:center; 
    width:100%; 
    height:100%; 
    z-index:999; 
    top:0; 
    left:0; 
    padding:2px; 
    } 
</style> 
</head> 
<body> 
    <form method="post" id="register-form"> 
    <div class="label"> Name<input type="text" id="name" name="name" /><br /></div> 
    <div class="label">Email<input type="text" id="email" name="email" /><br /></div> 
    <div class="label">Phone<input type="text" id="phone" name="phone" /><br /></div> 
    <div class="label">budget 
     <select id="budget" name="budget"> 
     <option value="">select</option> 
     <option value="0-99">0-99</option> 
     <option value="100-199">100-199</option> 
     <option value="200-299">200-299</option> 
     <option value="300-399">300-399</option> 
     </select></div> 
     <br /><br /> 
     <input type="submit" onclick="add()" name="submit" value="SAVE" />   
    </form> 
    <div id="message"></div> 
    <div id="wait"> 
    <img src="images/loader.gif" width="150" height="150" style="margin-top:200px;opacity:1"/> 
    </div> 
</body> 
</html>

FUNCTION.JS

function add(){ 
    $("#register-form").validate({ 
     rules: { 
      //name: "required", 
      email: { 
       required: true, 
       email: true 
      }, 
      budget: { 
       required: true, 
      }, 
      phone:"required", 
     }, 
     messages: { 
      name: "Please enter your Name", 
      email: "Please enter a valid Email address", 
      phone: "Please enter a valid Phone Number", 
      budget: "Please Select a Budget", 
     }, 
     submitHandler: function(form) { 
      $("#wait").css("display","block"); 
      //alert("success") 
      $.ajax({ 
       url:"insert.php", 
       type:"POST", 
       //dataType : 'json', 
       data:$('#register-form').serialize(), 
       success: function(response){ 
        $("#message").html(response); 
        $("#wait").css("display","none"); 
       } 
      }); 
     } 
    }); 
}

INSERT.PHP

<?php 
include("config.php"); 
$name=$_POST["name"]; 
$email=$_POST["email"]; 
$phone=$_POST["phone"]; 
$budget=$_POST['budget']; 
if($name=='' || $email=='' || $phone=='' || $budget=='') { 
    echo 'fill your information'; 
} 
else{ 
    $insert_query="insert into form(name,email,phone,budget) values ('$name','$email','$phone','$budget')"; 
    $con=mysql_query($insert_query); 
    echo 'data save'; 
} 

?>

來源

2014-02-19 04:58:17

通過處理或等待，並通過處理或等待，並從服務器端驗證

回答

相關問題