CODEWITHSUNDEEP
javascriptjqueryhtml
Rayaan Khan
Rayaan Khan

Reputation: 67

Form does not shows on clicking using JS

I have made form and it is hidden using CSS display property. I have button. I want to show the form when I click that button. I have done everything from my end but still form does not show up.

<input type="button" value="Popup" onclick="showLoginForm();"/>

<form id="loginForm" action="" method="post" style="display:none;">
        <p><strong>ID:</strong> </p>
        <strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
        <strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
        <strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
        <input type="submit" id = "submit" name="submit" value="Submit">
        </form>

Below is my JS function which is not trigerring.

    $("button").click(function(e) {
    $("#loginForm").show();

    e.preventDefault();
});

Upvotes: 0

Views: 43

Answers (2)

depperm
depperm

Reputation: 10746

The function showLoginForm() is not defined. Your jquery was listening for a button click, when your button is of type input.

$("input[type=button]").click(function(e) {
    $("#loginForm").show();

    e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" />

<form id="loginForm" action="" method="post" style="display:none;">
        <p><strong>ID:</strong> </p>
        <strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
        <strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
        <strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
        <input type="submit" id = "submit" name="submit" value="Submit">
</form>

Or with the function defined:

function showLoginForm(){ 
    $("#loginForm").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" onclick="showLoginForm();"/>

<form id="loginForm" action="" method="post" style="display:none;">
        <p><strong>ID:</strong> </p>
        <strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
        <strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
        <strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
        <input type="submit" id = "submit" name="submit" value="Submit">
        </form>

Upvotes: 1

PhilVarg
PhilVarg

Reputation: 4820

Your issue is that your input is type button, not a button element itself. so either changing your input to a button or changing your jquery binding to $('input[type=button]') ought to work

http://jsfiddle.net/4Lz5rsq3/

Upvotes: 0

Related Questions