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和过滤（:伪类）的所有输入仅被检查的那个 - 即选定的选项。

通过Modal显示摘要表单

1 个答案: