ButchMcRae ButchMcRae - 1 year ago 49
HTML Question

JQuery Preview Form when Review Button is pressed

I am having a hard time trying to figure out how to preview a form before the customer submits. I have one fieldset that shows form, then the user can preview there entries on another fieldset before they submit there form.

Thanks for all and any help.

I tried this:

var fname = $('input#fname').val();

But didnt work at all.

Code is below. Here is my Fiddle: http://jsfiddle.net/xdmp8zz4/3/


<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><label class="form-label last-name" for="lname">Last Name:</label>
<input type="text" name="lname" id="lname" placeholder="Last Name"/>
<p><label class="form-label" for="phone-field">Phone:</label>
<input type="text" name="phone" id="phone-field" placeholder="Phone Number"/>
<p><label class="form-label" for="email-field">E-mail:</label>
<input type="text" name="email" id="email-field" placeholder="E-mail"/>
<p><label for="classify">Type of Request:</label>
<select name="classify" id="classify">
<option value="select">Please select an option..</option>
<option value="maintainence">Maintainence of Site</option>
<option value="troubleshoot">Troubleshoot/Error</option>
<option value="new">Create new content</option>
<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><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><label for="review">
<input type="button" name="review" class="review action-button" value="Review"/>

<fieldset class="field2">
<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"/>
<p style="float:left; padding-left: 10px;"><label for="Submit">
<input type="submit" value="Submit" name="submit" class="action-button"/>


<script type="text/javascript">
$(document).ready(function () {

$('.review').click(function () {


$('.previous').click(function () {


counter: '#counter',
countType: 'characters',
maxCount: 80,
strictMax: true,
countDirection: 'down',



/*Hide all except first fieldset*/
#helpdeskform .field2 {
display: none;
#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;

#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;
hr {
margin-bottom: 20px;
padding: 0px;
border-width: 2px;
border-style: solid;
border-color: #ccc;

Answer Source

Setting the text inputs in the second fieldset to hidden won't allow you to set the value and also won't display. I've changed these to type="text"and set things up to loop through the form values in the first to set all the form values in the review section here, http://jsfiddle.net/xdmp8zz4/23/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download