Managing buttons by JQuery

Buttons are used frequently for user interaction in a web page.
Bootstrap 4 Buttons
<button  id=new_one name=button1>My Button</button>

  • Video Tutorial on Buttons


Adding Click event to a button

<input type=button id=b1 value='Add'>
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>
Create your own button by using Code generator

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.

Application using button

One button can be used to send the user entered text from a textarea. This button will remain in disable state till the user completes entering some minimum number of text inside the textarea.
Textarea with minimum length of data to enable Sumbit 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>

Showing Server date and time on button

Single button with updated value and Text

Click this button to toggle the text.
$("#b1_close_open").click(function(){
var str=$(this).attr("value");
if(str=='Close All'){
$("#b1_close_open").prop('value', 'Open All');
$("#b1_close_open").html('Open All');
//$( "#my_tabs" ).tabs( "option", "active", false );
}else{
$("#b1_close_open").prop('value', 'Close All');
$("#b1_close_open").html('Close All');
//$( "#my_tabs" ).tabs( "option", "active", true );
}
})

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>
Create your own button by using Code generator
Managing textbox Listbox & JQuery

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    Mohammd Naeem

    02-11-2017

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

    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 your comments , suggestion , error , requirements etc here .







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    Show & Hide element


    JQuery Video Tutorials




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer