Post Form Contents in Another Tab With Image Submit Button

Report · Aug 05, 2011

I'm using DW Spry tabs to create an order form. What I would like to have is after user clicks on 'Review & Complete' button all of their chose information will post on the fourth tab.

Problem #1: Information is not posting to the fourth tab after 'Review & Complete' button is clicked. Why?

Code:

<form id="order" name="order" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Choose A Plan</li>
<li class="TabbedPanelsTab" tabindex="0">Website Add-Ons</li>
<li class="TabbedPanelsTab modif" tabindex="0">Premium Upgrades</li>
<li class="TabbedPanelsTab modif" tabindex="0">Review & Complete</li>
</ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
<table width="875" border="0" cellpadding="1" cellspacing="1" class="select-plan-table">
  <tr>
    <td class="plans-price"> <span class="price-big"><input value="39.99" title="" class="radio" id="WebsitePkg1" name="WebPkg" type="radio" />$39</span><span class="small-price">.99/mo</span></td>
  <td class="plans-price"><span class="price-big"><input value="79.99" title="" class="radio" id="WebsitePkg5" name="WebPkg" type="radio" />$79</span><span class="small-price">.99/mo</span></td>
    <td class="plans-price"><span class="price-big"><input value="114.99" title="" class="radio" id="WebsitePkg10" name="WebPkg" type="radio" />$114</span><span class="small-price">.99/mo</span></td>
    <td class="plans-price"><span class="price-big"><input value="149.99" title="" class="radio" id="WebsitePkg15" name="WebPkg" type="radio" />$149</span><span class="small-price">.99/mo</span></td>
  </tr>
</table>
<div class="additional-pages">
    
      <p><input class="cf_inputbox" maxlength="150" size="30" title="" id="addpages" name="addpages" type="text" value="0"/>
     Add Additional Pages To Any Plan <br />
      <span class="style1">$9.99/mo each</span></p>
</div>
<h4>Need Help Creating A Plan?</h4>
<p><input type="image" src="../images/stories/add-ons.png" width="135" height="33" border="0" style="background: none; border: none; width: 135px; height: 33px; border: none; float: right; cursor: pointer;" onclick="TabbedPanels1.showPanel(1); return false;" name="websiteaddons" alt="Website Add-Ons" >
        Our <strong>Site Map Worksheet</strong> will help you strategize your website. <a target="_blank" href="#">Download PDF</a><br /><a href="#">View Example Site Map</a>
</p>
    </div>
    <div class="TabbedPanelsContent">
<div id="page-title"><p>Website Add-Ons</p></div>
<h3>Visual Add-ons</h3>
<table width="875" border="0" cellpadding="0" cellspacing="1" class="add-ons-tables">
  <tr class="add-ons-tables-td">
    <td><div align="center">  <input value="FREE" title="" class="radio" id="adddon_1" name="visualaddons1" type="checkbox" /></div></td>
  </tr>
</table>

<p></p>
<input type="image" src="../images/premium-upgrades-button.png" height="33" width="135" border="0" style="background: none; border: none; float: right; cursor: pointer; width: 135px; height: 33px;" onclick="TabbedPanels1.showPanel(2); return false;" name="preupg" id="preupg" alt="Premium Upgrades" />
<br/>
</div>

<div class="TabbedPanelsContent">
<div style="height: 35px"> </div>
<table width="277" border="0" cellpadding="1" cellspacing="1" class="upgrade-tables">
  
  <tr class="upgrade-tables-bottom">
    <td valign="middle" class="upgrade-tables-bottom-view">View<br />
  Demo</td>
    <td class="upgrade-tables-prices">  <input value="19.99" title="" class="radio" id="upgr_1" name="upgrade1" type="checkbox" /><div class="big">+$19</div><div class="small">.99/mo</div></td>
  </tr>
</table>
   <h4>Need Something More Custom? </h4>
<p style="font-weight: normal">
<input type="image" src="../images/review-and-complete.png" height="33" width="135" onclick="TabbedPanels1.showPanel(3); return false;" name="submit" alt="Review & Complete" />Whether you want to create a new social network, or something never-before seen,<br/> our team of professionals can turn your website vision into a reality. Free Consultation  </p> 
</div>

