Link to home
Start Free TrialLog in
Avatar of catonthecouchproductions
catonthecouchproductionsFlag for United States of America

asked on

Creating a type of confirmation page - jQuery?

I am wondering if it is possible to have a form, submit it, show all details before it is finally submitted like a confirmation page, but keep it on the same page? Or is it better practice to make a new page?

http://www.newspapersofamerica.com/new/index.php?p=calc

If you go there I have the form working, just need to fix styles, etc. I have tried googling methods tried pixel2life.com and others with no luck.

Thanks,

Ryan
<?php
 if($_POST){
  
  $fields = array("ad"=>"Ad Text", "fn"=>"First Name", "ln"=>"Last Name", "company"=>"Company Name", "email"=>"E-mail","phone"=>"Phone","date"=>"Starting Date","comments"=>"Comments");
 
$error_message = "<b>Please complete the following fields:</b> <br>";
$error         = 0;
 
foreach($fields  as $key=>$value){
	if(!isset($_POST[$key]) || empty($_POST[$key])){
		$error_message .= $value."<br>"; 
		$error = 1;
	}
}
if(empty($error)){
  
        $weeks    = $_REQUEST["weeks"];
        $ad       = $_REQUEST["ad"];
        $fn       = $_REQUEST["fn"];
        $ln       = $_REQUEST["ln"];
        $company  = $_REQUEST["company"];
        $email    = $_REQUEST["email"];
        $phone    = $_REQUEST["phone"];
        $date     = $_REQUEST["date"];
        $comments = $_REQUEST["comments"];
        
        $mininumGroupPrice = 15;
        $additionalPrice   = 0;
        $wordPriceGroup    = 1100; // price for say 15 words is $1100 every additonal word equals to below ($wordPrice)
        $wordPrice         = "15"; // price for every additonal word
 
                $tmp_ad = str_replace(array("\n","\r","\t"), array(" "," "," "), $ad);
                $tmp_ad = str_replace("  ", " ", $tmp_ad);
                $numwords = 0;
                $words_arr = explode(" ", $tmp_ad);
                foreach ($words_arr as $word){
                  if (strlen($word)>1){
                    $numwords++;
                  }
                }
 
                $additionalWords = $numwords - $mininumGroupPrice;
                
                if($additionalWords > 0){
                        $additionalPrice = $additionalWords * $wordPrice;
                }else{
                        // the words is not exceeding 15 words
                        $additionalPrice = 0;
                }
                //     $total = $numwords * $wordprice;
                $total = $wordPriceGroup + $additionalPrice;
               
                print "Word Count:" . $numwords ."<br />";
                print "Text:" . $ad ."<br />";
                print "Weeks to Run:" . $weeks ."<br />";
                print "Price:" . $total;  
  }  
}       
if(isset($error) && !empty($error)){
  print $error_message;
}
?>
 
<h3>Ad Text</h3>
<form name="calculate" action="index.php?p=calc" method="post" class="niceform" />
        <label for="weeks">Weeks to run ad:</label><br />
        <select name="weeks" id="weeks">
                <option value="1">1 week</option>
                <option value="2">2 weeks</option>
                <option value="3">3 weeks</option>
                <option value="4">4 weeks</option>
        </select><br />
        <p>$1110 - 15 words</p>
        <label for="ad">Ad Text:</label><br />
        <textarea name="ad" id="ad" rows="5" cols="20"></textarea><br />
        
        <label for="fn">First Name:</label><br />
        <input type="text" name="fn" id="fn" size="20" /><br />
        <label for="ln">Last Name:</label><br />
        <input type="text" name="ln" id="ln" size="20" /><br />
        <label for="company">Company Name:</label><br />
        <input type="text" name="company" id="company" size="20" /><br />
        <label for="email">E-mail:</label><br />
        <input type="text" name="email" id="email" size="20" /><br />
        <label for="phone">Phone:</label><br />
        <input type="text" name="phone" id="phone" size="20" /><br />
        <label for="date">Starting Date:</label><br />
        <input type="text" name="date" id="date" size="20" /><br />
        <label for="comments">Comments:</label><br />
        <textarea name="comments" id="comments" rows="5" cols="20"></textarea><br />
        
        <input type="submit" name="submit" value="Calculate!" />
</form>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Jason Minton
Jason Minton
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of catonthecouchproductions

ASKER

Yeah...that sounds correect. I am lost on how to do that? Why have another form with the hidden? Why not just show what they typed, then submit?
well, if you want to show what they typed inside of form boxes, that is fine, but isn't that what they just saw after they typed it?

If you want to display to them what they submitted as just plane text, you can't submit that.  So you would display it to them in plane text, but then behind the scenes print your <form> </form> and inside the form, print an input type=hidden name="same as original form" value="whatever they typed" and then just have your submit value="click to confirm" button.

Hope this heps.
Thats what I was thinking setting it up as printing them in plain text on the page, then a back button to return to edit fields, etc.

Does that work? Would that still use hidden form fields? Make a step thing on the same page, instead of creating another page, or is it better practice to do that?
To save yourself from writting extra code to repopulate the form fields with a back button, just tell them to use their browser's back button to go back if they need to edit.

True..and the fields will still be loaded? Do you know how I would do that? After hitting submit to review say..bring them to display there fields?
If they hit the back button in the browser the fields will still be loaded.

Otherwise, you would have the click a link and you would have to post the field values from the hidden form fields back to the previous page, read them and re-display the form fields with the values from the hidden fields populated into the form text boxes.

Or you could have a javascript button that does a browser.back operation (same as if they click the back button).
True...thats alot of extra work. Any idea how I would make them display after click the button? For a confirmation? On the same page.
You could just have a javascript window pop up showing them what they typed in the boxes and then they can click something like YES or NO if they agree.  If they click YES you go ahead and submit the form, if they click NO you cancel and they can then make changes.

<form onsubmit="return verifyInput();">

verifyInput will be a javascript function to display results and a button to click and so if they click YES the function will return TRUE and if they click NO return false.
I thought of that and told the client, thats what i thought. But then I dont want to deal with popups, and wanted to go wth showing the content on the page.

Ryan
You could use a <div> and modify the innerHTML property of it with Javascript to display it on the page without displaying a popup.

So have a blank div where you want to display it:
<div id="confirm"></div>

Then onsubmit call a function that will do something like:

function confirm()
{
    var confirmtxt;
    confirmtxt += 'name: ' + document.form.name.value + '<br />';
    confirmtxt += 'address:' + document.form.address.value + '<br />';

    var el = document.getElementById('confirm');
    el.innerHTML = confirmtxt;
}
That would be a good idea..is it possible to show up just that on a page? How would I implement that?
well, that is a javascript question and to get the best answer from qualified javascript experts, you'll want to post that in the javascript zone.
Could you give me a PHP verfsion, I think I want to go down that road, and have it display.
Do you mean where you submit it and it displays the results on a new page and uses a hidden form with hidden fields and then to confirm it they have to click submit again to submit the hidden form?
Yeah..a confirmation page before submit.

Ryan
All you have to do for that is when the user clicks submit the first time, whatever page you are posting the data to, just get the variables and print them for the user to see.  Somewhere below that you have your form, with your <input type="hidden" name="someName" value="whatever the value"> for each field from the previous form, then you show another submit button that submits the data to the script that will do whatever it is you need to do with it.
So make a new page and use GET to get all values correct? Display them style them however, etc.

Then make a form and ALL values are hidden correct?

Ryan
well, you'd probably use POST instead of GET since you aren't passing anything throught the URL, but yes, that is basically it.
Well use GET on the confirm page to recieve them?
Like this so far for confirm.php
<?php
 
        $weeks    = $_GET["weeks"];
        $ad       = $_GET["ad"];
        $fn       = $_GET["fn"];
        $ln       = $_GET["ln"];
        $company  = $_GET["company"];
        $email    = $_GET["email"];
        $phone    = $_GET["phone"];
        $date     = $_GET["date"];
        $comments = $_GET["comments"];
        
        
        print '
        		<h2>Confirm Details</h2>
        		
        		<label>Number of weeks to run ad
        
        '
 
