在这种情况下,我必须执行以下操作:当我可以单击“保存”按钮时,首先要进行处理(等待),然后进行表单提交,并且还要从服务器端验证表单,所有验证也可以从服务器端工作
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';
}
?>
请尝试以下代码。
<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");
}
});
}
});
}
插入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';
}
?>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句