Question

在此我必须这样做，当我可以点击保存按钮然后首先处理（等待）工作然后表单提交，并且还从服务器端验证表单所有验证都可以在服务器端工作

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';
}

?>

Answer 1

尝试以下代码。

<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';
}

?>

通过处理或等待提交表单与Ajax，并从服务器端验证

1 个答案: