javascript - JQuery Preview Form when Review Button is pressed -

javascript - JQuery Preview Form when Review Button is pressed -

i having hard time trying figure out how preview form before client submits. have 1 fieldset shows form, user can preview there entries on fieldset before submit there form.

thanks , help.

i tried this:

var fname = $('input#fname').val(); $(field2.show_fname).html(fname).show();

but didnt work @ all.

code below. here fiddle: http://jsfiddle.net/xdmp8zz4/3/

html:

<form id="helpdeskform" action="process.php" method="post"> <fieldset class="field1 current"> <h2>(placeholder) title of form heading level 2</h2> <p><label class="form-label first-name" for="fname">first name:</label> <input type="text" name="fname" id="fname" placeholder="first name"/> </p> <p><label class="form-label last-name" for="lname">last name:</label> <input type="text" name="lname" id="lname" placeholder="last name"/> </p> <p><label class="form-label" for="phone-field">phone:</label> <input type="text" name="phone" id="phone-field" placeholder="phone number"/> </p> <p><label class="form-label" for="email-field">e-mail:</label> <input type="text" name="email" id="email-field" placeholder="e-mail"/> </p> <hr> <p><label for="classify">type of request:</label> <select name="classify" id="classify"> <option value="select">please select option..</option> <option value="maintainence">maintainence of site</option> <option value="troubleshoot">troubleshoot/error</option> <option value="new">create new content</option> </select> </p> <p><label for="subject">short description: <span class="counter-field"><span id="counter"></span> characters left.</span></label> <input type="text" name="subject" id="subject" placeholder="subject"/> </p> <p><label for="desc">additional comments:</label> <textarea style="font-family: arial, veranda, sans serif" name="desc" id="desc" cols="30" rows="10" placeholder="short description"></textarea> </p> <p><label for="review"> <input type="button" name="review" class="review action-button" value="review"/> </label></p> </fieldset> <fieldset class="field2"> <!-- @todo preview form inputs --> <p>first name: <input type="hidden" class="show_fname" readonly="readonly" /></p> <p>last name: <input type="hidden" class="show_lname" readonly="readonly" /></p> <p>phone: <input type="hidden" class="show_phone" readonly="readonly" /></p> <p>e-mail: <input type="hidden" class="show_email" readonly="readonly" /></p> <p>type of request: <input type="hidden" class="show_type_of_request" readonly="readonly" /></p> <p>short description: <input type="hidden" class="show_subject" readonly="readonly" /></p> <p>additional comments: <input type="hidden" class="show_comments" readonly="readonly" /></p> <p style="float:left;"><label for="previous"> <input type="button" name="previous" class="previous action-button" value="previous"/> </label></p> <p style="float:left; padding-left: 10px;"><label for="submit"> <input type="submit" value="submit" name="submit" class="action-button"/> </label></p> </fieldset> </form>

javascript:

<script type="text/javascript"> $(document).ready(function () { $('.review').click(function () { $('.current').removeclass('current').hide().next().show().addclass('current'); }); $('.previous').click(function () { $('.current').removeclass('current').hide().prev().show().addclass('current'); }); $('#subject').simplycountable({ counter: '#counter', counttype: 'characters', maxcount: 80, strictmax: true, countdirection: 'down', }); });

css:

/*hide except first fieldset*/ #helpdeskform .field2 { display: none; } /*inputs*/ #helpdeskform input { padding: 10px; border: 1px solid #ccc; border-radius: 3px; margin-bottom: 10px; width: 80%; color: #2c3e50; font-size: 13px; } #helpdeskform textarea { padding: 15px; border: 1px solid #ccc; border-radius: 3px; margin-bottom: 10px; width: 100%; box-sizing: border-box; color: #2c3e50; font-size: 13px; } /*buttons*/ #helpdeskform .action-button { width: 100px; font-weight: bold; border: 0 none; border-radius: 1px; cursor: pointer; padding: 10px 5px; margin: 10px 5px; } #helpdeskform .action-button:hover, #helpdeskform .action-button:focus { box-shadow: 0 0 0 2px white, 0 0 0 3px #900; } /*form labels*/ label.form-label { text-align: left; } /*phone label align*/ input#phone-field { margin-left: 26px; } /*e-mail label align*/ input#email-field { margin-left: 24px; } .counter-field { font-size: 10px; } /*divider*/ hr { margin-bottom: 20px; padding: 0px; border-width: 2px; border-style: solid; border-color: #ccc; }

setting text inputs in sec fieldset hidden won't allow set value , won't display. i've changed these type="text"and set things loop through form values in first set form values in review section here, http://jsfiddle.net/xdmp8zz4/23/

javascript jquery html forms