How can I run jQuery script before form submit without using OnClientClick

Question

I have an ASP.Net WebForms application where I am using jQuery validation. There are several buttons to submit the form, each with different options on the back end.

I have a custom validateForm() function that I can assign to the OnClientClick event of all the buttons, but I'm hoping for a more elegant solution where I don't have to specifically give each button the OnClientClick property.

So basically, is it possible to capture the $(form).submit() event before an asp button is submitted? Without using the OnClientClick attribute?

Solved: My issue was actually not because I couldn't catch the submit, but because the buttons were <a> links instead of inputs. I didn't realize this and made the post while at home trying to fix it from memory.

Any of the below solutions should work in the scenario above with actual submit buttons

what ryan said. or you could attach 'click' listeners to individual buttons. `.on('click', ...)`. — wazz, Apr 16 '18 at 22:24

score 1 · Accepted Answer · answered Apr 16 '18 at 22:21

1

Just attach a listener to the submit event:

$('form').on('submit', function (event) {
    // Do whatever you need to do here ...
    // You could also do `event.preventDefault();`,
    // if you wanted to stop the submit.
});

answered Apr 16 '18 at 22:21

ryanpcmcquen

6,285
3
24
37

Last time I tried that it didn't work. I will try again tomorrow to be certain – MichaelM Apr 16 '18 at 22:54
@MickelsonMichael, is your code wrapped in `$(document).on('ready'`? – ryanpcmcquen Apr 17 '18 at 16:16
see my updated post. Turns out I was just forgetful and actually had a completely different problem. Thanks for your response! – MichaelM Apr 17 '18 at 21:14

ElasticCode · Answer 2 · 2018-04-16T23:14:26.790

-1

You can use onsubmit event that will execute a JavaScript when a form is submitted from any button.

<form id="form1" runat="server" onsubmit="return ValidationFunction();">

And your JS function should return true or false as

function ValidationFunction() {
    // Your jQuery validation
    if (isValide) {
        return true;
    }
    else {
        return false;
    }
}

Another option using JQuery to attaches an event handler to form submission

$(document).ready(function () { // << to make sure DOM is loaded
    $('#form1').on('submit', function (e) {

        e.preventDefault(); // << the default action of the event will not be triggered
        var isValide = false;

        if (isValide) {
            alert('ok');
            this.submit();
        }
        else {
            alert('Not Valid');
        }
    });
});

edited Apr 16 '18 at 23:14

answered Apr 16 '18 at 22:35

ElasticCode

7,311
2
34
45

It is considered a best practice to attach the event listener using JavaScript rather than an HTML attribute. – ryanpcmcquen Apr 16 '18 at 22:45
In this particular case I don't want to attach the function to the `form` itself – MichaelM Apr 16 '18 at 22:54
@ryanpcmcquen please share a reference – ElasticCode Apr 16 '18 at 22:56
@MickelsonMichael Check updated answer for another solution – ElasticCode Apr 16 '18 at 23:17
1

@WaelAbbas: https://stackoverflow.com/questions/6941483/onclick-vs-event-handler https://www.reddit.com/r/javascript/comments/3ymzdu/onclick_vs_getelementbyidclick_vs_event_listener/ It is all about separation of concerns. – ryanpcmcquen Apr 17 '18 at 16:19

How can I run jQuery script before form submit without using OnClientClick

2 Answers2