How to have ASP.NET Button execute jQuery code

Question

I have jquery code on cc.js that I need to execute when an asp.net button is clicked.

The code on cc.js has a variable called settings and then submits these settings to an API (POST action) with the following code:

'Transaction Submit'
 $.ajax(settings).done(function (response) {
    console.log(response);
});

Basically I need this button <asp:Button ID="BtnSubmit" runat="server" Text="Submit" /> to execute that jquery code. How can I do so?

you can't, however the html that will be generated by the button can be hooked into a jquery event in the normal way — DavidB
– DavidB, Commented Dec 6, 2019 at 14:58

Travis Acton · Accepted Answer · 2019-12-06 15:05:07Z

5

You are looking for the OnClientClick property

<asp:Button ID="BtnSubmit" runat="server" OnClientClick="JSFunctionName(); return false;" Text="Submit" />

You will need to add the additional return false statement to prevent a post back from occurring if you button element is located inside a form.

This is assuming you want to decouple your front end html from your js code by using an inline call. If that is not the case then you mod your cc.js to autobind on the element as others have mentioned. One thing they left out is that in that process is that IF you button is inside a form then you need to prevent the auto-post back like so:

$(document).ready(function() {

  $("#BtnSubmit").click(function(){
    JSFunctionName();
    e.preventDefault();
  });

});

edited Dec 6, 2019 at 15:05

answered Dec 6, 2019 at 14:57

Travis Acton

4,4502 gold badges22 silver badges31 bronze badges

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

3 Comments

Ayo Over a year ago

Thank you! The form submits twice in $(document).ready(function(). If I take the click function out of that, it submits once as desired. Is there a reason I should or shouldn't have it within document ready?

Travis Acton Over a year ago

Well, when you bind in document ready, you are deferring action until your entire dom tree is loaded. So its usefulness really comes into play depending on where you js file is loaded. Html is loaded top to bottom. Let's say you have your js script tags in the header like your css file. The element your binding wouldn't exist at the time of binding call (bc top to bottom loading). Putting binding in the ready function basically tells it to load the dom structure first THEN try to bind. If you js file is included at the bottom then no worries since element would exists already at binding time.

Travis Acton Over a year ago

Bizarre on why it fires twice, don't have the full picture of what you are doing to tell at this point. One thing to note with the above code is that make sure you are using one or the other, not both (inline js call AND jquery binding) or else it would fire twice.

MikNiller · Accepted Answer · 2019-12-06 14:56:12Z

2

If the ID of the button is BtnSubmit, then you should be able to add a event handler like this.

$(document).ready(function() {

    $("#BtnSubmit").click(function(){
      alert("button clicked - do stuff here.");
    });
});

change the alert("button clicked - do stuff here."); to your ajax request code.

answered Dec 6, 2019 at 14:56

MikNiller

1,27011 silver badges17 bronze badges

Comments

Rohan Rao · Accepted Answer · 2019-12-06 14:57:42Z

2

You can write the following code to create an event on Button click to call the jquery method..

Basically, you take the ID by $("#btnSubmit") and on its click event write your Ajax function.

$("#BtnSubmit).on('click',function() {

// your ajax code here

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<asp:Button ID="BtnSubmit" runat="server" Text="Submit" />

Hope this helps.

answered Dec 6, 2019 at 14:57

Rohan Rao

2,6413 gold badges24 silver badges40 bronze badges

Comments

Osman · Accepted Answer · 2019-12-06 15:10:20Z

1

Just Add a click event with your button id using jquery..

$("#BtnSubmit").on('click',function(){
    console.log('success...');
  //ajax call here...
});

answered Dec 6, 2019 at 15:10

Osman

1,5502 gold badges18 silver badges41 bronze badges

Comments

Lucas Elmore · Accepted Answer · 2019-12-06 15:13:26Z

1

You can use Ajax within JS functions. I'm not sure what version of .NET you're using, but I'll answer with what I know for MVC 5. Here's how I would do it:

HTML

<button id="SubmitBtn">Submit</button>

JS(JQuery)

$('#SubmitBtn').on('click', function () {
   //Transaction Submit
   $.ajax({
      type: "POST",
      url: '/ProjectName/Controller/Method',
      data: { methodParameter1: data1, methodParameter2: data2 },
      success: function (data) {
         //do whatever
      }
      error: function (response) {
         //do whatever
      }
   });
});

answered Dec 6, 2019 at 15:13

Lucas Elmore

111 bronze badge

Collectives™ on Stack Overflow

How to have ASP.NET Button execute jQuery code

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related