Button click not working in javascript

Question

I'm trying to do a click in a html button through javascript, but I can't make it work.

This is the button I'm trying to click with javascript (it works when I click it)

<button id="btnClean" runat="server" type="button" class="btn btn-warning btn-cons m-b-10" onserverclick="btnClean_Click">
    <i class="fa fa-trash-o"></i>
    <span class="bold m-l-3">Limpar</span>
 </button>

This is the button that calls the javascript function:

<button id="btnCreateOS" type="button" class="btn btn-success btn-cons m-b-10" onclick="Clean();">
    <i class="fa fa-save"></i>
    <span class="bold m-l-3">Criar</span>
</button>

And this is my javascript (it is located under <form> tag in my .aspx page):

<script type="text/javascript">        

    function Clean() {

        document.getElementById("btnClean").click();

    }

</script>

And finally, this is the asp method:

public void btnClean_Click(object sender, EventArgs e)
{
   CleanFields();
}

Any ideas what I'm doing wrong?

When you debug this, where/how specifically does it fail? Are there any errors client-side or server-side? Is the client-side function invoked? Is the second button found by its id? Is the post-back invoked? — David
– David, Commented Nov 30, 2016 at 11:36
document.getElementById("btnClean").click(); will call client event of button — Mairaj Ahmad
– Mairaj Ahmad, Commented Nov 30, 2016 at 11:37
@ZakariaAcharki got this error in console: Cannot read property 'click' of null at at HTMLButtonElement.onclick. — gregoryp
– gregoryp, Commented Nov 30, 2016 at 11:38

Ram Singh · Accepted Answer · 2016-11-30 12:03:03Z

2

Bsically what happens, when you are using master and content page then it always changes its id according to it default behavior.

function Clean() {
        //document.getElementById("btnClean").click()

        document.getElementById('<%= btnClean.ClientID %>').click();
    }

Another solution you just add ClientIdMode="Static".

<button id="btnClean" runat="server" clientidmode="Static" type="button" class="btn btn-warning btn-cons m-b-10" onserverclick="btnClean_Click">
        <i class="fa fa-trash-o"></i>
        <span class="bold m-l-3">Limpar</span>
    </button>

in your button..

Then your current javascript code will also work..

function Clean() {
        document.getElementById("btnClean").click();

        //document.getElementById('<%= btnClean.ClientID %>').click();
    }

edited Nov 30, 2016 at 12:03

answered Nov 30, 2016 at 11:46

Ram Singh

6,97235 gold badges107 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gregoryp Over a year ago

Nice!!! Thank you so much for this! And thank you for your explanation too.

Martin P. · Accepted Answer · 2016-11-30 11:42:25Z

0

You should use

document.getElementById("btnClean").trigger("click");

instead, because it's faster. Maybe you should also try to prevent default behaviour in btnClear_Click? Try to add a console.log("a") (or rather "b" at the second) to your two functions, to see, if and which of the two functions are running.

answered Nov 30, 2016 at 11:42

Martin P.

2922 silver badges11 bronze badges

2 Comments

gregoryp Over a year ago

Got the same error in console: Uncaught TypeError: Cannot read property 'trigger' of null(…)

ADyson Over a year ago

1) .trigger is a jQuery method, not native javascript. 2) Even if this worked, it would be semantically the same as OP's existing call to click(). 3) even if this worked, it would only trigger the client-side event of btnClean, which the button doesn't have - it has a server-side event which the OP is trying to call.

Collectives™ on Stack Overflow

Button click not working in javascript

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related