表单未通过ajax提交


form not getting submitted through ajax

在这里,当所有验证都正确时,表单就会被提交。但对于单选按钮和选择按钮,验证没有正确进行,我只想验证几个字段,但只有在对所有字段进行验证时,表单才会提交。。。这是我的页面。。。

<form id="contact" name="contact" class="form-horizontal"  method="POST" action="">
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-4 control-label">NAME</label>
          <div class="col-sm-8">
            <input type="text" data-rule-required="true" class="form-control" name="name" id="name" >
          </div>
        </div>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-4 control-label">AGE</label>
          <div class="col-sm-8">
            <input type="text"  class="form-control" name="age" id="age">
          </div>
        </div>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-4 control-label">GENDER</label>
          <div class="col-sm-8">
            <label class="radio-inline">
              <input type="radio"  name="gender" id="inlineRadio1" value="male" class="required">
              Male </label>
            <label class="radio-inline">
              <input type="radio" name="gender" id="inlineRadio2" value="female">
              Female </label>
          </div>
       </div>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-4 control-label">OCCUPATION</label>
          <div class="col-sm-8">
            <input type="text"   class="form-control" name="occupation" id="occupation">
          </div>
        </div>
      <div class="form-group">
          <label for="inputEmail3" class="col-sm-4 control-label">AREA</label>
          <div class="col-sm-8">
            <select class="form-control required"  name="area">
              <option selected="selected"   value="" >Please Choose</option>
              <option value="A.Naranapura">A.Naranapura</option>
              <option value="Abshot Layout"> Abshot Layout</option>
              <option value="Adugodi"> Adugodi</option>
            </select>
          </div>
        </div>
     <div class="form-group">
          <div class="col-sm-offset-0 col-sm-8">
            <button id="send" class="btn btn-default fran">Submit</button>
          </div>
        </div>
      </form>

这是我的ajax。。

 <script type="text/javascript">
       function validateEmail(email) { 
          var reg = /^(([^<>()[']''.,;:'s@'"]+('.[^<>()[']''.,;:'s@'"]+)*)|('".+'"))@(('[[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'])|(([a-zA-Z'-0-9]+'.)+[a-zA-Z]{2,}))$/;
          return reg.test(email);
        }
        $(document).ready(function() {

          $("#contact").submit(function() { return false; });

          $("#send").on("click", function(){
            var emailval  = $("#email").val();
            var ageval    = $("#age").val();
            var nameval    = $("#name").val();
            var numval    = $("#contact-number").val();
            var genval    = $("#gender").val();
            var occuval    = $("#occupation").val();
            var areaval    = $("#area").val();
            var mailvalid = validateEmail(emailval);
            var namelen=nameval.length;
            var genlen=genval.length;
            var occculen=occupationval.length;
            var addresslen=addressval.length;
            var numlen=numval.length;
            var arealen=areaval.length;

            if(mailvalid == false) {
              $("#email").addClass("error");
            }
            else if(mailvalid == true){
              $("#email").removeClass("error");
            }
            if(namelen < 1) {
              $("#name").addClass("error");
            }
            else if(namelen >= 1){
              $("#name").removeClass("error");
            }
            if(genlen < 1) {
              $("#gender").addClass("error");
            }
            else if(genlen >= 1){
              $("#gender").removeClass("error");
            }
            if(addresslen < 1) {
              $("#address").addClass("error");
            }
            else if(addresslen >= 1){
              $("#address").removeClass("error");
            }
            if(occulen < 1) {
              $("#occupation").addClass("error");
            }
            else if(occulen >= 1){
              $("#occupation").removeClass("error");
            }
            if(numlen < 1) {
              $("#contact-number").addClass("error");
            }
            else if(numlen >= 1){
              $("#contact-number").removeClass("error");
            }
            if(arealen < 1) {
              $("#area").addClass("error");
            }
            else if(arealen >= 1){
              $("#area").removeClass("error");
            }

   if(mailvalid == true && namelen >=1 && genlen >= 1 && addresslen >= 1 && occulen >= 1 && numlen >= 1 && arealen >= 1 ) {
    // if both validate we attempt to send the e-mail
    // first we hide the submit btn so the user doesnt click twice
    $("#send").replaceWith("<em>sending...</em>");
    $.ajax({
      type: 'POST',
      url: 'sendfranchiseemessage.php',
      data: $("#contact").serialize(),
      success: function(data) {
        if(data == "true") {
         alert();
         $("#contact").fadeOut("fast", function(){
          $(this).before("<p><strong><h1>Success! Your feedback has been sent, thanks :)</h1></strong></p>");
          setTimeout("$.fancybox.close()", 1000);
        });
       }
     }
   });
  }
});
        });
      </script> 

如果路径正确,请尝试检查处理ajax的php的路径。另请参见下文。

  $.ajax({
  type: 'POST',
  url: 'sendfranchiseemessage.php',
  data: $("#contact").serialize(),
  success: function(data) {
    alert( data );
    if(data == "true") {
     alert();
     $("#contact").fadeOut("fast", function(){
      $(this).before("<p><strong><h1>Success! Your feedback has been sent, thanks :)</h1></strong></p>");
      setTimeout("$.fancybox.close()", 1000);
    });
   }
 }

当你点击表单上的提交时,看看它是否会提醒数据。