OnClick not working in Jquery

Question

I have written a simple code and want to hide one div and show another on the click of a button.But nothing is happening, nothing is being shown on the console also.

    <!DOCTYPE html>
      <html lang="en">

      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Demo</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

       <script type="text/javascript">     
        $(document).ready(function() {
          $('#register-btn').on("click", function() {
          $('#reg').hide();
        });
      });  
    </script>
     </head>
      <body>
        <div class="container" id="reg">
          <div class="row">
            <h1 style="text-align:center;">Demo</h1>
          </div>

         <form class="form-horizontal">
          <div id="call" class="col-md-6 col-md-offset-4">
            <div class="form-group">
              <div class="col-md-10">
                <input id="name" class="form-control"  type="text"  placeholder="Enter a Name"/>
              </div>
            </div>    

            <div class="form-group">
              <div class="row">
                <div class="col-md-4 col-md-offset-2">
                  <button class="btn-style" id="register-btn">Register</button>
                </div>
              </div>
            </div>
          </div>
         </form>
        </div> 

    </body>
</html>

Can anyone help me on this?

It works fine for me, I think your problem is that the page is reloading when you click the button since it is in a form — Jacob G
– Jacob G, Commented Aug 7, 2015 at 23:53

Ram · Accepted Answer · 2015-08-07 23:54:11Z

4

The default type of a button element is submit. When you click the element the form is submitted and the page is refreshed. Either use the type="button" attribute for the button element:

<button type="button" class="btn-style" id="register-btn">Register</button>

or prevent the default action of the event using preventDefault method of the event object.

answered Aug 7, 2015 at 23:54

Ram

145k16 gold badges174 silver badges201 bronze badges

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

Comments

Daniel Payne · Accepted Answer · 2015-08-07 23:56:04Z

0

you can return false; to disable the default behavior and it will work

$(document).ready(function() {
$('#register-btn').on("click", function() {

$('#reg').hide();
return false;
});
});

answered Aug 7, 2015 at 23:56

Daniel Payne

1258 bronze badges

Collectives™ on Stack Overflow

OnClick not working in Jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related