Как я могу получить значение из входного текста и показать мой модальный? - PullRequest
Новая
       17

Как я могу получить значение из входного текста и показать мой модальный?

0 голосов
/ 14 мая 2019

Я хочу, чтобы мое текстовое поле отображалось в моем модале с использованием jQuery.Как я могу исправить этот код?Если бы я поставил галочку, это было бы показано в моем модале.Но если я использую свое текстовое поле, оно ничего не показывает.

Body 

<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>

Script 

 // 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);

        });
    });

1 Ответ

2 голосов
/ 14 мая 2019

[1] Вы можете использовать только один $(document).ready()

[2] Нет необходимостииспользуйте что-то вроде $(p).html() + '<b>'..., вы можете добавить HTML Structure к переменной, затем использовать .html(HTMLStructure), чтобы добавить html-структуру к элементу .. это можно сделать также с помощью .append() ..

[3] Хотя идентификатор должен быть уникальным, и у вас есть идентификатор для желаемого ввода, поэтому вы можете получить его значение с помощью $('#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);

    });
});
...