bootstrap buttons onclick events

Question

I have 2 bootstrap buttons, I is a direct link to another page on the website and the other one I want to activate a javascript onclick event. I have no problem with a basic link but when adding it to a button it doesnt seem to work? I have included the code I am using with the link thats works but the button doesnt.

The code is :

<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
Are you already registered?
<a href='login' button type='button' class='btn btn-block btn-success'><span class='glyphicon glyphicon-user'></span> Login</button></a>
<div class="spacing3"></div>Not yet?

<button id='next' name ='next' type='button' class='btn btn-block btn-primary'>Continue</button>
</div>
</div>

<a href="#" onClick="$('#loginbox').hide(); $('#1box').show()">Login here</a>

And the js for the button is

$(document).ready(function() {
$('#btn-next').on('click', function() {
$('#loginbox').hide(); $('#1box').show();
}
      

   

Solution 1

change this

<button id='next' name ='next' type='button' class='btn btn-block btn-primary'>Continue</button>

to

<button id='btn-next' name ='next' type='button' class='btn btn-block btn-primary'>Continue</button>

as you are applying event on btn-next ID $('#btn-next').on('click'

Solution 2

Change your code to:

$(document).ready(function() {
   $('#next').on('click', function() {
      $('#loginbox').hide(); 
      $('#1box').show();
   })
});

Acyually u r using wrong id.

$('#btn-next') 

should be

$('#next')

Another solution could be, change your id from html like:

<button id='btn-next' name ='next' type='button' class='btn btn-block btn-primary'>Continue</button>

And then jquery as:

$(document).ready(function() {
   $('#btn-next').on('click', function() {
      $('#loginbox').hide(); 
      $('#1box').show();
   })
});

Comments

[neophyte]

you don't have any id="btn-next" in your html

[Shiran Dror]

your button id is #next not #btn-next

[Muhammad Qasim]

@Jules - Please see my answer and accept it as answer if its hellpful..:)

[Jules]

Sorry that doesnt work! Even when i add btn-next to text?

[Muhammad Qasim]

Please update your html and let me see whats the problem

[Muhammad Qasim]

Please note that its a click event. The code will be fired when user will click that button.