表单在集成后停止工作

时间:2015-12-14 16:23:56

标签: javascript jquery ajax forms

我有一个注册表单。我已经使用ajax验证了所有字段并使用javascript确认密码字段。 当我执行此页面时,它将停止执行,并且不显示剩余的表单和提交按钮。 它在集成之前完美运行。 执行页面时的表格: enter image description here

输入输入后: enter image description here

注册代码如下:

<!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 ?! &nbsp; 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>

0 个答案:

没有答案