Page 1 of 1

displayin forms and undisplayin forms

Posted: Wed Sep 14, 2011 10:31 am
by boiy
i have a plm
i am writin this order application whr pple can order, i want people to place thr order and when it goes into the database, i want the order recipt/confirmation to display on the same page where the form is.. and the form should dissappear with out sendin it to another page, all must be done in one page


i can paste my code is you want

Re: displayin forms and undisplayin forms

Posted: Wed Sep 14, 2011 11:18 am
by Celauran
What's your question, exactly? Where are you running into problems?

Re: displayin forms and undisplayin forms

Posted: Wed Sep 14, 2011 11:45 am
by phazorRise
i guess you don't want to leave the page.
so you need Ajax to do this stuff. You can either use javascript or other javascript libraries like jQuery (my fav) or mootools.
With Ajax you can request another php page/script to perform some operations, catch it's response and report it to user. In your case, order should be go into database( i.e request ) and display receipt/confirmation ( i.e response) on that very page.

Re: displayin forms and undisplayin forms

Posted: Wed Sep 14, 2011 11:53 am
by boiy
yup... i dont want to leave the page atall

but i am not too good with jquery or javascript, i had a feeling it would work with it, i want all the data in and out of the same page, more like passing a variable to the url and using $_get to call it, thru links, but this time there is no link i just want the form beneath my php to disappear


will paste the code

Code: Select all

<?php 
			if (isset($_REQUEST['submit'])) {
			$errors = array();

			/*$required_fields = array('name', 'organization', 'phone', 'address');
			$errors = array_merge($errors, check_required_fields($required_fields));*/
			
		if (empty($errors)) {
				$date = strftime("%Y-%m-%d %H:%M:%S", time());
				$fullname = trim(strip_tags($_POST['fullname']));
				$organization = trim(strip_tags($_POST['organization']));
				$phone = trim(strip_tags($_POST['phone']));
				$address = trim(strip_tags($_POST['address']));
				$edition = $_POST['edition'];
				$custom = $_POST['custom'];
				$qty = trim(strip_tags($_POST['qty']));
				$body = trim(strip_tags($_POST['add_body']));
														
$orders = "INSERT INTO sample.order(date, fullname, organization, phone, address, edition, type, quantity, enquiry)
		VALUES('$date','$fullname','$organization','$phone','$address', '$edition','$custom','$qty','$body')";
				
			$order = mysql_query($orders);
			if(!$order){
				echo "Order was not placed<br/>";
				die('Error: ' . mysql_error());
			}else{
				echo "Order has Been placed<br/>";
				if(isset($_REQUEST['order'])){
					echo "Order Notice";
					echo "<hr/>";
						}
				}
				}
			} // end: if (isset($_POST['submit']))
?>
<?php 
 /*$form = "<h1> This is a test page</h1>";
 echo $form;
 echo strip_tags($form). "<br/>";
 echo htmlentities($form);*/
 ?>
 <form action="html.php?order=placed" method="post">
    <table width="95%" border="0" cellspacing="0" cellpadding="2">
  <tr>
  <td width="29%" class="pText">FullName:</td>
    <td width="71%" align="left"><input name="fullname" type="text" class="inputText" /></td>
   </tr>
   <tr>
  <td width="29%" class="pText">School/College/Organization:</td>
    <td width="71%" align="left"><input name="organization" type="text" class="inputText" /></td>
   </tr>
   <tr>
  <td width="29%" class="pText">Direct Active Phone:</td>
    <td width="71%" align="left"><input name="phone" type="text" class="inputText" /></td>
   </tr>
   <tr>
  <td width="29%" class="pText">Delivery Address:</td>
    <td width="71%" align="left"><input name="address" type="text" class="inputText" /></td>
   </tr>
   <tr>
  <td width="29%" class="pText">Edition:</td>
    <td width="71%" align="left"><p>
      <label>
        <input type="radio" name="edition" value="standard" id="edition_0" checked="checked"/>
        Standard</label>
      <br />
      <label>
        <input type="radio" name="edition" value="classroom" id="edition_1" />
        Classroom</label>
      <br />
      <label>
        <input type="radio" name="edition" value="classic" id="edition_2" />
        Classic</label>
      <br />
    </p></td>
   </tr>
   <tr>
  <td width="29%" class="pText">Type:</td>
    <td width="71%" align="left"><p>
      <label>
        <input type="radio" name="custom" value="customized" id="custom_0" checked="checked"/>
        Customized</label>
      <br />
      <label>
        <input type="radio" name="custom" value="uncustomized" id="custom_1" />
        Non-Customized</label>
      <br />
    </p></td>
   </tr>
   <tr>
  <td width="29%" class="pText">Quantity Required:</td>
    <td width="71%" align="left"><input name="qty" type="text" class="inputText" /></td>
   </tr>
   <tr>
  <td width="29%" class="pText">Additional Order Enquiry:</td>
    <td width="71%" align="left"><textarea name="add_body" cols="40" rows="10"></textarea></td>
   </tr>
     <tr>
    <td></td>
    <td><input name="submit" type="submit" value="Place Order !!!" class="nameTxt"/></td>
   </tr>
   <tr>
   <td>
    </td>
   </tr>
</table>

so after it echos "order placed, i dont want to see the form beneath it, without creating another php page

Re: displayin forms and undisplayin forms

Posted: Wed Sep 14, 2011 12:12 pm
by phazorRise
Ohkay, here's something you can try out- ( i used jQuery library for Ajax purpose.)

process.php

Code: Select all

