CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap-3
akshay
akshay

Reputation: 131

OnClick not working in Jquery

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?

Upvotes: 2

Views: 1102

Answers (2)

Daniel Payne
Daniel Payne

Reputation: 125

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;
});
});

Upvotes: 0

Ram
Ram

Reputation: 144669

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.

Upvotes: 4

Related Questions