Intercept a Form Submit in JavaScript and Prevent Normal Submission

Intercept a form submit in JavaScript and prevent normal submission

<form id="my-form">
    <input type="text" name="in" value="some data" />
    <button type="submit">Go</button>
</form>

In JS:

function processForm(e) {
    if (e.preventDefault) e.preventDefault();

    /* do what you want with the form */

    // You must return false to prevent the default form behavior
    return false;
}

var form = document.getElementById('my-form');
if (form.attachEvent) {
    form.attachEvent("submit", processForm);
} else {
    form.addEventListener("submit", processForm);
}

Edit: in my opinion, this approach is better than setting the onSubmit attribute on the form since it maintains separation of mark-up and functionality. But that's just my two cents.

Edit2: Updated my example to include preventDefault()

React - Preventing Form Submission

I think it's first worth noting that without javascript (plain html), the form element submits when clicking either the <input type="submit" value="submit form"> or <button>submits form too</button>. In javascript you can prevent that by using an event handler and calling e.preventDefault() on button click, or form submit. e is the event object passed into the event handler. With react, the two relevant event handlers are available via the form as onSubmit, and the other on the button via onClick.

Example: http://jsbin.com/vowuley/edit?html,js,console,output

Intercepting a form submission in a Chrome content extension

You can catch your form with

var myForm = document.getElementsByName('myForm');

Which returns a nodeList (similar to Array). Then you can override the submit event in two ways:

myForm.onsubmit = function (evt) {...};

or

myForm.addEventListener('submit', function (evt) {...});

Be careful to only use lowercase letters for the event name. With the second example you can bind multiple listeners to the event but it isn't supported by older browsers (< IE 9).

Example:

html:

<form name="myForm" action="#" method="post">
    <input type="submit" value="Send">
</form>

js:

var myForm;

myForm = document.getElementsByName('myForm')[0];

myForm.onsubmit = function (evt) {
    // Do things here before passing on or stop the submit
};

Intercept a dynamic added form submission

Since You can't set events for non-existing elements You need to set events for element existing.

In this case you can use document to get the event.

http://jsfiddle.net/h189o3xc/

here is a sample code.

$(document).on("submit",function(e){
    if($(e.target).hasClass("formClass")){
        e.preventDefault();
        console.log("you can catch the event!");
        //and do whatever you want.
    }
});

set a event for document and whenever any submit event happens, check whether it's your target form or not. then do whatever you want if it's your target form.

EDITED
as @charlietfl mentioned,You can use extra on function's parameter instead of if statement.

the code would be something like..

$(document).on("submit",".formClass",function(e){
      e.preventDefault();
      console.log("you can catch the event!");
      //and do whatever you want.
}); 

http://jsfiddle.net/h189o3xc/2/

Submit a form only when 'enter' key is pressed

It might be helpful to trigger the function inside the tag from the parent. Like this

<form id="myform" onsubmit="event.preventDefault()">
    <input type='text' id='input' onkeyup="keypressHandler(event)" />
</form>
<script>
    function keypressHandler(e) {
        if(e.keyCode == 13)
           myform.submit();
    }
</script>

How to disable button while form is being created and to prevent duplicate form

Adding the following bits of code at strategic locations of the script that handle operations during and after the submit button is clicked helped create the desired effect.

beforeSubmit: function (submission, next) {
    const btns = document.querySelectorAll('.btn');

    for (const btn of btns) {
        btn.disabled = true;
    }

    $this.isSubmitting = true;
    console.log("button disabled");


if (submits) {
    _.each(submits, function (component) {                                                                               
        console.log("renabled");

        for (const btn of btns) {
        btn.disabled = false;
        }

        $this.isSubmitting = false;
        console.log("button renabled");
    });
}

However this was disabling and enabling every single button on the page. Ultimately the following jquery method was used because it specifically targets the submit buttons only.

if (submits) {
    _.each(submits, function (component) {
        $("#" + component.id + " > button").prop('disabled', true);
    });
}

window.axios.post($this.baseUri + '/validate',
    submission.data)
    .then(function (d) {
        next();
    })

    .catch(function (e) {
        var message = "Validation Failed:";
        $this.isSubmitting = false;

        if (submits) {
            _.each(submits, function (component) {
                $("#" + component.id + " > button").prop('disabled', false);                                
        });

Also wanted to note that after the submit button is clicked, the page reroutes to a summary page to prevent the submit button from being clicked again.

---

Related Topics