الجمعة، 20 فبراير 2015

How to Click Button Using JavaScript?

Buttons on a web-page allows users to submit data or to do any action on it and generally the actions are performed by clicking on it. Different types of buttons are used on web-page and they may be inside a form or outside a form for certain action to be performed. Buttons used within a form may be Submit Button, Reset Button, Browse Button etc.

You can set the actions performed by submit and reset buttons on a form with in a <form> tag as below.

<form action="submitpage.html" onsubmit="return validate(this)"
onreset="return conform()" method="post">
<!--Other Form Elements-->
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

In the above code, when submit button was clicked it goes to the page "submitpage.html" after validating the form by the function validate() and when reset button was clicked it clears all the form data after displaying conformation box by the function conform().

It is easier to do any task on clicking event of a button by executing certain JavaScript functions when the button was clicked. There are different ways to execute JavaScript codes on button click. In this post I am going to describe about those different methods of clicking buttons using JavaScript.

Different Ways to Click Button Using JavaScript


You can click button using JavaScript with the different methods given below.

With directly specifying JavaScript Built-in function on onClick event of Button


<input type="button" value="Display Time" 
onClick="alert(new Date().toLocaleTimeString());">


Preview:


With creating a JavaScript function and specifying it on onClick event of Button as given on the previous post: "How to create Timer Using JavaScript?"


<script>

var c=0

var t

function timedCount()

{

document.getElementById('txt').value=c

c=c+1

t=setTimeout("timedCount()", 1000)

}

</script>

<input type="button" value="Start Count" onClick="timedCount()">

<input type="button" value="0" id="txt">

Preview:
 

With creating a JavaScript function along with specifying onClick event of Button


<script>

window.onload=function(){

var btn=document.getElementById('btn');

btn.onclick=function(){alert("You Have Clicked Button");}

};

</script>

<input type=button id='btn' value='click me'>

Preview:
 

With specifying single function for multiple buttons having same class name by using for loop on onClick event of button


<script>

window.onload=function(){

var btns=document.getElementsByClassName('bt');

for(var i=0; i<btns.length; i++){

var bt=btns[i];

bt.onclick=function(){alert("You Have Clicked Button");}

}

};

</script>

<input type=button class='bt' value='Button 1'>

<input type=button class='bt' value='Button 2'>

<input type=button class='bt' value='Button 3'>

Preview:
 

I have described here some methods of clicking buttons using JavaScript . If you know other more methods of clicking buttons using JavaScript, you are welcomed to mention on the comment session at the bottom this post.



Related Search Terms


Related Posts:

مرسلة بواسطة في
التسميات: ,

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)