.show() method is not working like it is supposed to in jquery

Question

I have a div which is displaying none in css(display:none;) but when I use the jquery .show() method it only flashes on the page for a second. here is my html code

    <center><div style="margin-top:100px;margin-bottom:100px;border:1px solid black;">

    <div class="logIn" id="login">

  <form action="Login.php" method="post" name="login">

  <h4> Log into your Irokko Account </h4><br/>
  Username:<br/>
    <input type="text" name="username"><br/><br/>
  Password:<br/> 
    <input type="password" name="password"><br/><br/>
    <input type="submit" value="Log In" name="login">   <input id = "create" type="submit" name="account"      value="Create Account"> </form>

    <a href="#ForgotPassword" style="font-size:12px; color:blue;text-decoration:underline">Forgot Password</a>   <br><br/>
    <div id="ForgotPassword" class="modalDialog">
  <div>
  <a href="Login.php" title="Close" class="close">X</a>
 <h2>Retrieve Password</h2>
 <form action="Login.php" method="post" name="login">
 <p>Please enter your email address to retrieve your password.</p><br/><br/>
    <input type="email" name="email" size="65"><br/><br/>

    <input type="submit" value="Send" ><br><br>   
   </form>
     </div>
    </div>
   </div><br><br>   


  <div id="signup" class="hide">
   <form action="login.php" method="post" name="signup" onSubmit="return validatesignup();">

    Confirm Password:<br/>
    <input type="password" name="confirmpassword" size="40"><br/><br/> 
    Account Type:<br/>
    <select name="accounttype" class="width">

        <option></option>
        <option>Advertiser</option>
        <option>Publisher</option>
    </select><br/><br/>
    Company Name:<br/>
    <input type="text" name="companyname" size="40"><br/><br/>
    Email address:<br/>
    <input type="email" name="email" size="40"><br/><br/>
   Country:<br/>
    <input type="text" name="country" size="40"><br/><br/>

    <input  type="submit" name="createaccount" value="Create Account"><br><br>

And here is my css code

    .hide{
          display:none;
         }

And below is the jquery code

    $(document).ready(function(){
        $(".hide").hide();

          $("#create").click(function(){

             $(".hide").show(); 

    });


 });

You don't have any element with an ID of "create" in the HTML you've included, yet your click handler is assigned to an element with that ID. — James Donnelly, Dec 13 '13 at 11:59
you have no div ".hide" in your code, I ask that you put the correct code — Paulo Lima, Dec 13 '13 at 12:14
sorry Paulo, I was trying somethings and i took it off but i have placed it there now — Sweetie Anang, Dec 13 '13 at 12:23

score 2 · Accepted Answer · answered Dec 13 '13 at 12:13

2

The create button is type="submit". You need to either call event.preventDefault() in the "submit" event of the form (making that event callback take a parameter called event), or change that input with id="create" to type=button.

I would change it to type="button", because I doubt you would want an "Enter" keypress to press Create. Submit buttons are the default if the enter key is pressed in the form.

The create form "disappears" because the create button's submit (re)loads the login.php page.

answered Dec 13 '13 at 12:13

doug65536

6,562
3
43
53

what you have just said makes sense that the login.php page reloads but I cannot use the type ="button" because I am submitting to the database so it may cause problems for me. I will however try the event.preventDefault() – Sweetie Anang Dec 13 '13 at 12:21
Thank you very much doug65536. The event worked. my partner says to tell you you are a great programmer, a genius. we are very happy. Thanks once again. – Sweetie Anang Dec 13 '13 at 12:25

Ankit Tyagi · Answer 2 · 2013-12-13T12:07:47.493

0

Try this if '#create' is from other source : Event Delegation

$(document).ready(function(){
    $(".hide").hide();
    $(document).on('click','#create',function(){
       $(".hide").show(); 
    });
});

edited Dec 13 '13 at 12:07

answered Dec 13 '13 at 12:01

Ankit Tyagi

2,381
10
19

the create id is reading from a different source. I will post the full code here now. – Sweetie Anang Dec 13 '13 at 12:05
Thank you very much Tyagi. I have gotten the response i needed. – Sweetie Anang Dec 13 '13 at 12:27

score 0 · Answer 3 · answered Dec 13 '13 at 12:32

0

Why not remove the .hide class completely and target the element #create like this:

$(document).ready(function(){
    $("#signup").hide();
    $("#create").click(function(){
        $("#signup").show(); 
    });
});

answered Dec 13 '13 at 12:32

C. S.

805
6
6

.show() method is not working like it is supposed to in jquery

3 Answers3

Linked