按下Review按鈕時的JQuery預覽表格

Question

我很難想出如何在客戶提交之前預覽表格。我有一個顯示錶單的字段集，那麼用戶可以在提交表單之前預覽另一個字段集的條目。

感謝您的所有幫助。

我嘗試這樣做：

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

但沒有在所有的工作。

代碼如下。這裏是我的小提琴：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 an 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 ALL 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 all 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; 
} 

Answer 1

將第二個字段集中的文本輸入設置爲隱藏不會允許您設置該值並且也不會顯示。我已經將它們更改爲type="text"，並設置了第一個循環通過表單值以在此處查看部分中設置所有表單值，http://jsfiddle.net/xdmp8zz4/23/

Answer 2

這是我做的第一個名字一個露面在審查中。

$('.show_fname').after($('#fname').val()); 

你不能把該值在隱藏的輸入，因爲它是隱藏的，你不能從隱藏的文字因爲jQuery禁止其輸入的類型而改變。要麼你可以改變輸入從隱藏到文本/禁用，或者你可以簡單地把它放在HTML中，因爲我已經完成了上面的簡單代碼。