<?php
$date = strftime("%Y-%m-%d %H:%M:%S", time());
                                $fullname = trim(strip_tags($_POST['fullname']));
                                $organization = trim(strip_tags($_POST['organization']));
                                $phone = trim(strip_tags($_POST['phone']));
                                $address = trim(strip_tags($_POST['address']));
                                $edition = $_POST['edition'];
                                $custom = $_POST['custom'];
                                $qty = trim(strip_tags($_POST['qty']));
                                $body = trim(strip_tags($_POST['add_body']));
                                                                                                                
$orders = "INSERT INTO sample.order(date, fullname, organization, phone, address, edition, type, quantity, enquiry)
                VALUES('$date','$fullname','$organization','$phone','$address', '$edition','$custom','$qty','$body')";
                                
                        $order = mysql_query($orders);
                        if(!$order){
                                echo "Order was not placed<br/>";
                                die('Error: ' . mysql_error());
                        }else{
                                echo "Order has Been placed<br/>";
                                if(isset($_REQUEST['order'])){
                                        echo "Order Notice";
                                        echo "<hr/>";
                                                }
                                }
                                }
                        } // end: if (isset($_POST['submit']))
?>
and your form be the-

Code: Select all

<form action="process.php" method="post" id="order_form"> <!-- added id attribute to identify form uniquely. and i've no idea what "action="html.php?order=placed" thing do ? Does it really do anything at all ?  " -->
    <table width="95%" border="0" cellspacing="0" cellpadding="2">
  <tr>
  <td width="29%" class="pText">FullName:</td>
    <td width="71%" align="left"><input name="fullname" type="text" class="inputText" /></td>
   </tr>
   <tr>
  <td width="29%" class="pText">School/College/Organization:</td>
    <td width="71%" align="left"><input name="organization" type="text" class="inputText" /></td>
   </tr>
   <tr>
  <td width="29%" class="pText">Direct Active Phone:</td>
    <td width="71%" align="left"><input name="phone" type="text" class="inputText" /></td>
   </tr>
   <tr>
  <td width="29%" class="pText">Delivery Address:</td>
    <td width="71%" align="left"><input name="address" type="text" class="inputText" /></td>
   </tr>
   <tr>
  <td width="29%" class="pText">Edition:</td>
    <td width="71%" align="left"><p>
      <label>
        <input type="radio" name="edition" value="standard" id="edition_0" checked="checked"/>
        Standard</label>
      <br />
      <label>
        <input type="radio" name="edition" value="classroom" id="edition_1" />
        Classroom</label>
      <br />
      <label>
        <input type="radio" name="edition" value="classic" id="edition_2" />
        Classic</label>
      <br />
    </p></td>
   </tr>
   <tr>
  <td width="29%" class="pText">Type:</td>
    <td width="71%" align="left"><p>
      <label>
        <input type="radio" name="custom" value="customized" id="custom_0" checked="checked"/>
        Customized</label>
      <br />
      <label>
        <input type="radio" name="custom" value="uncustomized" id="custom_1" />
        Non-Customized</label>
      <br />
    </p></td>
   </tr>
   <tr>
  <td width="29%" class="pText">Quantity Required:</td>
    <td width="71%" align="left"><input name="qty" type="text" class="inputText" /></td>
   </tr>
   <tr>
  <td width="29%" class="pText">Additional Order Enquiry:</td>
    <td width="71%" align="left"><textarea name="add_body" cols="40" rows="10"></textarea></td>
   </tr>
     <tr>
    <td></td>
    <td><input name="submit" type="submit" value="Place Order !!!" class="nameTxt"/></td>
   </tr>
   <tr>
   <td>
    </td>
   </tr>
</table>

and here's jQuery to be include on same page -

Code: Select all

$(function(){
$("#order_form").submit(function(){
 var dataString=$(this).serialize();
$.ajax({  
  type: "POST",  
  url: "process.php",  
  data: dataString,  
  success: function(msg) {  
    $("#oder_form").replace("<div>"+msg+"</div>"); // display message back to user. Either error or success message. Whichever script echo's first in   //process.php script     
  }  
});  


});

});
Try this example if it works. I didn't tested it.
And only tip, use POST method for passing information collected from form no matter you are using either Ajax or pure php.
Let me know if you encountered an error.

Re: displayin forms and undisplayin forms

Posted: Wed Sep 14, 2011 12:36 pm
by boiy
well thot it will change as the variable in the order changes, more like links.... will try out the javascript code now

Re: displayin forms and undisplayin forms

Posted: Wed Sep 14, 2011 12:40 pm
by boiy
well ... tried it with the javascript you gave me, and it still doing the same thing, it still displays the form beneath it...

Re: displayin forms and undisplayin forms

Posted: Wed Sep 14, 2011 12:52 pm
by phazorRise
have you included jQuery library before the javascript i mentioned? Write following line in your file -

Code: Select all

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
to check if jQuery is successfully running put -
[text]alert("jQuery's is included");[/text] immediately after [text]$(function(){[/text] line.

Re: displayin forms and undisplayin forms

Posted: Wed Sep 14, 2011 12:57 pm
by phazorRise
simply follow jQuery Ajax Tut link. and see demo how it works.

Re: displayin forms and undisplayin forms

Posted: Wed Sep 14, 2011 3:24 pm
by boiy
well... still didnt work... may be u shld pls try it urself then tell me wat u got... thanks for tryin

Re: displayin forms and undisplayin forms

Posted: Thu Sep 15, 2011 7:06 am
by phazorRise
ohkay, here's code that do the job. Put this code inside <HEAD> section.

Code: Select all

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#order_form").submit(function(){
 var dataString=$(this).serialize();
$.ajax({  
  type: "POST",  
  url: "process.php",  
  data: dataString,  
  success: function(msg) {  
    $("#order_form").replaceWith("<div>"+msg+"</div>"); // display message back to user. Either error or success message. Whichever script echo's first in   //process.php script     
	
  }  
});  

event.preventDefault();
});

});
</script>