CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapcheckboxmodal-dialog
DanceLink
DanceLink

Reputation: 49

How does one pop up a modal AND run a checkbox check in JavaScript/jQuery?

I need a question answered, that in all honesty is almost completely identical to this one. The only difference is that instead of displaying a JS alert, I'm trying to display a modal using Bootstrap 3.1.1.

Here's what I have for relevant code so far:

HTML

<!DOCTYPE HTML>
<form id="aForm" method="post" action="">
    ...
    <p class="alert alert-error alert-danger" id="errorMsg" style="display:none;">You must check the checkbox!</p>
    <label class="checkbox"><input type="checkbox" id="theChkbox" required="required" />Click the box.</label>
    <button id="clickButton" class="btn" type="button" onclick="submitCheck('theChkbox','errorMsg');">Click</button>
   ...
    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                    <h4 class="modal-title">Modal Title</h4>
                </div>
                <div class="modal-body">
                    <!-- Content here -->
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="submitModal()" class="btn">Click Me</button>
                </div>
            </div>
        </div>
    </div>
    ...
</form>

JavaScript

function submitCheck(chkbox,error) {
    if (document.getElementById(chkbox).checked == false) {
        document.getElementById(error).style.display = "block";
    } else {            
        window.location.href = "#myModal";
    }
}

Now, the condition that the checkbox must be checked has to be there, and only when it is checked, and the button is pressed is the modal supposed to pop up.

Any advice is welcome. Seriously, this is driving me nuts! >.<

Upvotes: 0

Views: 6088

Answers (1)

Simon Paquet
Simon Paquet

Reputation: 625

I'll guess that you have JQuery...

Here is a JSFiddle that might show you how to do so with bootstrap : JSFIDDLE

// everytime the button is pushed, open the modal, and trigger the shown.bs.modal event
$('#openBtn').click(function () {
    $('#modal-content').modal({
        show: true
    });
});

HTML

<a href="#" class="btn btn-default" id="openBtn">Open modal</a>

<div id="modal-content" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3>Modal header</h3>
            </div>
            <div class="modal-body">
                <p>
                    <input type="text" id="txtname" />
                </p>
            </div>
            <div class="modal-footer"> 
                <a href="#" class="btn" data-dismiss="modal">Close</a>
                 <a href="#" class="btn btn-primary">Save changes</a>
            </div>
        </div>
    </div>
</div>

Upvotes: 2

Related Questions