How to call a asp:Button OnClick event using JavaScript?

Question

I have a question, I have a button like below:

<asp:Button ID="savebtn" runat="server" OnClick="savebtn_Click" Visible="false" />

I then have HTML button like like below:

<button id="btnsave" onclick="fncsave">Save</button>

I have the javascript below:

<script type="text/javascript">
     function fncsave()
     {
        document.getElementById('<%= savebtn.OnClick %>').click()
     }
</script>

My question now is, how can I call the asp:Button OnClick from the HTML button? I have read you can do this by calling from JavaScript by Id but is not working.

Any help will be really appreciate it.

Thank you

could be a dupe... @Mortalus Is it cool to call the __doPostBack method? I've never done that in practice. — Glenn Ferrie, Mar 05 '13 at 04:13
I'm not sure as what you mean by "cool" when referring to a JavaScript method :) but yes you can use it. If you can emulate an actual client button click like one of the answers that would be simpler because sometimes you might want to do a partial post back and then the answer in the question i have posted won't work . — Mortalus, Mar 05 '13 at 05:06

score 30 · Accepted Answer · edited Apr 18 '17 at 06:21

30

Set style= "display:none;". By setting visible=false, it will not render button in the browser. Thus,client side script wont execute.

<asp:Button ID="savebtn" runat="server" OnClick="savebtn_Click" style="display:none" />

html markup should be

<button id="btnsave" onclick="fncsave()">Save</button>

Change javascript to

<script type="text/javascript">
     function fncsave()
     {
        document.getElementById('<%= savebtn.ClientID %>').click();
     }
</script>

edited Apr 18 '17 at 06:21

Chirag

994
2
11
26

answered Mar 05 '13 at 04:06

Sunny

4,765
5
37
72

The proper onclick would be `onclick="fncsave(); return false;"` – Eric Herlitz Mar 23 '14 at 22:24
1

Life saver. If I use `return false;` will it prevent a PostBack? – SearchForKnowledge Oct 07 '14 at 14:28

Glenn Ferrie · Answer 2 · 2015-05-12T13:26:08.880

6

If you're open to using jQuery:

<script type="text/javascript">
 function fncsave()
 {
    $('#<%= savebtn.ClientID %>').click();
 }
</script>

Also, if you are using .NET 4 or better you can make the ClientIDMode == static and simplify the code:

<script type="text/javascript">
 function fncsave()
 {
    $("#savebtn").click();
 }
</script>

Reference: MSDN Article for Control.ClientIDMode

edited May 12 '15 at 13:26

answered Mar 05 '13 at 04:12

Glenn Ferrie

10,290
3
42
73

my pleasure. Question. why not just use the ASP.NET button? – Glenn Ferrie Mar 05 '13 at 04:26
I'm using some CSS with jQuery and the ASP.NET is giving me a hard time to style it or make my design work. – jorame Mar 05 '13 at 04:31
That might be the subject for another post. HTML generated by .NET should operate no different that "plain old html" controls with respect to CSS – Glenn Ferrie Mar 05 '13 at 04:33
1

One more thing, using "static" clientIDMode might "lower the bar" regarding this CSS difficulty. – Glenn Ferrie Mar 05 '13 at 04:34
1

I've gone trough pretty much every answer about my issue around the web, but your line "Also, if you are using .NET 4 or better you can make the ClientIDMode == static and simplify the code:" Finally made all the difference!!!! – Иво Недев Sep 21 '15 at 10:47

How to call a asp:Button OnClick event using JavaScript?

2 Answers2

Linked