2014-04-14 90 views
0

我創建了一個將數據提交給數據庫的簡單表單。AJAX加載和PHP錯誤

我想使用Ajax,以便按下提交時,加載欄顯示,然後將您帶到成功!幾秒鐘後的頁面。我如何去做這件事?

而且下面的代碼給我下面的錯誤,我需要做什麼來解決 - 解決

Notice: Undefined index: command in F:\xamppnew\htdocs\web\billing.php on line 5 

代碼:

<?php 
include "storescripts/connect_to_mysql.php"; 
session_start(); 

if ($_REQUEST['command']=='update'){ 
     $name=$_REQUEST['name']; 
     $email=$_REQUEST['email']; 
     $address=$_REQUEST['address']; 
     $phone=$_REQUEST['phone']; 
     $item_id = $_SESSION['item_id']; 
     $quantityorder = $each_item['quantity'] = $_SESSION['quantity1']; 
     $cartTotal = $_SESSION['cartTotal']; 

    // Add this product into the database now 
    $sql = mysqli_query($link,"insert into transactions values('','$item_id','$quantityorder','$cartTotal','$name','$address','$email','$phone')"); 

     die('Thank You! your order has been placed!'); 
    } 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" /> 
<title>Billing Info</title> 
<script language="javascript"> 
function isNumberKey(evt){ 
    var charCode = (evt.which) ? evt.which : event.keyCode 
    if (charCode > 31 && (charCode < 48 || charCode > 57)) 
     return false; 
    return true; 
} 
</script> 
<script language="javascript"> 
    function validate(){ 
     var f=document.form1; 
     if(f.name.value=='' || f.email.value=='' || f.address.value=='' || f.phone.value==''){ 
      alert('You have not filled in all fields'); 
      f.name.focus(); 
      return false; 
     } 
     f.command.value='update'; 
     f.submit(); 
    } 
</script> 
</head> 



<body> 
<div align="center" id="mainWrapper"> 
    <?php include_once("template_header.php");?> 
    <div id="pageContent"> 
    <div style="margin:24px; text-align:left;"> 

    <br /> 
<form name="form1" onsubmit="return validate()"> 
    <input type="hidden" name="command" /> 
    <div align="center"> 
     <h1 align="center">Billing Info</h1> 
     <table border="0" cellpadding="2px"> 
      <tr><td>Product ID:</td><td><?php echo $item_id = $_SESSION['item_id'];?></td></tr> 
      <tr><td>Total Quantity:</td><td><?php echo $each_item['quantity'] = $_SESSION['quantity1']; ?></td></tr> 
      <tr><td>Order Total:</td><td>£<?php echo $cartTotal = $_SESSION['cartTotal'];?></td></tr> 
      <tr><td>Your Name:</td><td><input type="text" name="name" /></td></tr> 
      <tr><td>Address:</td><td><input type="text" name="address" /></td></tr> 
      <tr><td>Email:</td><td><input type="text" name="email" /></td></tr> 
      <tr><td>Phone:</td><td><input type="text" name="phone" onkeypress='return isNumberKey(event)' /></td></tr> 
      <tr><td>&nbsp;</td><td><input type="submit" value="Place Order" /></td></tr> 
     </table> 
    </div> 
    </div> 


     <?php include_once("template_footer.php");?> 

</form> 
</body> 
</html> 

回答

0
<!--================================== code for "stack_ajax.php" start here ==================================--> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" type="text/css" href="css/external_css.css"> 
<script type="text/javascript" src="jquery_src/jquery-1.11.0.min.js"></script> 
<script type="text/javascript"> 
    function validate(){ 

    var f=document.form1; 
    if(f.name.value=='' || f.email.value=='' || f.address.value=='' || f.phone.value==''){ 
     alert('You have not filled in all fields'); 
     f.name.focus(); 
     return false; 
    } 

    f.command.value='update'; 

    postData = $("#form1").serializeArray(); 

    $.ajax({ 
     type  : "POST", 
     data  : postData, 
     dataType : "html", 
     url  : "ajax_response.php", 
     async  : true, 
     beforeSend : function() { 
         $("#ajax_image_div").show(); 
        }, 
     success : function(data, textStatus, xhr) { 
        ajax_response_status = parseInt(data, 10); 

        if(ajax_response_status) 
         window.location.href='success_message.php'; 
         else 
         window.location.href='failed_message.php'; 
        }, 
     error  : function(xhr, textStatus, errorThrown) { 
        alert(textStatus); 
        }, 
     complete : function(jqXHR, textStatus) { 
        $("#ajax_image_div").hide(); 
        } 
     }); 

    return true; 
    } 

    function isNumberKey(evt){ 
    var charCode = (evt.which) ? evt.which : evt.keyCode 
    if (charCode > 31 && (charCode < 48 || charCode > 57)) 
     return false; 

    return true; 
    } 
</script> 
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" /> 



</head> 

<title>Billing Info</title> 

<body> 

<div id='ajax_image_div' style="display:none;"> 
    <img id="ajax_loader_image" style="vertical-align:middle" src='image/ajax_loader.gif'> 
</div> 
<div align="center" id="mainWrapper"> 
    <div id="pageContent"> 
    <div style="margin:24px; text-align:left;"> 
     <br/> 
     <div align="center"> 
     <form id="form1" name="form1" method="POST" action="" autocomplete="off" enctype="multipart/form-data"> 
     <input type="hidden" name="command" /> 
      <h1 align="center">Billing Info</h1> 
      <table border="0" cellpadding="2px"> 
      <tr><td>Your Name:</td><td><input type="text" name="name" id="user_name" /></td></tr> 
      <tr><td>Address:</td><td><input type="text" name="address" /></td></tr> 
      <tr><td>Email:</td><td><input type="text" name="email" /></td></tr> 
      <tr><td>Phone:</td><td><input type="text" name="phone" onkeypress='return isNumberKey(event)' /></td></tr> 
      <tr><td>&nbsp;</td><td><input type="button" name="submit" value="Place Order" onClick="return validate()"/></td></tr> 
      </table> 
     </form> 
     </div> 
    </div> 
    </div> 
</div> 



</body> 
</html> 
<!--================================== code for "stack_ajax.php" end here ==================================--> 



<!--============================== code for "ajax_response.php" start here ==============================--> 
<?php 
    /* 
    Note : I made changes in your HTML form (You can add session variable by yourself) and delete following lines 
    1. <?php include_once("template_header.php");?> 
    2. <?php include_once("template_footer.php");?> 
    */ 

    sleep(3); /* Wait for 3 seconds before executing below code, by doing so 
       you will be able to see "AJAX LOADER" on the page. 
      */ 

/* print_r($_POST); // You will get all the FORM input data in this array. */ 

    $name   = $_REQUEST['name']; 
    $email   = $_REQUEST['email']; 
    $address  = $_REQUEST['address']; 
    $phone   = $_REQUEST['phone']; 
    $item_id  = $_SESSION['item_id']; 
    $quantityorder = $each_item['quantity'] = $_SESSION['quantity1']; 
    $cartTotal  = $_SESSION['cartTotal']; 

    // Add this product into the database now 
    $sql = mysqli_query(
         $link, 
          "insert 
           into 
           transactions 

           values 
           ('','$item_id','$quantityorder','$cartTotal','$name','$address','$email','$phone')" 
        ); 
    if($sql) 
    echo 1; /* When SQL query will execute successfully. */ 
     else 
     echo 0; /* When SQL query will not execute successfully. */ 
    exit; 
?> 
<!--============================== code for "ajax_response.php" end here ==============================--> 



/* ================================== code for "external_css.css" start here ==================================*/ 
#ajax_image_div { 
top:30%; 
left:30%; 
width:50%; 
height:50%; 
position:absolute; 
z-index:999; 
} 

#mainWrapper { 
width:100%; 
height:100%; 
position:absolute; 
} 

#ajax_loader_image { 
position:relative; 
top:35%; 
left:35%; 
} 

/* ================================== code for "external_css.css" end here ==================================*/ 



<!-- ============================= code for "success_message.php" start here ============================= --> 
<?php 
echo 'Thank You! your order has been placed!'; 
?> 
<!-- ============================= code for "success_message.php" end here ============================= --> 



<!-- ============================= code for "failed_message.php" start here ============================= --> 
<?php 
echo 'An error occurred, please try after some time '; 
?> 
<!-- ============================= code for "failed_message.php" end here ============================= --> 


<!-- 
Note : make sure your directory structure must be same as below 

php_ajax (create a folder with "php_ajax" and put all the code inside it) 
1. css [ create a folder with "css" name ] 
    A. external_css.css 
2. image [create a folder with "image" name] 
    A. ajax_loader.gif [ You may download it using internet :-) ] 
3. jquery_src [ [create a folder with "jquery_src" name]] 
    A. jquery-1.11.0.min.js [ jQuery framework, you may download it using internet ] 
4. ajax_response.php 
5. failed_message.php 
6. stack_ajax.php 
7. success_message.php 

Let me know if you have any problem after implementing this. I put all the codes in separate files to 
make DEBUG task very easy. 
--> 
+0

非常感謝parvesh這是一個很大的幫助,哈哈可能會困惑嘗試實現這一點,但現在就做! – user3411002

+0

正是我想要的,完美的謝謝你! – user3411002

+0

我很高興我可以幫助你:-) – mistertandon