0

我已经在我的数据库中插入了信息，并且我已经验证了它。但如果我点击插入它会重定向到另一个页面。我想在 AJAX 概念中完成此操作，请帮助我。提前致谢

HTML 编码

<form id="myform" action="bl/checkout_report.php?action=check_out" method="post" name="myform">
  <table width="200" border="0">
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <h3><u><b>Shipping Details</b></u></h3>
   <tr>
  <th scope="row"><label>Name*</label></th>
  <td><input id="fname" name="fname" type="text" class="shipping-required"></td>
</tr>
 <tr>
 <th scope="row"><label>Shipping Address*</label>;</th>
 <td><textarea name="address" id="address" class="shipping-required"></textarea></td>
 </tr>
 <tr>
<th scope="row"><label>Nearest Landmark*</label></th>
<td><textarea name="land" id="land" class="shipping-required"></textarea></td>
</tr>
 <tr>
<th scope="row"><label>City*</label></th>
<td><input id="city" name="city" type="text" class="shipping-required"></td>
 </tr>
 <tr>
 <th scope="row"><label>State*</label></th>
  <td><select id="state" name="state"> <option selected="" value="Default" class="shipping- required">(Please select a state)</option>  
 <option>Andhara Pradesh</option>
 <option>Assam</option>
 <option>Bihar</option>
 <option>Delhi</option>
 <option>Gujarat</option>
 <option>Tamil Nadu</option>
  </select></td> 
   </tr>
   <tr>
    <th scope="row"><label>Pin Code*</label></th>
   <td><input id="code" name="code" type="text" class="shipping-required"></td>
  </tr>
  <tr>
  <th scope="row"><label>Mobile Number*</label></th>
  <td><input id="mobile1" name="mobile1" type="text" class="shipping-required"></td>
   </tr>
  <tr>
   <th scope="row"> <label>Mail id</label></th>
   <td><input id="mail1" name="mail1" type="text" class="shipping-required"></td>
  </tr>
  <td><input type="hidden" id="pwd" name="pwd" value="<?php echo "$password"?>"></td> 
 <tr>
 <td><input id="submit" name="submit" type="submit" value=" Continue" onclick="return  formValidate()"></td>
  </tr>
 </table>
 </form>

JAVASCRIPT 验证函数

function formValidate() {
  alert("ok");
  var fname = document.myform.fname;
  var address = document.myform.address;
  var land = document.myform.land;
  var city = document.myform.city;
  var state = document.myform.state;
  var code = document.myform.code;
  var mobile1 = document.myform.mobile1;
  var mail1 = document.myform.mail1;
  if (item1(fname)) {
    if (idd(address)) {
      if (lad(land)) {
        if (place(city)) {
          if (native(state)) {
            if (pin(code)) {
              if (number(mobile1)) {
                if (id(mail1)) {
                  document.myform.submit();
                }
              }
            }
          }
        }
      }
    }
  }
  return false;
}

function item1(fname) {
  if (fname.value != "") {
    var letters = /^[A-Z a-z]+$/;
    if (fname.value.match(letters)) {
      return true;
    } else {
      alert('nbumber');
      fname.focus();
      return false;
    }
  } else {
    alert(' Name should not empty');
    fname.focus();
  }
}

function idd(address) {
  if (address.value != "") {
    var letters = /^[a-zA-Z0-9\s,'-]*$/;
    if (address.value.match(letters)) {
      return true;
    } else {
      alert('Enter Valid Address ');
      address.focus();
      return false;
    }
  } else {
    alert('Address should not empty');
    address.focus();
  }
}

function lad(land) {
  if (land.value != "") {
    var letters = /^[a-zA-Z0-9\s,'-]*$/;
    if (land.value.match(letters)) {
      return true;
    } else {
      alert('Enter Valid Land Mark ');
      land.focus();
      return false;
    }
  } else {
    alert('Land Mark should not empty');
    land.focus();
  }
}

function place(city) {
  if (city.value != "") {
    var letters = /^[A-Z a-z]+$/;
    if (city.value.match(letters)) {
      return true;
    } else {
      alert(" City Must have alphabet Charater Only");
      city.focus();
      return false;
    }
  } else {
    alert('city should not empty');
  }
}

function native(state) {
  if (state.value == "Default") {
    alert('Select your State from the list');
    state.focus();
    return false;
  } else {
    return true;
  }
}

function pin(code) {
  if (code.value != "") {
    var uadd_len = code.value.length;
    if (uadd_len == 6) {
      return true;
    } else {
      alert(" Pin Code Must Have six Numbers");
      code.focus();
      return false;
    }
  } else {
    alert('Pincode should not empty');
  }
}

function number(mobile1) {
  if (mobile1.value != "") {
    var uadd_len = mobile1.value.length;
    if (uadd_len == 10) {
      return true;
    } else {
      alert('Enter 10 Digit Mobile Number ');
      mobile1.focus();
      return false;
    }
  } else {
    alert('Mobile Number should not empty');
    mobile1.focus();
  }
}

function id(mail1) {
  if (mail1.value != "") {
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if (mail1.value.match(mailformat)) {
      return true;
    } else {
      alert('Invalid Mail Format ');
      mail.focus();
      return false;
    }
  } else {
    alert('Mail should not empty');
    mail1.focus();
  }
}
4

3 回答 3

1

您可以编写自己的 Ajax 脚本 XHR 创建对象或使用现有的库（如 jQuery）来简化您的工作

http://api.jquery.com/jQuery.post/

$("#foo").submit(function(event){
  var request = $.ajax({
    url: "/checkout_report.php",
    type: "post",
    data: serializedData
  });
});

检查 stackoverflow 中的现有 ex：jQuery Ajax POST example with PHP

于 2013-02-11T05:04:05.477 回答
1

您是否尝试过 jquery提交。

(function($)
{
    $('#form').submit(function()
    {
        //check for validation..
        return false;
    }); 
});

如果您不想使用 jQuery，那么您应该尝试http://www.simonerodriguez.com/ajax-form-submit-example/。

于 2013-02-11T05:00:50.793 回答
0

你可以用jquery form plugin这个。这个插件也可以帮助你上传文件。所以我认为它最适合你

这是此插件的文档http://malsup.com/jquery/form/

示例在这里http://malsup.com/jquery/form/#ajaxForm

您的函数formValidate非常复杂，请尝试以简单的方式为 egs 编写此代码：

function formValidate()
{ 
    alert("ok");
    var fname = document.myform.fname;
    var address = document.myform.address;
    var land = document.myform.land;
    var city = document.myform.city;
    var state = document.myform.state;
    var code = document.myform.code;
    var mobile1 = document.myform.mobile1;
    var mail1 = document.myform.mail1;
    var status=true; 
    if(!item1(fname)) 
    {  
        status=false;
    }
    if(!idd(address))
    {
        status=false;
    }
    if(!lad(land))
    {
        status=false;   
    }
    if(!place(city))
    {
        status=false;   
    }
    if(!native(state))
    {
        status=false;   
    }
    if(!pin(code))
    {
        status=false;
    }
    if(!number(mobile1))
    {
        status=false;
    }
    if(!id(mail1))
    {                          
        status=false;
    }
    //thinking all functions return true or false
    if(status)  
        document.myform.submit();
    return status;  
}
于 2013-02-11T05:02:42.693 回答