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

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>
<script>
$(document).ready(function() {

$("#b_update").click(function(){
$("#b_update").prop('value', 'I am UPDATED');
})

$("#b_update2").click(function(){
$("#b_update2").html('I am CHANGED');
})

})
</script>

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

btn-lg
btn-md
btn-sm
btn-xs
<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


Google+
Mohammd Naeem

02-11-2017

How to create button in html/javascript/php which is appeared since 11:00am to 11:59pm everyday.
subhendu

14-11-2017

You can use timer to read the time periodically and then manage to display or hide button. It is better to read clock from server side and set the duration as client clock can be changed.
Trigger the reading of server clock by a timer and once it is 11.00 AM then show the button, hide the same after 59 minutes.

Read the JavaScript clock and timer uses here JavaScript timer

Read the how the server time can be collected

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

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