javascript - 按下审阅按钮时的 JQuery 预览表单

Question

我很难弄清楚如何在客户提交之前预览表单。我有一个显示表单的字段集，然后用户可以在提交表单之前预览另一个字段集上的条目。

感谢大家的帮助。

我尝试过这个:

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

但是根本没用。

代码如下。这是我的 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 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/