i'm creating checkout system. have 3 parts it:
- shipping info
- payment info
- order confirmation
i'm trying figure out way when customer enters shipping information, data can echo'd out onto order confirmation part, can confirm want shipped to.
the way designed checkout system 3 parts on same page. 1 part shows @ once , others hidden until customer click 'proceed xxxx'. when click proceed button, nothing being sent. taking div , showing , hiding previous div. nothing sent until when customer clicks submit order on confirmation div.
i validate fields , assigned them variables can post shipping , product info db.
if($validation->passed()) { if(isset($_post['create'])){ $fullname = trim( $_post['customer_name'] ); $streetline1 = trim( $_post['streetline1'] ); $streetline2 = trim( $_post['streetline2'] ); $city = trim( $_post['city'] ); $state = trim( $_post['state'] ); $zipcode = trim( $_post['zipcode'] ); $phone_number = trim( $_post['phone_number'] ); $email = ( $_post['email'] ); //etc... shipping information section:
<div class="shippinginfocontainer"> <span class="summarytitle"> <p>enter shipping information</p> </span><br> <div class="center"> <div class="field"> <label class="paddingleft" for="fullname">full name</label> <div class="center"> <input type="text" class="biginputbarinline" name="fullname" value="<?php echo escape(input::get('firstname')); ?>" required> </div> </div> <div class="field"> <label class="paddingleft" for="streetline1">street line 1</label> <div class="center"> <input type="text" class="biginputbarinline" name="streetline1" value="<?php echo escape($user->data()->streetline1); ?>" required> </div> </div> <div class="field"> <label class="paddingleft" for="streetline2">street line 2</label> <div class="center"> <input type="text" class="biginputbarinline" name="streetline2" value="<?php echo escape($user->data()->streetline2); ?>"> </div> </div> <div class="field"> <label class="paddingleft" for="city">city</label> <div class="center"> <input type="text" class="biginputbarinline" name="city" value="<?php echo escape($user->data()->city); ?>" required> </div> </div> </div> <div class="formleftcenter"> <div class="field"> <label for="state">state</label> <input type="text" class="mediuminputbar" name="state" value="<?php echo escape($user->data()->state); ?>" required> </div> <div class="field"> <label for="phone number">phone number</label> <input type="text" class="mediuminputbar" name="phone number" value="<?php echo escape($user->data()->phone_number); ?>"> </div> </div> <div class="formrightcenter"> <div class="field"> <label for="zipcode">zip code</label> <input type="text" class="mediuminputbar" name="zipcode" value="<?php echo escape($user->data()->zipcode); ?>" required> </div> <div class="field"> <label for="email">email</label> <input type="text" class="mediuminputbar" name="email" value="<?php echo escape($user->data()->email); ?>" required> </div> </div> <div class="clear"> <button class="checkoutbutton" id="button2">proceed payment information</button> </div> </div> i won't add payment part irrelevant question.
then relevant part of confirmation part. wasn't sure how this, wrote in echo's show trying do.
<div class="confirmshippinginfo"> <p>shipping to:</p> <p><?php echo $fullname; ?></p> <p><?php echo $streetline1; ?></p> <p><?php echo $streetline2; ?></p> <p><?php echo $city . $state . $zipcode; ?></p> </div> </div> <input type="hidden" name="token" value="<?php echo token::generate(); ?>"> <input class="widebutton" type="submit" value="place order"> is there way keeping on same page? not want have multiple pages , way have of formatted. can't figure out part.
you possibly use ajax via serialize() of form when click review button (as matthew johnson suggested). second idea copy 1 input another, in different part of page. take bit more work set ajax because duplicating form. using .html() inside div or span placeholder work too:
html:
<input type="text" class="copy-from" data-copy="name" name="name" /> <input type="text" class="this-elem" id="name" disabled /> css
.this-elem { border: none; font-size: 18px; color: #333; } jquery
$(document).ready(function() { $(".copy-from").keyup(function() { var elemid = $(this).data('copy'); $("#"+elemid).val($(this).val()); }); }); demo
http://jsfiddle.net/fh5kfhtm/4/
edit: ajax/php solution
<!-- placeholder data after submission --> <div id="final"></div> <!-- form, simplified form --> <form id="orderform" method="post" action="process.php"> <input type="hidden" name="order_form" /> <input type="text" name="address" /> <!-- triggers ajax (you use "proceed order confirmation" button) --> <div id="confirm">confirm</div> <input type="submit" name="submit" value="order" /> </form> new.php file name/path must match what's in ajax url
<?php if(isset($_post['order_form'])) { print_r($_post); exit; }?> jquery ajax
<!-- libraries (you should have them) --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script> <script> $(document).ready(function() { $("#confirm").click(function() { $.ajax({ // need right path new php file url:'/path/to/new.php', type: 'post', data: $("#orderform").serialize(), success: function(response) { $("#final").html(response); } }); }); }); </script> 
Comments
Post a Comment