How to execute html code only when a button is clicked

Question

I want to run this html code only when I click a button:

<div class="modal-bg">
    <div id="modal">
        <span>Sign In<a href="#close" id="close">&#215;</a></span>
        <form>
            <input id="username" name="username" type="textbox" placeholder="Username" required>
            <input id="password" name="password" type="password" placeholder="Password" required>
            <a id="forgot-link" href="#">Forgot password?</a>
            <button name="submit" id="submit" type="submit">Sign in</button>
        </form>
    </div>
</div>

The button's html code is:

<span class="button" onclick="javascript:buttonClicked();">Sign In</span>

I want to create the buttonClicked() function in order to load the html code above (the form etc). Any ideas?

Do you want to remove it from the DOM completely, or just hide it? — Pavlin
– Pavlin, Commented Nov 22, 2015 at 17:22
First of all I'm new to JavaScript. Currently, when the button is clicked the function buttonClicked() has a simple alert message.Instead of this i want to "load" the modal-bg div code — user5592264
– user5592264, Commented Nov 22, 2015 at 17:27
Simple first hide div modal-bg and show it on button clicked event. — blin2linkme
– blin2linkme, Commented Nov 22, 2015 at 17:32

blin2linkme · Accepted Answer · 2015-11-22 17:46:49Z

1

    <button id="showdiv">Show</button>
    <div class="modal-bg hide">
    <div id="modal">
        <span>Sign In<a href="#close" id="close">&#215;</a></span>
        <form>
            <input id="username" name="username" type="textbox" placeholder="Username" required>
            <input id="password" name="password" type="password" placeholder="Password" required>
            <a id="forgot-link" href="#">Forgot password?</a>
            <button name="submit" id="submit" type="submit">Sign in</button>
        </form>
    </div>
</div>
<script>
    $(document).on("ready", function(e){
    $("#showdiv").on("click", function(){
    $("div.modal-bg").removeClass("hide");
    });
    });
</script>

Class hide should have valid css to hide the div. in div with class modal-bg.

edited Nov 22, 2015 at 17:46

answered Nov 22, 2015 at 17:39

blin2linkme

1195 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to execute html code only when a button is clicked

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related