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 of 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);
Visitors Rating
Your Rating


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

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