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

jquerysubmitを試しましたか。

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

jQueryを使用したくない場合は、http：//www.simonerodriguez.com/ajax-form-submit-example/を試してください。

于 2013-02-11T05:00:50.793 に答える
1

独自の Ajax スクリプト XHR Create オブジェクトを作成するか、jQuery などの既存のライブラリを使用して作業を容易にすることができます。

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

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

stackoverflow の既存の ex を確認してください: PHP を使用した jQuery Ajax POST の例

于 2013-02-11T05:04:05.477 に答える
0

これに使えますjquery form plugin。このプラグインは、ファイルのアップロードにも役立ちます。だから私はそれがあなたに最適だと思います

このプラグインのドキュメントは次のとおりですhttp://malsup.com/jquery/form/

そして例はここにありますhttp://malsup.com/jquery/form/#ajaxForm

あなたの関数formValidateは非常に複雑です。たとえば、これを簡単な方法で記述してみてください。

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 に答える