通过Modal显示摘要表单

Question

需要建立食品订购系统。我被困住了，在我的数据库中存储之前，我想在模式表单中总结用户的选择。据说，为了避免再次使用其他页面重新启动，建议使用模态。

在向导模板中，单击NEXT $('.buttonNext').addClass('btn btn-success')；它工作良好，如果回到第一步，选择不会重置：

这是我到目前为止所得到的。HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <form role="form" id="showchoices" name="showchoices" method="post" onsubmit="return entry_check()" action="/user/ps/add/">

     <div id="step-11"><fieldset>
    <input type="radio" id="food1" name="burger" value="bigburger"/> BB
    <input type="radio" id="food2" name="burger" value="reg_burger"/> RB </fieldset> </div>

    <div id="step-22"> <fieldset>
    <input type="radio" id="drink1" name="drink" value="coca-cola"/> CC
    <input type="radio" id="drink2" name="drink" value="juice"/> J </fieldset> </div>

    <div id="step-33"><input type="text" id="other_food" name="other"/> </div>
 </form>

<input type="button" name="btn" value="Review" id="review" data-toggle="modal" data-target="#con_rev" class="btn btn-primary" />

<!--  pop out modal  -->
<div class="modal fade" id="con_rev" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">Confirm Order</div>
            <div class="modal-body">
                <p> Your Burger: <span id="burger_type"></span> </p>
                <p> Your Drinks: <span id="drink_type"></span> </p>
                <p> Others: <span id="otherfood"> </span></p></div>
            <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <a href="" id="submit" class="btn btn-success success">Submit</a> </div>
        </div>
    </div>
</div>

这是我的JS，它位于同一个文件HTML中：

<script type="text/javascript">
$('#review').click(function () {
        $('#burger_type').html($('#burger').val());
        $('#drink_type').html($('#drink').val());
        $('#otherfood').html($('#other_food').val());
    }); </script>

所以只有我的"other_food“才会显示你输入了什么文本，其他人不会。我不知道如何签入无线电模式。

谢谢您，我不是JS或javascript方面的专家。

Answer 1

试试$('#burger_type').html($('input[name="burger"]:checked').val());

基本的javascript不以简单的方式读取单选按钮的值。我们要做的是获取名为burger和filtering (:伪类)的所有输入，只有选中的输入(即所选的选项)。