CODEWITHSUNDEEP
javascriptjqueryhtmlbootstrap-4bootstrap-modal
Hasan Zahir
Hasan Zahir

Reputation: 45

how can i get value from input text and show to my modal?

I want my text field to show in my modal using jQuery. How can I fix that code? If I checked my checkbox, it would show in my modal. But if I use my text field its show nothing.

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

        });
    });

Upvotes: 0

Views: 2099

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

[1] You can use just one $(document).ready()

[2] No need to use something like $(p).html() + '<b>'... you can add the HTML Structure to a variable then use .html(HTMLStructure) to add the html structure to the element .. this can be done with .append() too..

[3] While the id should be unique and you have id for the desired input So you can get its value by use $('#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);

    });
});

Upvotes: 2

Related Questions