JQuery button

Buttons are used frequently for user interaction in a web page.
<button  id=new_one name=button1>My Button</button>
Doesn't refresh the page in
<input type=button id=b1 value='Add'>

Adding Click event to a button

Most common requirment is Click event of a button.

Here is the source of above script

$(document).ready(function() {
alert('Hi , you clicked the button');

Reading which button is clicked from a group of buttons .

We can have a group of buttons with different ID and same class. We will execute a common code when any one of the button is clicked. This common code will display the id of the button which is clicked.

<button  id=new_one1 class=my_button>My Button 1</button> <button  id=new_one2 class=my_button>My Button 2</button> <button  id=new_one3 class=my_button>My Button 3</button>

<script> $(document).ready(function() { $(".my_button").click(function(){ var str=this.id; alert('Hi , you clicked one of the button with id= ' + str); }) }) </script>

Enable or disable a button

We can enable or disable any button by changing its prop attribute like this.

Source code is here
<button id=b1>Disable Button</button>
<button id=b2>Enable Button</button>

<button id=b3>My Button</button>
$(document).ready(function() {




Reading the status of the button

We can read the status of the button ( disabled or enabled ) by using .prop
Here is the code.
alert($('#b3' ).prop( 'disabled' ));
Above code will return true or false based on the status of the button.

Reading value ( or label ) of the button

Code is here
<button  id=new_one12 class=my_button1 value='my_button_12'>My Button 12</button> <button  id=new_one22 class=my_button1 value='my_button_22'>My Button 22</button> <button  id=new_one32 class=my_button1 value='my_button_32'>My Button 32</button>
$(document).ready(function() {
var str=$(this).attr("value");
alert('You clicked one of the button with value = ' + str);

Changing text or value of a button

Depending upon type of button used, here is the code.
<input type='button' value='Click to Update' id='b_update'>

<button type='button' class='btn btn-warning' id=b_update2>Click to Change </button>
$(document).ready(function() {

$("#b_update").prop('value', 'I am UPDATED');

$("#b_update2").html('I am CHANGED');


Bootstrap Button Design

<button type='button' class='btn btn-default btn-md ' id='b1'>Dafault</button>
<button type='button' class='btn btn-lg ' id='b1'>Basic</button>
<button type='button' class='btn btn-primary' id='b1'>Primary</button>

We can add other classes like secondary ( bootstrap 4 ) , success, info, warning, danger, link to our button.

class='btn btn-succcess'
<button type='button' class='btn btn-succcess' id='b1'>sucess</button>

class='btn btn-info'
<button type='button' class='btn btn-info' id='b1'>info</button>

class='btn btn-warning'
<button type='button' class='btn btn-warning' id='b1'>warning</button>

class='btn btn-danger'
<button type='button' class='btn btn-danger' id='b1'>danger</button>

Changing size of the button
We can add different classes to change the size of the button

<button type='button' class='btn btn-success btn-lg'>Large</button>

Block level buttons

Uses the full available width of the parent object.
<button type='button' class='btn btn-info btn-lg btn-block'>Block level button</button>

Subscribe to our mailing list

* indicates required
Subscribe to plus2net
Visitors Rating
Your Rating


Post Comment This is for short comments only. Use the forum for more discussions.

Subscribe to our mailing list

* indicates required
Subscribe to plus2net

Most Popular JQuery Scripts


Two dependant list boxes


Calendar with Date Selection


Data change by Slider


Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2017 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer