How to check if a button has been clicked using javascript?

Question

Here i need to check a button click using javascript i.e)if button A is clicked i will call a javascript function and if button B is clicked i will call another javascript function.

if(document.getElementById('imgBTNExportPPT').clicked == true)
{
   ShowDialogExportPPTPOPUP();
}
else if(document.getElementById('btnShowModal').clicked == true)
{
   ShowDialogPrintPOPUP();
}

and

      <asp:ImageButton ID="imgBTNExportPPT" runat="server" Width="15" Height="15" border="0"
                                                            OnClick="imgBTNExportPPT_Click" ImageUrl="~/Images/PPT_icon.png" />
  <asp:ImageButton ID="btnShowModal" runat="server" Width="15" Height="15" border="0"
                                                         ImageUrl="~/Images/Print_icon.png" onclick="btnShowModal_Click"  />

is it possible??any suggestion??

Possible duplicate: http://stackoverflow.com/questions/2788191/is-there-a-way-to-use-javascript-to-check-if-a-button-has-been-clicked — Sayan, Nov 02 '12 at 04:56

Ravi Jain · Accepted Answer · 2012-06-28T11:18:31.457

Try this :

function buttonClicked(choice)
{
   if(choice == 'A')
   {
      ShowDialogExportPPTPOPUP();
   }
   else if(choice ==  'B')
   {
      ShowDialogPrintPOPUP();
   }
}

HTML code should be like this :

<input type='button' value='ButtonA' onclick="buttonClicked('A')" />
<input type='button' value='ButtonB' onclick="buttonClicked('B')" />

If it's a server side control then you can do it in two ways :

  <asp:ImageButton onClientClick="buttonClicked('A')" ID="imgBTNExportPPT" runat="server" Width="15" Height="15" border="0"
                                                            OnClick="imgBTNExportPPT_Click" ImageUrl="~/Images/PPT_icon.png" />
  <asp:ImageButton onClientClick="buttonClicked('A')" ID="btnShowModal" runat="server" Width="15" Height="15" border="0"
                                                         ImageUrl="~/Images/Print_icon.png" onclick="btnShowModal_Click"  />

OR (in C#)

{
 imgBTNExportPPT.Attributes.Add("onclick", "buttonClicked('A')");
 btnShowModal.Attributes.Add("onclick", "buttonClicked('B')");
}

http://msdn.microsoft.com/en-us/library/7a9d6h4f(v=vs.80).aspx

:its an asp button control then i have to call this one in onclientclick?? — Rooney, Jun 28 '12 at 11:06

score 3 · Answer 2 · answered Jun 28 '12 at 11:11

You have to use OnClientClick attribute of ImageButton to assign javascript function. You can pass this in javascript call to get the button object being clicked.

OnClientClick="TestClick('A', this);" add this in button

In .aspx Page

<asp:ImageButton OnClientClick="TestClick('A', this);" ID="imgBTNExportPPT" runat="server" Width="15" Height="15" border="0"                                                                  OnClick="imgBTNExportPPT_Click" ImageUrl="~/Images/PPT_icon.png"  />

<asp:ImageButton OnClientClick="TestClick('B', this);" ID="btnShowModal" runat="server" Width="15" Height="15" border="0"
                                                                 ImageUrl="~/Images/Print_icon.png" onclick="btnShowModal_Click"  />

In Script

function TestClick(choice, btnClicked)
{
   alert(btnClicked.id + " clicked");
   if(choice == 'A')
   {
      ShowDialogExportPPTPOPUP();
   }
   else if(choice ==  'B')
   {
      ShowDialogPrintPOPUP();
   }
}

score 2 · Answer 3 · answered Jun 28 '12 at 11:08

You could add an identifier or just call a function in the onclick event. For example:

<script type="text/javascript">
    function onButtonClick(button)
    { 
        alert("button " + button + " clicked!"); 
    }
</script>

<button id="ButtonA" onclick="javascript:onButtonClick('buttonA'); return false;" />
<button id="ButtonB" onclick="javascript:onButtonClick('buttonB'); return false;" />

score 2 · Answer 4 · answered Jun 28 '12 at 11:18

Here is a good example. Transfer your code as the callback to runOnce and create an onclick event handler like the one below to restrict your function to one call:

function runOnce( callback ) {

  var done = false;

  return function() {

    if ( !done ) {
      done = true;

      callback();

    }

  };

}

var one = runOnce(function() {
    alert('Once');
}),
    two = runOnce(function() {
    alert('Once only too.');
});

document.getElementById('first').onclick = one;
document.getElementById('second').onclick = two;

Here is a DEMO

How to check if a button has been clicked using javascript?

4 Answers4

Related