Bootstrap Multi Stage Form - 使用JQuery收集用户输入

时间:2017-06-22 18:57:21

标签: php jquery forms

我正在使用多阶段表单,我想收集用户输入的数据,以便在最后创建摘要页面。

当用户点击此表单上的“下一步”按钮时,我想抓取他们输入的任何数据并将其显示在表单的下一个阶段; 使用jQuery 。当用户在摘要之后提交表单时,我还需要存储这些值以发送到数据库。

以下是我正在处理的表单示例:

<fieldset>
    <div class="form-top">
        <div class="form-top-left">
            <h2>Servers</h2>
            <h3>Tell us about the servers you need</h3>
        </div>
        <div class="form-top-right">
            <img src="assets/images/icons/select_servers.png" class="form-icon">
        </div>
    </div>
    <div class="form-bottom">
        <div class="form-group">
            <p>Does this quote include servers?</p>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="serverRadios" id="formIncludeServers" value="Yes">
                <label class="form-check-label">Yes</label>
                <div class="reveal-if-active">
                    <label for="select-servers">How many do you need?</label><br />
                    <label for="pro-server" class="form-partner-label">Pro Server</label>
                    <input type="text" name="pro-quantity" class="form-proserver-qty form-control" id="form-partner-pro" value="0">
                    <br />
                    <label for="device-9104" class="form-partner-label">Mini Server</label>
                    <input type="text" name="mini-quantity" class="form-miniserver-qty form-control" id="form-partner-mini" value="0">
                </div>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="serverRadios" id="formExcludeServers" value="No" checked="">
                <label class="form-check-label">No</label>
            </div>
        </div>
        <br />
        <button type="button" class="btn btn-previous">Previous</button>
        <button type="button" class="btn btn-next">Next</button>
    </div>
</fieldset>

0 个答案:

没有答案