jquerybootstrap-4bootbox

Why is my BootBox seemingly inaccessable?

I can't seem to access any of the elements from my bootbox. I've tried renaming all the fields, but it won't validate and it won't give me a value:

enter image description here

My BootBox code including some debugging attempts:

$(document).on("click", "#btnNew", function () {
    //$("#btnNew").click(function () {
        var form = $("#newSubjectCard").html();
        bootbox.dialog({
            message: form,
            title: "Add New Subject",
            buttons: {
                close: {
                    label: 'Cancel',
                    className: "btn btn-sm btn-danger",
                    callback: function () { }
                },
                success: {
                    label: "Add Subject",
                    className: "btn btn-sm btn-primary",
                    callback: function () {
                        if ($("#newSubjectName").val() == "" || $("#newSubjectEmail").val() == "") {
                            console.log($("#newSubjectName").val());
                            console.log($("#newSubjectEmail").val());
                            console.log("Fail");
                            
                            return false;  // keeps dialog open
                        } else {
                            //addCustomer();
                            console.log($("#newSubjectName").val());
                            console.log($("#newSubjectEmail").val());
                            //console.log("tried to submit");
                        }
                    }
                }
            }
        });

        $("#addCustomer").validate({
            // Specify validation rules
            rules: {
                newSubjectName: "required",
                newSubjectEmail: {
                    required: true,
                    email: true
                }
            },
            messages: {
                newSubjectName: "Please enter a name",
                newSubjectEmail: "Please enter a valid email address"
            },
            submitHandler: function (form) {
                console.log("submitted");
            }
        });
    //});
})

My Form:

<div id="newSubjectCard" class="d-none">
    <form id="addCustomer">
        <div class="form-row">
            <div class="col-auto">
                Name:
                <input type="text" id="newSubjectName" name="newSubjectName" class="form-control" placeholder="JANE DOE">
            </div>
        </div>
        <div class="form-row">
            <div class="col-auto">
                Email:
                <input type="text" id="newSubjectEmail" name="newSubjectEmail" class="form-control" placeholder="JANE.DOE@GMAIL.COM">
            </div>
        </div>
        <div class="form-row">
            <div class="col-auto">
                Group:
                <input type="text" id="newSubjectGroup" name="newSubjectGroup" class="form-control" placeholder="MR. JOHNS CLASS">
            </div>
        </div>
    </form>
</div>

I've been staring at this screen so long I feel like my eyes are going to pop out. Thanks in advance!

**** EDIT **** To solve, I moved my form code directly to JS so that it wouldn't be duplicated. Thank you all for the help!:

var form = `<div id="newSubjectCard">
                            <form id="addCustomer">
                                <div class="form-row">
                                    <div class="col-auto">
                                        Name:
                                        <input type="text" id="newSubjectName" name="newSubjectName" class="form-control" placeholder="JANE DOE">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="col-auto">
                                        Email:
                                        <input type="text" id="newSubjectEmail" name="newSubjectEmail" class="form-control" placeholder="JANE.DOE@GMAIL.COM">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="col-auto">
                                        Group:
                                        <input type="text" id="newSubjectGroup" name="newSubjectGroup" class="form-control" placeholder="MR. JOHNS CLASS">
                                    </div>
                                </div>
                            </form>
                        </div>`;
            bootbox.dialog({
                message: form,
                title: "Add New Subject",
                buttons: {
                    close: {
                        label: 'Cancel',
                        className: "btn btn-sm btn-danger",
                        callback: function () { }
                    },
                    success: {
                        label: "Add Subject",
                        className: "btn btn-sm btn-primary",
                        callback: function () {
                            if ($("#newSubjectName").val() == "" || $("#newSubjectEmail").val() == "") {
                                console.log($("#newSubjectName").val());
                                console.log($("#newSubjectEmail").val());
                                console.log("Fail");
                                $("#addCustomer").valid;

                                return false;  // keeps dialog open

                            } else {
                                //addCustomer();
                                console.log($("#newSubjectName").val());
                                console.log($("#newSubjectEmail").val());
                                //console.log("tried to submit");
                            }
                        }
                    }
                }
Solution

  • The reason you keep getting null input values is that you using bootbox and your input element is created inside of bootbox so you have to define your input element in jquery like this

    $('<your jquery selector for input>','.bootbox').val()

    here is a working demo hope it will help you to clear bootbox input element null issue. 

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js" integrity="sha512-RdSPYh1WA6BF0RhpisYJVYkOyTzK4HwofJ3Q7ivt/jkpW6Vc8AurL1R+4AUcvn9IwEKAPm/fk7qFZW3OuiUDeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>
$(document).ready(function(){
  $(document).on("click", "#btnNew", function () {
debugger
    //$("#btnNew").click(function () {
        var form = $("#newSubjectCard").html();
        bootbox.dialog({
            message: form,
            title: "Add New Subject",
            buttons: {
                close: {
                    label: 'Cancel',
                    className: "btn btn-sm btn-danger",
                    callback: function () { }
                },
                success: {
                    label: "Add Subject",
                    className: "btn btn-sm btn-primary",
                    callback: function () {
                    debugger
                        if ($("#newSubjectName",".bootbox").val() == "" || $("#newSubjectEmail",".bootbox").val() == "") {
                            console.log($("#newSubjectName",".bootbox").val());
                            console.log($("#newSubjectEmail",".bootbox").val());
                            console.log("Fail");
                            
                            return false;  // keeps dialog open
                        } else {
                            //addCustomer();
                            console.log($("#newSubjectName",".bootbox").val());
                            console.log($("#newSubjectEmail",".bootbox").val());
                            //console.log("tried to submit");
                        }
                    }
                }
            }
        });

  
    //});
})
 
});
  </script>
</head>
<body>
<button class="btn btn-success" id="btnNew">click</button>
<div id="newSubjectCard" class="d-none">
    <form id="addCustomer">
        <div class="form-row">
            <div class="col-auto">
                Name:
                <input type="text" id="newSubjectName" name="newSubjectName" class="form-control" placeholder="JANE DOE">
            </div>
        </div>
        <div class="form-row">
            <div class="col-auto">
                Email:
                <input type="text" id="newSubjectEmail" name="newSubjectEmail" class="form-control" placeholder="JANE.DOE@GMAIL.COM">
            </div>
        </div>
        <div class="form-row">
            <div class="col-auto">
                Group:
                <input type="text" id="newSubjectGroup" name="newSubjectGroup" class="form-control" placeholder="MR. JOHNS CLASS">
            </div>
        </div>
    </form>
</div>

</body>
</html>