CODEWITHSUNDEEP
jqueryhtmlcss
Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10189

Input click not working

I have a form on my page when I click on a button the form hides and another form shows in. Here I call jQuery's show() and hide() buttons and change the button's value and id attribute. Then using the buttons new id attribute I use click() function on it. But unfortunately it does not work.

Here is the fiddle.

HTML:

<form id="sign_in">
    <table style="margin: 0 auto;">
        <tr>
            <td align="center"> <span style="font-weight: bold;font-size: 2em;">Sign In</span>

            </td>
            <tr>
                <td>
                    <input class="input" type="email" placeholder="Username" name="username" />
                </td>
            </tr>
            <tr>
                <td>
                    <input class="input" type="password" placeholder="Password" name="password" />
                    <br />
                </td>
            </tr>
            <tr align="right">
                <td>
                    <input class="btn" type="submit" value="Sign In">
                </td>
            </tr>
    </table>
</form>
<form id="sign_up">
    <table style="margin: 0 auto;">
        <tr>
            <td align="center"> <span style="font-weight: bold;font-size: 2em;">Sign Up</span>

            </td>
            <tr>
                <td>
                    <input class="input" type="email" placeholder="Username" name="username" />
                </td>
            </tr>
            <tr>
                <td>
                    <input class="input" type="password" placeholder="Password" name="password" />
                    <br />
                </td>
            </tr>
            <tr align="right">
                <td>
                    <input class="btn" type="submit" value="Sign In">
                </td>
            </tr>
    </table>
</form>
<br/>
<input id="sign_up_btn" class="btn" type="submit" style=" font-weight:bold; height:40px; width: 292px;" value="Create An Account"></input>

JS:

$(document).ready(function () {
    $("#sign_up_btn").click(function () {
        $("#sign_in").hide("slow");
        $("#sign_up").show("slow");
        $(this).attr("value", "Already have an account?");
        $(this).attr("id", "sign_in_btn");
    });
    $("#sign_in_btn").click(function (e) {
        e.stopPropagation();
        $("#sign_up").hide("slow");
        $("#sign_in").show("slow");
        $(this).attr("value", "Create An Account");
        $(this).attr("id", "sign_up_btn");
    });
});

Upvotes: 3

Views: 9810

Answers (3)

Ali Demirci
Ali Demirci

Reputation: 5442

$(document).ready(function () {
    $(document).on('click', "#sign_up_btn",function () {
        $("#sign_in").hide("slow");
        $("#sign_up").show("slow");
        $(this).attr("value", "Already have an account?");
        $(this).attr("id", "sign_in_btn");
    });
    $(document).on('click', "#sign_in_btn", function (e) {
        e.stopPropagation();
        $("#sign_up").hide("slow");
        $("#sign_in").show("slow");
        $(this).attr("value", "Create An Account");
        $(this).attr("id", "sign_up_btn");
    });
});

Upvotes: 0

adeneo
adeneo

Reputation: 318352

Use toggle()

$(document).ready(function () {
    $("#sign_up_btn").click(function () {
        $("#sign_in, #sign_up").toggle("slow");
        $(this).val(function(_, val) {
            return val == 'Create An Account' ? 'Already have an account?' : 'Create An Account';
        });
    });
});

FIDDLE

Upvotes: 1

Adil Shaikh
Adil Shaikh

Reputation: 44740

You need to use event delegation as #sign_in_btn doesn't exist when you bind click event

$(document.body).on('click',"#sign_in_btn",function (e) {
        e.stopPropagation();
        $("#sign_up").hide("slow");
        $("#sign_in").show("slow");
        $(this).attr("value", "Create An Account");
        $(this).attr("id", "sign_up_btn");
});

Upvotes: 4

Related Questions