<div class="TabbedPanelsContent">
<?php 
 if (!empty($_POST['WebPkg'])) { echo '<p><strong>Web Package of Choice: </strong>' . $_POST['WebPkg'] . '</p>'; } 
 if (!empty($_POST['addpages'])) { echo '<p><strong>Add Additional Web Pages: </strong>' . $_POST['addpages'] . '</p>'; } 
      
 if(count(preg_grep('/visualaddons/',array_keys($_POST))) > 0) { echo '<h1>Visual Add-Ons</h1>'; }
 if(isset($_POST['visualaddons1'])) { echo '<strong>Rotating Banner: </strong>' . $_POST['visualaddons1'] . '<br />'; } if(isset($_POST['visualaddons2'])) { echo '<strong>Accordian Banner: </strong>' . '$' . $_POST['visualaddons2'] . '<br />'; } if(isset($_POST['visualaddons3'])) { echo '<strong>Photo Gallery: </strong>' . $_POST['visualaddons3'] . '<br />'; } 
 if(count(preg_grep('/formaddons/',array_keys($_POST))) > 0) { echo '<h1>Online Form Add-Ons</h1>'; }
 if(isset($_POST['formaddons1'])) { echo '<strong>General Contact Form: </strong>' . $_POST['functionaddon1'] . '<br />'; } if(isset($_POST['formaddons2'])) { echo '<strong>Request Service Form: </strong>' . $_POST['formaddons2'] . '<br />'; } if(isset($_POST['formaddons3'])) { echo '<strong>Additional Forms: </strong>' . '$' . $_POST['formaddons3'] . ' ea.<br />'; } 
 if(count(preg_grep('/functionaddon/',array_keys($_POST))) > 0) { echo '<h1>Functional Add-Ons</h1>'; }
 if(isset($_POST['functionaddon1'])) { echo '<strong>Google Map: </strong>' . $_POST['functionaddon1'] . '<br />'; } if(isset($_POST['functionaddon2'])) { echo '<strong>Event Calendar: </strong>' . '$' . $_POST['functionaddon2'] . '<br />'; } if(isset($_POST['functionaddon3'])) { echo '<strong>Client Login: </strong>' . '$' . $_POST['functionaddon3'] . '<br />'; } if(isset($_POST['functionaddon4'])) { echo '<strong>Blog System: </strong>' . '$' . $_POST['functionaddon4'] . '<br />'; } 
 if(count(preg_grep('/soaddon/',array_keys($_POST))) > 0) { echo '<h1>Social Media Add-Ons</h1>'; } 
    
 if(isset($_POST['soaddon1'])) { echo '<strong>Facebook Like Module: </strong>' . $_POST['soaddon1'] . '<br />'; } if(isset($_POST['soaddon2'])) { echo '<strong>Facebook Stream Module: </strong>' . $_POST['soaddon2'] . '<br />'; } if(isset($_POST['soaddon3'])) { echo '<strong>Twitter Stream Module: </strong>' . $_POST['soaddon3'] . '<br />'; } 
 if(count(preg_grep('/upgrade/',array_keys($_POST))) > 0) { echo '<h1>Upgrade Package</h1>'; } 
 if(isset($_POST['upgrade1'])) { echo '<strong>Restaurant Upgrade: </strong>' . '$' . $_POST['upgrade1'] .  '/mo<br />'; } if(isset($_POST['upgrade2'])) { echo '<strong>Real-Estate Upgrade: </strong>' . '$' . $_POST['upgrade2'] . '/mo<br />'; } if(isset($_POST['upgrade3'])) { echo '<strong>eCommerce Upgrade: </strong>' . '$' . $_POST['upgrade3'] . '/mo<br />'; }
?>
<h4>Website Plan Agreement</h4>
<p><input type="checkbox" name="agreement" id="agreement" />Yes, I have completely read, understand, and agree to all articles and policies as outlined in <a href="#">Terms & Agreement</a>.</p>
<input name="submit" type="button" value="Account & Billing Info" />     
      
</div>      
  </div>
</div>
</form>

Report · Aug 06, 2011

Looking at the submit button:

<input type="image" src="../images/review-and-complete.png" height="33" width="135" onclick="TabbedPanels1.showPanel(3); return false;" name="submit" alt="Review & Complete" />Whether you want to create a new social network, or something never-before seen,<br/> our team of professionals can turn your website vision into a reality. Free Consultation  </p>

I don't see where you are passing variables. That return false, select the last tabbed panel won't pass information to the final tab. You either need to use javascript to do it without a page refresh or, you would have to rewrite the page so that when the submit button is pressed you modify the code near the footer where you would need to dynamically change the default open panel. The code is:

<script type="text/javascript">
     var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", { defaultTab: 2 });
</script>