bootstrap buttons onclick events
14,947
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();
})
});
Author by
Jules
Updated on December 02, 2022Comments
-
Jules over 1 year
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(); }
-
neophyte about 7 yearsyou don't have any id="btn-next" in your html
-
Shiran Dror about 7 yearsyour button id is
#next
not#btn-next
-
Muhammad Qasim about 7 years@Jules - Please see my answer and accept it as answer if its hellpful..:)
-
-
Jules about 7 yearsSorry that doesnt work! Even when i add btn-next to text?
-
Muhammad Qasim about 7 yearsPlease update your html and let me see whats the problem
-
Muhammad Qasim about 7 yearsPlease note that its a click event. The code will be fired when user will click that button.