我如何从输入文本中获取价值并显示给我的模态？答案

【问题标题】：how can i get value from input text and show to my modal?我如何从输入文本中获取价值并显示给我的模态？
【发布时间】：2019-05-14 10:25:29
【问题描述】：

我希望我的文本字段使用 jQuery 在我的模式中显示。我该如何修复该代码？如果我选中我的复选框，它将显示在我的模式中。但是，如果我使用我的文本字段，它什么都不会显示。

身体

<body>
    <div id="hasildetail" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Detail</h4>
                </div>
                <div class="modal-body">
                    <p id="isidetail">
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="offset-4 col-sm-8">
            <form>
                <h3>Please select:</h3>
                <input type="checkbox" name="hobby" value="Sepak Bola"> Sepak Bola <br>
                <input type="checkbox" name="hobby" value="Membaca"> Membaca <br>
                <input type="checkbox" name="hobby" value="Menulis"> Menulis <br>
                <input type="checkbox" name="hobby" value="Memancing"> Memancing <br>
                <input type="checkbox" name="lainlain" id="lainlain" value="Lain-lain"> Lain-lain <br>
                <input type="text" id="ceklain" placeholder="[ Masukkan lain-lain ]">
            </form>
            <button id="detail" type="button" class="btn btn-primary" data-toggle="modal" data-target="#hasildetail">Detail</button>
        </div>
    </div>
</body>

脚本

 // Tampil ke modal detail
    $(document).ready(function() {
        $("#detail").click(function() {
            var p = $("#hasildetail #isidetail");
            $(p).html("<h4>you have selected : </h4>");
            $.each($("input[name='hobby']:checked"), function() {
                $(p).html($(p).html() + '<br>' + $(this).val());
            });
        });
    });

    // Checkbox Lain-lain
    $(document).ready(function() {
        $('#ceklain').hide();
        $('#lainlain').change(function() {
            if (this.checked)
                $('#ceklain').show(1000);
            else
                $('#ceklain').hide(1000);

        });
    });

【问题讨论】：

$('#ceklain').val()
你能给我看完整的代码吗

标签： javascript jquery html bootstrap-4 bootstrap-modal

【解决方案1】：

^[1]您只能使用一个$(document).ready()

^[2] 无需使用$(p).html() + '<b>'... 之类的东西，您可以将HTML Structure 添加到变量中，然后使用.html(HTMLStructure) 将html 结构添加到元素.. 这也可以用.append() 来完成..

^[3] 虽然 id 应该是唯一的，并且您有所需输入的 id 所以您可以通过使用 $('#ceklain').val()

获得它的值

$(document).ready(function() {
    // Tampil ke modal detail
    $("#detail").click(function() {
        var p = $("#hasildetail #isidetail");
        var HTMLStructure = "<h4>you have selected : </h4>";
        $.each($("input[name='hobby']:checked"), function() {
            HTMLStructure += '<br>' + $(this).val();
        });
        HTMLStructure += $('#ceklain').val();
        $(p).html(HTMLStructure);
    });
    // Checkbox Lain-lain
    $('#ceklain').hide();
    $('#lainlain').change(function() {
        if (this.checked)
            $('#ceklain').show(1000);
        else
            $('#ceklain').hide(1000);

    });
});

【讨论】：

正确吗？因为从您的代码无法正常工作。现在我的检查和我的文本字段在我的模态中什么都没有显示
@HasanZahir 回答已更新，现在检查一下.. 我从代码中的</h4>") 中删除了) .. 请密切关注控制台是否有错误
不客气@HasanZahir .. 祝你有美好的一天:-)