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

Question

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

I don't know why my comment was removed, but to answer your question, I fixed your tags and removed the superfluous text. — j08691, Sep 19 '14 at 02:59
Weird, didn't know you could do that. Also, I did not remove the comment. No idea how it got removed. Odd :/ — DanceLink, Sep 19 '14 at 14:11
That's part of the charm of SO. Anyone can edit virtually anything (provided you have the rep -- with great power comes something something, I forget the details). Anyway, I didn't mean to imply that you deleted the comment. — j08691, Sep 19 '14 at 14:14

score 2 · Answer 1 · answered Sep 18 '14 at 21:22

2

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>

answered Sep 18 '14 at 21:22

Simon Paquet

615
5
11

Lemme try this, I'll mark this as solved if it works. :D – DanceLink Sep 19 '14 at 14:11
Erm, actually I'm noticing you didn't put a check for the checkbox. That doesn't quite answer the question. Sorry. – DanceLink Sep 19 '14 at 14:13
My job is not to code the whole thing for you ; - ) Otherwise, I would not help you – Simon Paquet Sep 19 '14 at 14:19
Question: Since this code exists in a .NET environment, does it matter if the a tag is running at the server level? (runat="server") – DanceLink Sep 19 '14 at 14:54
It does't matter, as long as your HTML (view source) is in good condition for your JQuery – Simon Paquet Sep 19 '14 at 14:57
Silly question: Does it matter if the modal div is wrapped inside the outer form div, or should it absolutely be outside of form? – DanceLink Sep 19 '14 at 15:12
It depends on the context, but I would rather put the modal div outside the container of the site (just before the
tag
– Simon Paquet Sep 19 '14 at 15:14
I found out what the problem was. I had an include in my application that was using another version of bootstrap that was directly conflicting with the modal popup code. As soon as I commented it out, modal popped up and stayed there (had it disappearing on me as soon as it popped up at one point). That only took an hour or two. >.<!!! – DanceLink Sep 19 '14 at 16:10
Glad you fixed it. Happy coding! – Simon Paquet Sep 19 '14 at 16:11

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

1 Answers1