JavaScript division on click trigger any given predefined event [CROSS BROWSER COMPATIBILITY]

Question

I have a form and an internal division:

<form action="#" name="form" id="identification_form" class="classification_form">
     <div name="division" id="identification_division" class="classification_division">
     </div>
</form>

JavaScript manipulating with events:

document.getElementById('identification_division').onClick = function(event){
     document.getElementById('identification_form').submit(); //does NOT trigger element.onsubmit event
}
document.getElementById('identification_form').onSubmit = function(event){
     alert("submitted!")
}

The form successfully submits but does not call the event

The element.onsubmit event only works when using a submit button inside the form and manually clicking the button (or pressing enter while in focus of another input element)

How can i make element.onClick call the the onSubmit function?

when using element.onSubmit i get an undefined error in the browser console.

My current solution:

function submition(event){
     alert("submitted");
}
document.getElementById('identification_division').onClick = function(event){
     submition(event || null);
     document.getElementById('identification_form').submit();
}
document.getElementById('identification_form').onSubmit = function(event){
     submition(event || null);
}

Note my current solution can cause a memory leak in early versions of Opera & Internet Explorer.

JQUERY is not an option

I decided to extract cascading style sheet for irrelevancy to the question. — , Nov 26 '14 at 21:31

score 1 · Answer 1 · edited May 23 '17 at 12:06

1

please use addEventListener or attachEvent (based on this post: MSIE and addEventListener Problem in Javascript?)

function bindEvent(el, eventName, eventHandler) 
{
  if (el.addEventListener)
  {
    el.addEventListener(eventName, eventHandler, false); 
  } 
  else if (el.attachEvent)
  {
    el.attachEvent('on'+eventName, eventHandler);
  }
}

bindEvent(document.getElementById('identification_division'), 'click', function () 
{
  document.getElementById('identification_form').submit();
});

edited May 23 '17 at 12:06

Community

1
1

answered Nov 26 '14 at 22:03

ymz

6,602
1
20
39

I am aware of the IE problem with events, you didn't seem to test your code or answer my query. you seemed to have misunderstood my query. – Nov 26 '14 at 22:55

Fiddles · Answer 2 · 2014-12-22T03:11:48.290

Calling .submit() does not trigger the onsubmit event. What you can do is trigger a submit event on the form.

Cross-browser compatible, including IE8 and below:

(function() {
    if (document.addEventListener) {                
        document.getElementById("identification_division").addEventListener("click", onClickFunction);
        document.getElementById('identification_form').addEventListener('submit', onSubmitFunction, false);
    } else if (document.attachEvent) {           
        document.getElementById("identification_division").attachEvent("onclick", onClickFunction);
        document.getElementById('identification_form').attachEvent("onsubmit", onSubmitFunction);
    }
    
    function onClickFunction(e) {
        alert("Clicked")
        fireOnSubmit(document.getElementById('identification_form'));
    }
    
    function onSubmitFunction(e) {
        alert("submitted!");
        if(e.preventDefault) e.preventDefault();
        else if(e.returnValue) e.returnValue = false;
        else return false;
    }
})();

function fireOnSubmit(element) {
    var e = null;
    if (document.createEventObject) {
        //ie
        e = document.createEventObject();                    
        element.fireEvent('onsubmit', e);
    } else {
        //others
        e = document.createEvent('HTMLEvents');
        e.initEvent('submit', true, true);
        element.dispatchEvent(e);
    }
}

<form action="#" name="form" id="identification_form" class="classification_form">
     <div name="division" id="identification_division" class="classification_division">
         Click me for a good time
     </div>
</form>

bada bing batta boom! i havent tested this but i am sure this will work! thanks, you gave me exatly what i was looking for new event. — , Nov 26 '14 at 22:57
I just realized this is not supported in IE. Any suggestions? — , Nov 27 '14 at 18:33
Yep, basically IE8 and below don't support `event.preventDefault()` and handle the firing of events a bit differently. I've made some edits above. — Fiddles, Nov 28 '14 at 00:47

score -1 · Accepted Answer · answered Nov 26 '14 at 22:27

try this:

if (document.addEventListener) {                

    document.getElementById("identification_division").addEventListener("click", function(e){
        document.getElementById('identification_form').submit();
    });

    document.getElementById('identification_form').addEventListener('submit', function (e) { 
        e.preventDefault(); 
        alert("submitted!");
    }, false);

} else if (document.attachEvent) {           

    document.attachEvent("onclick", function(e){
        document.getElementById('identification_form').submit();
    });

    document.attachEvent("onsubmit", function(e){
        e.preventDefault(); 
        alert("submitted!");
    });

}

While this does submit the form, it does not trigger the onsubmit event. — Fiddles, Dec 02 '14 at 04:49

JavaScript division on click trigger any given predefined event [CROSS BROWSER COMPATIBILITY]

The form successfully submits but does not call the event

3 Answers3