CODEWITHSUNDEEP
javascriptevent-handlingevent-listener
cafekaze
cafekaze

Reputation: 377

stopPropagation() on submit not working

I'm having trouble with stopping the propagation of a submit inside a form. It appears that no matter where I click within the webpage an event is fired - how can it be fixed to only fire upon clicking the submit button?

document.addEventListener('DOMContentLoaded', bindButtons);

function bindButtons() {
    var buttons = document.getElementsByTagName('submit');

    Array.prototype.forEach.call(buttons, addEventListener('click', function(event) {
        var req = new XMLHttpRequest();
        req.open("GET", url, true);

        req.addEventListener('load', function(event) {
             // do stuff
        })

        event.preventDefault();
        event.stopPropagation();

        req.send(null);    
    }))
}

Upvotes: 1

Views: 829

Answers (2)

Aidan Hoolachan
Aidan Hoolachan

Reputation: 2379

Submit is not a valid tag, you can find your submit buttons with the following code:

var submitButtons = document.getElementByTagNames('button').filter(button => button.getAttribute('type') === 'submit');

or, more verbose:

var submitButtons = document.getElementByTagNames('button').filter(function(button){ 
    return (button.getAttribute('type') === 'submit')
);

Upvotes: 1

cafekaze
cafekaze

Reputation: 377

Added each submit to the same class then stored those in an array using getElementsByClass() and iterated over that.

Upvotes: 0

Related Questions