我有一个注册表单。我已经使用ajax验证了所有字段并使用javascript确认密码字段。 当我执行此页面时,它将停止执行,并且不显示剩余的表单和提交按钮。 它在集成之前完美运行。 执行页面时的表格:
注册代码如下:
<!DOCTYPE html>
<html lang="en">
<body>
<header id="header"><!--header-->
<div class="header_top"><!--header_top-->
<div class="container">
<div class="row">
<div class="social-icons pull-right">
<ul class="nav navbar-nav">
<li><a href=""><i class="fa fa-facebook"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
<li><a href=""><i class="fa fa-linkedin"></i></a></li>
<li><a href=""><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div><!--/header_top-->
<div class="header-middle"><!--header-middle-->
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="logo pull-left">
<ul>
<li><a href="index.php"><img src="images/home/logo.png" alt="" /></a></li>
<li><b>ShareMyBook</b></li>
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="shop-menu pull-right">
<ul class="nav navbar-nav">
<li><a href=""><i class="fa fa-user"></i> Account</a></li>
<li><a href=""><i class="fa fa-star"></i> Wishlist</a></li>
<li><a href="cart.php"><i class="fa fa-shopping-cart"></i> Cart</a></li>
<li><a href="login.html" class="active"><i class="fa fa-lock"></i> Login</a></li>
</ul>
</div>
</div>
</div>
</div>
</div><!--/header-middle-->
<div class="header-bottom"><!--header-bottom-->
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="mainmenu pull-left">
<ul class="nav navbar-nav collapse navbar-collapse">
<li><a href="index.php" class="active">Home</a></li>
<li class="dropdown"><a href="#">Purchase Books<i class="fa fa-angle-down"></i></a>
<ul role="menu" class="sub-menu">
<li><a href="shop.php">New Books</a> </li>
<li><a href="product-details.php">Second Hand Books</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">E-books<i class="fa fa-angle-down"></i></a>
<ul role="menu" class="sub-menu">
<li><a href="Ebook-details.php">Upcoming Books</a></li>
<li><a href="availableEbook.php">Available Books</a></li>
</ul>
</li>
<li><a href="registerpg.php">Sell Old Books</a></li>
<li><a href="contact-us.php">Contact US</a></li>
</ul>
</div>
</div>
<div class="col-sm-3">
<div class="search_box pull-right">
<input type="text" placeholder="Search"/>
</div>
</div>
</div>
</div>
</div><!--/header-bottom-->
</header><!--/header-->
<section id="form"><!--form-->
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<div class="login-form"><!--login form-->
<h2>Login! To your account</h2>
<form>
<h3>Enter Email-id</h3><input type="email" placeholder="Email address" id="txtMail_login" name="txtMail_login"/>
<h3>Enter Password</h3><input type="password" placeholder="Password" id="txtPass_login" name="txtPass_login"/>
<br><div id="err"></div>
<span>
<a href="#">Forgot Password ?</a>
</span>
<button type="button" class="btn btn-default" id="LoginBtn" value="Login" onclick="check()">Login</button>
</form>
</div><!--/login form-->
</div>
<div class="col-sm-1">
<h2 id="or"> OR </h2>
</div>
<div class="col-sm-4">
<div class="signup-form"><!--sign up form-->
<h2>New User ?! Signup!</h2>
<form name="SignUpForm" method="POST" action="function_customer.php?val=insert">
<h3>First Name:</h3>
<input type="text" placeholder="First Name" name=txtfname id="txtfname" onchange="validate(this);" valid=false>
<div id="errfname"/>
<h3>Last Name:</h3>
<input type="text" placeholder="Last Name" name=txtlname id="txtlname" onchange="validate(this);" valid=false>
<div id="errlname"/>
<h3>Postal Address:</h3>
<input type="text" placeholder="Address" name="txtaddress" id="txtaddress" onchange="validate(this);" valid=false/>
<div id="erraddress"/>
<h3>Contact:</h3>
<input type="text" placeholder="Contact" name="txtnumber" id="txtnumber" onchange="validate(this);" valid=false/>
<div id="errnumber"/>
<h3>Gender:</h3>
<select name="gender" id="gender">
<option value="Male" id="m">Male</option>
<option value="Female" id="f">Female</option>
</select>
<h3>City:</h3>
<select name="txtcity" id="txtcity">
<option> City </option>
<option value="Vadodara"> Vadodara </option>
<option value="Ahmedabad"> Ahmedabad </option>
<option value="Surat"> Surat </option>
<option value="Rajkot"> Rajkot </option>
<option value="Bhavnagar">Bhavnagar</option>
<option value="Jamnagar">Jamnagar</option>
<option value="Nadidad">Nadidad</option>
<option value="Morvi">Morvi</option>
<option value="Gandhidham">Gandhidham</option>
<option value="Adipur">Adipur</option>
<option value="Anand">Anand</option>
<option value="Baruch">Baruch</option>
<option value="Godhra">Godhra</option>
<option value="Veraval">Veraval</option>
<option value="Navsari">Navsari</option>
</select>
<h3>Zip Code:</h3>
<input type="text" placeholder="Zip Code" name=txtzip id="txtzip" onchange="validate(this);" valid=false/><div id="errzip"/>
<h3>Email-ID:</h3><input type="email" placeholder="Email Address" name=txtmail id="txtmail" onchange="validate(this);" valid=false/>
<div id="errmail"/>
<h3>Enter Password:</h3><input type="password" placeholder="Password" name="txtpswd" id="txtpswd" onchange="validate(this);" valid=false/>
<div id="errpswd"/>
<h3>ReEnter Password:</h3><input type="password" placeholder="Confirm Password" name=txtConfirmpassword id="txtConfirmpassword" onchange="password();" valid=false/>
<div id="errConfirmpassword"/>
<h3>Security Question:</h3>
<select name="question" id="question">
<option value="Select your Security Question">Select your Security Question</option>
<option value="What is the last name of the teacher who gave you your first failing grade?">What is the last name of the teacher who gave you your first failing grade?</option>
<option value="In what city or town does your nearest sibling live?">In what city or town does your nearest sibling live?</option>
<option value="What time of the day were you born? (hh:mm)">What time of the day were you born? (hh:mm)</option>
<option value="In what year was your father born?">In what year was your father born?</option>
</select>
<h3>Your Answer:</h3><input type="text" placeholder="Write Your Answer here" id="txtAnswer" name="txtAnswer"/>
<div id="errAnswer"/>
<input type=submit name=btnSubmit value=Submit disabled="true" id="btnSubmit" class="btn btn-default"/>
</form>
</div><!--/sign up form-->
</div>
</div>
</div>
</section><!--/form-->
<footer id="footer"><!--Footer-->
<div class="footer-bottom">
<div class="container">
<p class="pull-left">
<ul>
<li><img src="images/vbd.png"/></li>
<li>Copyright © 2015 Vidyarthi Book Depot </li>
</ul>
</p>
</div>
</div>
</footer><!--/Footer-->
<script src="js/jquery.js"></script>
<script src="js/jquery.scrollUp.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/main.js"></script>
<script language="javascript">
var flag = false;
function validate(element)
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new Activexobject("Microsoft.XMLHTTP");
}
var myField = element;
xmlhttp.open('GET', 'validate.php?' + myField.id + "=" + myField.value, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function ()
{
//alert("Hello");
if (xmlhttp.readyState === 4 && xmlhttp.status === 200)
{
var response = xmlhttp.responseText.split("||");
alert("H2");
}
var divname = "err" + myField.id.substring(3);
var mydiv = document.getElementById(divname);
if (!eval(response[0]))
{
alert("Fail");
//alert("Value: "+response);
mydiv.innerHTML = response[1];
myField.valid = false;
}
else
{
alert("Success");
myField.valid = true;
mydiv.innerHTML = "";
}
var btn = document.getElementById("btnSubmit");
btn.disabled = !isValidForm();
}
};
function password()
{
var btn = document.getElementById("btnSubmit");
var pass = document.getElementById("txtpswd").value;
var confirm_pass = document.getElementById("txtConfirmpassword").value;
var pwdErrorElement = document.getElementById("errConfirmpassword");
if (pass === confirm_pass) {
flag = true;
pwdErrorElement.innerHTML = " ";
btn.disabled = !isValidForm();
} else {
flag = false;
pwdErrorElement.innerHTML = "Password does not Match";
btn.disabled = true;
}
}
;
function isValidForm()
{
var f1 = document.getElementById("txtfname");
var f2 = document.getElementById("txtlname");
var f3 = document.getElementById("txtaddress");
var f4 = document.getElementById("txtzip");
var f5 = document.getElementById("txtnumber");
var f6 = document.getElementById("txtmail");
var f7 = document.getElementById("txtpswd");
var f8 = document.getElementById("txtConfirmpassword");
var f9 = document.getElementById("txtAnswer");
return(f1.value && f2.value && f3.value && f4.value && f5.value && f6.value && f7.value && f8.value && f9.value);
}
;
function check()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest()
}
else
{
xmlhttp = new Activexobject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("err").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "login_check.php", true)
var email = document.getElementById("txtMail_login").value;
var pass = document.getElementById("txtPass_login").value;
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("email=" + email + "&pass=" + pass);
}
</script>
</body>
</html>