Change form's onsubmit function

Question

I want to perform validation before any other onsubmit actions. Unfortunately, I have no control over the value of the onsubmit attribute on the form. So for example:

<form id="myForm" onsubmit="return stuffICantChange()"></form>

I've tried the following code, and several other methods, with no luck:

$("#myForm").onsubmit = function() {
    console.log("hi");
}

Any help is appreciated, thanks.

If this is a duplicate, please let me know before marking it as such so that I can refute the claim if necessary.

EDIT:

My code as requested:

<form id="form_ContactUs1" name="form" method="post" action="index.php" onsubmit="return  Validator1(this) &amp;&amp; ajaxFormSubmit(this); return false">
<div class="form">

    <div class="form-staticText">
        <p>We look forward to hearing from you! Please fill out the form below and we will get back with you as soon as possible.</p>
    </div>


    <div class="form-group">
        <input class="form-control" placeholder="Name" id="IDFormField1_Name_0" name="formField_Name" value="" size="25" required="" type="text">
        <span class="form-control-feedback"></span>
    </div>


    <div class="form-group">
        <input class="form-control" placeholder="Email" id="IDFormField1_Email_0" name="formField_Email" value="" size="25" required="" type="email">
        <span class="form-control-feedback"></span>
    </div>


    <div class="form-group">
        <input class="form-control bfh-phone" data-format="ddd ddd-dddd" placeholder="Phone" id="IDFormField1_Phone_0" name="formField_Phone" value="" size="25" type="tel">
        <span class="form-control-feedback"></span>
    </div>


    <div class="form-group">
        <textarea class="form-control" placeholder="Comments" name="formField_Comments" id="IDFormField1_Comments_0" cols="60" rows="5" required=""></textarea>
        <span class="form-control-feedback"></span>
    </div>



    <div class="row submit-section">

        <input name="submit" class="btn btn-success submit-button" value="Submit" type="submit">
    </div>
</div>

$( "form" ).each(function() {

    console.log( $(this)[0] );
    sCurrentOnSubmit = $(this)[0].onsubmit;
    $(this)[0].onsubmit = null;
    console.log( $(this)[0] );

    $( this )[0].onsubmit( function() {
        console.log( 'test' );

    });

});

it may help you http://stackoverflow.com/questions/16262797/html-form-action-and-onsubmit-issues — Suraj Rawat, Dec 16 '15 at 20:31
The one that is being called is the one in the onsubmit="...", but I'm trying to override this. — Nathan Robb, Dec 16 '15 at 20:38

score 0 · Answer 1 · answered Dec 16 '15 at 20:36

0

You should be able to add unobtrusively another onsubmit function to #myForm, in addition to the function which already executes:

function myFunction() {
    ...
}

var myForm = document.getElementById('myForm');
myForm.addEventListener('submit',myFunction,false);

answered Dec 16 '15 at 20:36

Rounin

27,134
9
83
108

I am trying to add my function to be run before the first – Nathan Robb Dec 16 '15 at 20:39
Do you need the other function `stuffICantChange()` to still run? If not, can you perhaps overwrite it with a blank function? Even if you do, can you save it as another function, then overwrite it with a blank function, then add the functions in the correct order, using addEventListener? – Rounin Dec 16 '15 at 20:46
I wish I could do that, however, the name of the function is unpredictable – Nathan Robb Dec 16 '15 at 21:02

score 0 · Answer 2 · answered Dec 16 '15 at 20:43

0

Try

$("#myForm").submit(function(){
   .. Your stuff..
   console.log("submit");
   return false;
});

This will trigger everytime the form is submitted then the end return false stops the forms default actions from continuing.

answered Dec 16 '15 at 20:43

MasterT

623
1
9
23

That will run after the onsubmit="..." in the DOM though, this needs to happen before. – Nathan Robb Dec 16 '15 at 20:44

score 0 · Answer 3 · answered Dec 16 '15 at 21:02

0

Try this, it is plain Javascript:

function overrideFunction(){
  console.log('Overrided!');
}
var form;
form = document.querySelector('#myForm');
form.setAttribute('onsubmit','overrideFunction()');

Regards.

answered Dec 16 '15 at 21:02

salc2

577
5
14

I think maybe the problem is the way the DOM is loaded.. why don't you try put – salc2 Dec 17 '15 at 01:39
My script is in the , but i only run my logic on `$( document ).ready();` – Nathan Robb Dec 17 '15 at 14:03

user3379167 · Answer 4 · 2015-12-16T22:23:32.950

0

You should trigger a change event on every field in the form to check on validation.

$('input').on('change', function(e) {
   if($(this).val() == '') {
        console.log('empty');
   } 
});

This wil help the user mutch faster then waiting for the submit.

You could also try a click event before the submit.

$('#formsubmitbutton').on('click', function(e) {
   //your before submit logic

   $('#form').trigger('customSubmit'); 
});

$('#form').on('customSubmit', function(e) {
  //your normal submit
});

edited Dec 16 '15 at 22:23

answered Dec 16 '15 at 21:09

user3379167

127
2
7

I already do that, however, I would like to re-validate the whole form during submition – Nathan Robb Dec 16 '15 at 21:56
I like the approach, however, I cannot always guarantee that a form will have a submit button, or that all buttons in the forms or for submission. – Nathan Robb Dec 17 '15 at 14:00

score 0 · Answer 5 · edited Oct 31 '18 at 03:33

0

Try this code:

$("#myForm").on('submit',function() {
    console.log("hi");
});

edited Oct 31 '18 at 03:33

Jack Bashford

43,180
11
50
79

answered Oct 30 '18 at 23:57

YakovGdl35

331
3
4

score 0 · Answer 6 · answered Feb 23 '22 at 03:02

Stumbling across this post and putting together other javascript ways to modify html, I thought I would add this to the pile as what I consider a simpler solution that's more straight forward.

document.getElementById("yourFormID").setAttribute("onsubmit", "yourFunction('text','" + Variable + "');");

<form id="yourFormID" onsubmit="">
  ....
 </form>

Change form's onsubmit function

6 Answers6