Question

We have form tags like below in our HTML pages:

<form method= POST action=https://mysite_1.com> 
<input type=hidden name=XXXX value=yyyyyy> 
<input type=hidden name=YYYY value=zzzzz>
<input type=submit name=NNNN value=aaaaa> 
</form>

<form method= POST action=https://mysite_2.com> 
<input type=hidden name=PPPP value=kkkkk> 
<input type=hidden name=MMMM value=lllll>
<input type=submit name=FFFF value=jjjjj> 
</form>

There can be multiple such form and action within the HTML page. I need to find all input and action values at form level when a submit action is made?

The problem I am facing is to detect which “submit” button of which “form” and its “action” value at form level in the page?

Answer 1

One approach is to use a specified form submission-handling function, which can retrieve the attributes from whichever element is being submitted:

function submission(form, e){
    e = e || window.event;
    e.preventDefault();
    var formAction = form.action,
        formMethod = form.method;
    console.log(formAction, formMethod);
}

var forms = document.getElementsByTagName('form');

for (var i=0, len=forms.length; i<len; i++){
    forms[i].onsubmit = function(e){
        submission(this, e);
    };
}

JS Fiddle demo.

The above is a slightly-outdated approach, the better alternative uses addEventListener() (or attachEvent (IE), but without IE to test I can only offer addEventListener():

var forms = document.getElementsByTagName('form');

for (var i=0, len=forms.length; i<len; i++){
    forms[i].addEventListener('submit', function(e){
        submission(this, e);
    });
}

JS Fiddle demo.