用ajax验证表单

时间:2018-01-24 11:08:10

标签: javascript php jquery ajax

我有一个表单,想通过ajax提交和验证数据。我试过但它不起作用。当我点击按钮时,按钮不起作用,输入中也需要按钮。

index.php是:

<div id="sectionB" class="tab-pane fade">
          <div class="col-md-10 col-md-offset-1">
        <div class="innter-form">
        <form class="sa-innate-form" method="post" action="" autocomplete="off">
            <div class="row">

        <div class="col-md-6">
        <label>Email Address</label>
        <input type="email" name="email1" id="email1" required>
        <span class="email1_val validation"></span>
         </div>
        <div class="col-md-6">
        <label>Contact</label>
        <input type="number" name="mob1" id="mob1" required  maxlength="10">
        <span class="mob1_val validation"></span>
        <input type="checkbox" name="user_agree" >&nbsp;<i>"By clicking Join now, you agree to Healthcrum's User Agreement, Privacy Policy, and Cookie Policy."</i>
         &nbsp;&nbsp;<input type="button" value="Join now" name="register" /><span class="loading"></span> </div>
         </div></form>
         </div></div></div>

脚本是:从这里,ajax会将变量发送到另一个页面。并收到请求。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> <!--- include the live jquery library -->

<script>
jQuery(function($) {
var val_holder;
$("form input[name='register']").click(function() { // triggred click
    /************** form validation **************/
    val_holder      = 0;
    var mob1       = jQuery.trim($("form input[name='mob1']").val()); // first name field

    var email       = jQuery.trim($("form input[name='email1']").val()); // email field
    var email_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; // reg ex email check

    if(val_holder == 1) {
        return false;
    }
    val_holder = 0;
    /************** form validation end **************/
    /************** start: email exist function and etc. **************/
    $("span.loading").html("<img src='images/ajax_fb_loader.gif'>");
    $("span.validation").html("");
    var datastring = '&mob1='+ mob1 +'&email='+ email; // get data in the form manual
    //var datastring = $('form#mainform').serialize(); // or use serialize
    $.ajax({
                type: "POST", // type
                url: "xyz.php", // request file the 'check_email.php'
                data: datastring, // post the data
                success: function(responseText) { // get the response
                    if(responseText == 1) { // if the response is 1
                        $("span.email1_val").html("<img src='images/invalid.png'> Email is already exist.");
                        $("span.loading").html("");
                    }

                    else { // else blank response
                        $("span.loading").html(responseText);
                        }
                    }
                } // end success
    }); // ajax end
    /************** end: email exist function and etc. **************/
}); // click end
}); // jquery end

 </script>

xyz.php是:这里,变量存储在会话中并与表匹配。如果存在,则会显示一条消息。否则它会进入另一页。

<?php
require_once("connection.php"); // require the db connection
/* catch the post data from ajax */
$_SESSION["email1"]=$_POST['email'];
$_SESSION["mob1"]=$_POST['mob1'];
$email1=$_SESSION["email1"];

$query=mysql_query("select * from user_table") or die(mysql_error());
while($row=mysql_fetch_array($query))
{

if($email1==$row['email1'])
{
echo '1';
}

else { // else not, insert to the table

    echo "<script type='text/javascript'>window.location.href='submitcode.php' </script>";

    }                   
 }
  ?>

0 个答案:

没有答案
相关问题