javascript - 通过模态显示摘要表格

需要创建食物订购系统。
我很困惑，在这里我想以模态形式总结用户的选择，然后再存储到数据库中。据说建议使用模式以免使用其他页面再次重新启动。

它在向导模板中，单击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的专家。

最佳答案

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

基本上，javascript不会以简单的方式读取单选按钮的值。
我们正在做的是获取所有名为burger的输入并仅过滤被选中的输入（:伪类）-即选择的选项。