?>

Open in new window

Unless you are passing the values to this confirm page through the url you need to use _POST to get the values into your variables.
So on my calc.php my form action is POST to confirm.php and for my variables I use POST? Not GET like I have above?
The words POST and GET don't mean anything...  POST just means you submitted the varibles from a form and GET means you submitted them through the URL.

So you need to do:
$weeks    = $_POST["weeks"];

Because you used method=POST so this is a POST variable not a GET varible.
I see now! I got it, thanks for your help!
<?php
 
        $weeks    = $_POST["weeks"];
        $ad       = $_POST["ad"];
        $fn       = $_POST["fn"];
        $ln       = $_POST["ln"];
        $company  = $_POST["company"];
        $email    = $_POST["email"];
        $phone    = $_POST["phone"];
        $date     = $_POST["date"];
        $comments = $_POST["comments"];
        $mininumGroupPrice = 15;
        $additionalPrice   = 0;
        $wordPriceGroup    = 1100; // price for say 15 words is $1100 every additonal word equals to below ($wordPrice)
        $wordPrice         = "15"; // price for every additonal word
 
                $tmp_ad = str_replace(array("\n","\r","\t"), array(" "," "," "), $ad);
                $tmp_ad = str_replace("  ", " ", $tmp_ad);
                $numwords = 0;
                $words_arr = explode(" ", $tmp_ad);
                foreach ($words_arr as $word){
                  if (strlen($word)>1){
                    $numwords++;
                  }
                }
 
                $additionalWords = $numwords - $mininumGroupPrice;
                
                if($additionalWords > 0){
                        $additionalPrice = $additionalWords * $wordPrice;
                }else{
                        // the words is not exceeding 15 words
                        $additionalPrice = 0;
                }
                //     $total = $numwords * $wordprice;
                $total = $wordPriceGroup + $additionalPrice;
 
        print "
        		<h2>Confirm Details</h2>
        		
        		<span class=\"confirm\">Number of weeks to run ad:</span> $weeks week(s)<br />
                <span class=\"confirm\">Ad Text:</span> $ad<br />
                <span class=\"confirm\">First Name:</span> $fn<br />
                <span class=\"confirm\">Last Name:</span> $ln<br />
                <span class=\"confirm\">Company:</span> $company<br />
                <span class=\"confirm\">E-mail:</span> $email<br />
                <span class=\"confirm\">Phone:</span> $phone<br />
                <span class=\"confirm\">Date:</span> $date<br />
                <span class=\"confirm\">Comments:</span> <span class=\"confirm-text\">$comments</span><br />
                <span class=\"confirm\">Word Count:</span> $numwords<br />
                <span class=\"confirm\">Price:</span> $total<br />
              ";
              
		print "
				<form name=\"calc\"/>
				<input type=\"hidden\" name=\"weeks\" value=\"$weeks\" />
				<input type=\"hidden\" name=\"ad\" value=\"$ad\" />
				<input type=\"hidden\" name=\"fn\" value=\"$fn\" />
				<input type=\"hidden\" name=\"ln\" value=\"$ln\" />
				<input type=\"hidden\" name=\"company\" value=\"$company\" />
				<input type=\"hidden\" name=\"email\" value=\"$email\" />
				<input type=\"hidden\" name=\"phone\" value=\"$phone\" />
				<input type=\"hidden\" name=\"date\" value=\"$date\" />
				<input type=\"hidden\" name=\"numwords\" value=\"$numwords\" />
				<input type=\"hidden\" name=\"total\" value=\"$total\" />
				</form>
			  ";
 
 
?>

Open in new window

You're welcome!