通过处理或等待，并通过处理或等待，并从服务器端验证

在这我必须这样做，当我点击保存按钮，然后首先处理（等待）工作，然后形式提交，并从服务器验证表单方太所有验证可以从服务器端工作太通过处理或等待，并通过处理或等待，并从服务器端验证

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

通过处理或等待，并通过处理或等待，并从服务器端验证

回答

相关问题