CODEWITHSUNDEEP
javascripthtmlbuttononclick
user5592264
user5592264

Reputation:

How to execute html code only when a button is clicked

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?

Upvotes: 0

Views: 4150

Answers (1)

blin2linkme
blin2linkme

Reputation: 119

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

Upvotes: 1

Related Questions