검토 단추를 눌렀을 때의 JQuery 미리보기 양식

Question

고객이 제출하기 전에 양식을 미리 보는 방법을 파악하는 데 어려움을 겪고 있습니다. 나는 양식을 보여주는 하나의 fieldset을 가지고 있으며, 양식을 제출하기 전에 다른 fieldset에 항목을 미리 볼 수 있습니다.

모든 도움을 주셔서 감사합니다. 모든

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

그러나 didnt 한 일 :

나는이 시도.

코드는 다음과 같습니다. 여기 내 바이올린입니다 : 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> 

자바 스크립트 :

<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로 입력 할 수도 있습니다.