单击按钮后输入的值为空答案

【问题标题】：Value of Input is empty after button click单击按钮后输入的值为空
【发布时间】：2016-07-15 09:41:04
【问题描述】：

我使用引导模式对话框。我的模态：

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Hello</h4>
            </div>
            <div class="modal-body">
                Your name:
                <input id="colorData" name="colorData" type="hidden" value=""/>
                <input id="nameData" name="nameData" class="input-lg" type="text" value=""/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id="postAnswer" type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
</div>

我有按钮：

    <div align="center" style="margin-bottom: 20px">
        <button value="all" type="button" class="btn btn-lg btn-default">All</button>
        <button value="green" type="button" class="btn btn-lg btn-success">Green</button>
        <button value="blue" type="button" class="btn btn-lg btn-info">Blue</button>
    </div>

我有脚本：

<script type="text/javascript">
    $(document).ready(function () {   
        $(".btn").click(function () {
            var color = $(this).val();
            $(".modal-body #colorData").val(color);
            // $('#colorData').val() - is not empty
            $("#myModal").modal('show');
        });

        $('#postAnswer').click(function (e) {
            e.preventDefault();
            $.ajax({
                // $('#colorData').val() is empty
                // $('#nameData').val() is not empty (I write this on dialog)
                url: "@Url.Action("WriteAnswer", "Home")?name=" + $('#nameData').val() + "&color=" + $('#colorData').val(),
                type: 'POST',
                data: $('#nameData').serialize(),
                success: function (data) {
                    //alert('successfully submitted');
                }
            });

            $("#myModal").modal('hide');
        });

    });
</script>

调用函数后$(".btn").click元素$('#colorData').val()不为空。但是！如果我单击模态按钮，则发布空值，输入 colorData 的值为空。为什么？我想将数据发布到控制器，但值已重置。对不起我的英语。

【问题讨论】：

因为你的postAnswer按钮也是class="btn"（所以var color = $(this).val();是null）
@StephenMuecke，你说得对！谢谢)))
@DenisBubnov，更好地处理 ID 属性，并且您必须始终保持 id 唯一..
@StephenMuecke，你的答案是正确的。请发表你的答案，我选择你的答案。

标签： javascript asp.net-mvc post bootstrap-modal

【解决方案1】：

你<button>元素和id="postAnswer"也有class="btn"，所以当你点击它时，$(".btn").click(function () {方法也会被调用并且var color = $(this).val();返回null（因为那个按钮没有@987654327 @ 属性。

要正确处理此问题，请为 3 个“颜色”按钮（例如）提供一个额外的类名称

<button value="all" type="button" class="color btn btn-lg btn-default">All</button>
<button value="green" type="button" class="color btn btn-lg btn-success">Green</button>
<button value="blue" type="button" class="color btn btn-lg btn-info">Blue</button>

并将第一个脚本更改为

$(".color").click(function () {
    var color = $(this).val();
    $(".modal-body #colorData").val(color);
    $("#myModal").modal('show');
});

【讨论】：