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

<script>
$(document).ready(function() {
$('#new_one').click(function(){
alert('Hi , you clicked the button');
})
})
</script>

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.
$("#b3").prop('disabled',true);



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

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

$("#b1").click(function(){
$("#b3").prop('disabled',true);
})

$("#b2").click(function(){
$("#b3").prop('disabled',false);
})

})
</script>

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>
 
<script>
$(document).ready(function() {
$(".my_button1").click(function(){
var str=$(this).attr("value");
alert('You clicked one of the button with value = ' + str);
})
})
</script>
Visitors Rating
Your Rating


Google+

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







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

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