javascript - AJAX Load and PHP Error -
i have created simple form submits data database.
i want use ajax when submit pressed, loading bar shows , takes success! page after few seconds. how go this?
also following code gives me following error, need fix - solved:
notice: undefined index: command in f:\xamppnew\htdocs\web\billing.php on line 5 code:
<?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 product database $sql = mysqli_query($link,"insert transactions values('','$item_id','$quantityorder','$carttotal','$name','$address','$email','$phone')"); die('thank you! 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 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> </td><td><input type="submit" value="place order" /></td></tr> </table> </div> </div> <?php include_once("template_footer.php");?> </form> </body> </html>
<!--================================== code "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 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> </td><td><input type="button" name="submit" value="place order" onclick="return validate()"/></td></tr> </table> </form> </div> </div> </div> </div> </body> </html> <!--================================== code "stack_ajax.php" end here ==================================--> <!--============================== code "ajax_response.php" start here ==============================--> <?php /* note : made changes in html form ( can add session variable ) , delete following lines 1. <?php include_once("template_header.php");?> 2. <?php include_once("template_footer.php");?> */ sleep(3); /* wait 3 seconds before executing below code, doing able see "ajax loader" on page. */ /* print_r($_post); // form input data in 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 product database $sql = mysqli_query( $link, "insert transactions values ('','$item_id','$quantityorder','$carttotal','$name','$address','$email','$phone')" ); if( $sql ) echo 1; /* when sql query execute successfully. */ else echo 0; /* when sql query not execute successfully. */ exit; ?> <!--============================== code "ajax_response.php" end here ==============================--> /* ================================== code "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 "external_css.css" end here ==================================*/ <!-- ============================= code "success_message.php" start here ============================= --> <?php echo 'thank you! order has been placed!'; ?> <!-- ============================= code "success_message.php" end here ============================= --> <!-- ============================= code "failed_message.php" start here ============================= --> <?php echo 'an error occurred, please try after time '; ?> <!-- ============================= code "failed_message.php" end here ============================= --> <!-- note : make sure directory structure must same below php_ajax ( create folder "php_ajax" , put code inside ) 1. css [ create folder "css" name ] a. external_css.css 2. image [create folder "image" name] a. ajax_loader.gif [ may download using internet :-) ] 3. jquery_src [ [create folder "jquery_src" name]] a. jquery-1.11.0.min.js [ jquery framework, may download using internet ] 4. ajax_response.php 5. failed_message.php 6. stack_ajax.php 7. success_message.php let me know if have problem after implementing this. put codes in separate files make debug task easy. -->
Comments
Post a Comment