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

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

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();
});

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>

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!");
});
}

Related

How to trigger popup when browser tab closes in ReactJS?

I have a enrollment form with some customer related information. If user form is half filled and the user is going to close the tab, then I'll trigger the popup with option of save and exit, exit.
I have some jQuery solution. But nowadays it's not working in all browsers.
Jquery sample Code:
'use strict';
$(document).ready(function() {
$.fn.addEvent = function (obj, evType, fn) {
if (obj.addEventListener) {
obj.addEventListener(evType, fn, false);
return true;
} else if (obj.attachEvent) {
var r = obj.attachEvent('on'+evType, fn);
return r;
} else {
return false;
}
};
$.fn.KeepOnPage = function (e) {
var doWarn = 1;
if (!e) {
e = window.event;
}
if (!e) {
return;
}
if (doWarn == 1) { // and condition whatever you want to add here
e.cancelBubble = true;
e.returnValue = 'Warning!\n\nNavigating away from this page will delete your text if you haven\'t already saved it.';
}
if (e.stopPropagation) {
e.stopPropagation();
}
};
$.fn.addEvent(window, 'beforeunload', $.fn.KeepOnPage);
});
But we need solution in ReactJS. Is there any React library for the browser unload?
Thanks,
Thangadurai
You can add and remove an event listener for the 'beforeunload' event within your componentDidMount and componentWillUnmount lifecycle functions.
https://facebook.github.io/react/docs/component-specs.html
https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
Example:
...
componentDidMount() {
window.addEventListener('beforeunload', this.keepOnPage);
}
componentWillUnmount() {
window.removeEventListener('beforeunload', this.keepOnPage);
}
keepOnPage(e) {
var message = 'Warning!\n\nNavigating away from this page will delete your text if you haven\'t already saved it.';
e.returnValue = message;
return message;
}
....

How to prevent people from dropping in non-droppable elements?

I am implementing drag and drop this way.
<?php echo $this->Html->script('modernizr/2.5.3/modernizr.min.js', array('block' => 'scriptTop')); ?>
$(document).ready(function () {
dropArea = document.getElementById("droparea");
dropArea.addEventListener("dragleave", function (evt) {
var target = evt.target;
if (target && target === dropArea) {
this.className = "";
}
dropArea.className = "";
evt.preventDefault();
evt.stopPropagation();
}, false);
dropArea.addEventListener("dragenter", function (evt) {
this.className = "over";
evt.preventDefault();
evt.stopPropagation();
}, false);
dropArea.addEventListener("dragover", function (evt) {
evt.preventDefault();
evt.stopPropagation();
}, false);
// this is the initial add-drop
dropArea.addEventListener("drop", function (evt) {
doStuff();
this.className = "";
evt.preventDefault();
evt.stopPropagation();
}, false);
}
There are times when my users dropped stuff NOT into #droparea.
I want to prevent them from doing that.
What should I do?
You need to add a noop dragover and drop handler for your document. This will prevent the default browser behavior of replacing current page with dropped file.
See here for a demo
// Handle dropping on non-droparea
document.addEventListener("drop", cancelEvent, false);
document.addEventListener("dragover", cancelEvent, false);
function cancelEvent(evt) {
evt.preventDefault();
evt.stopPropagation();
}
You need to restrict the drop area so that it can be dropped to only required one.
Update the drop event handler as :
dropArea.addEventListener("drop",function(evt){
//default cancel
evt.preventDefault();
evt.stopPropagation();
},true);
Note: parameter "true" is applied.
Refer to the link for more details.
You may refer to demo here

How to Disable the Mouse wheel click Button?

I'm trying to find a way of disabling the default action of the mouse wheel button which is to open the link in a new tab.
Is that possible?
Bind a generic click event handler that specifically checks for middle clicks. Within that event handler, call e.preventDefault():
$("#foo").on('click', function(e) {
if( e.which == 2 ) {
e.preventDefault();
}
});
Note that not all browsers support preventing this default action. For me, it only works in Chrome. Firefox, Opera and IE9 all do not raise the click event with middle mouse click. They do raise mouseup and mousedown.
This works for me...
$(document).on("mousedown", "selector", function (ev) {
if (ev.which == 2) {
ev.preventDefault();
alert("middle button");
return false;
}
});
My code:
$(document).on('auxclick', 'a', function(e) {
if (e.which === 2) { //middle Click
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
return true;
Disable mouse wheel event by using JAVASCRIPT :
In IE:
document.attachEvent('onmousewheel', function(e){
if (!e) var e = window.event;
e.returnValue = false;
e.cancelBubble = true;
return false;
}, false);
In Safari:
document.addEventListener('mousewheel', function(e){
e.stopPropagation();
e.preventDefault();
e.cancelBubble = false;
return false;
}, false);
In Opera:
document.attachEvent('mousewheel', function(e){
if (!e) var e = window.event;
e.returnValue = false;
e.cancelBubble = true;
return false;
}, false);
In Firefox:
document.addEventListener('DOMMouseScroll', function(e){
e.stopPropagation();
e.preventDefault();
e.cancelBubble = false;
return false;
}, false);

How to hook into the page wide click event?

Just like the question states. I want to fire off an event that calls a method everytime the user clicks on the web page.
How do I do that without use of jQuery?
Without using jQuery, I think you could do it like this:
if (document.addEventListener) {
document.addEventListener('click',
function (event) {
// handle event here
},
false
);
} else if (document.attachEvent) {
document.attachEvent('onclick',
function (event) {
// handle event here
}
);
}
Here's one way to do it..
if (window.addEventListener)
{
window.addEventListener('click', function (evt)
{
//do something
}, false);
}
else if(window.attachEvent)
{
window.attachEvent('onclick', function (evt)
{
// do something (for IE)
});
}
$(document).click(function(){});
document.onclick = function() { alert("hello"); };
note that this will only allow for one such function though.

JavaScript preventDefault not working, neither does return false;

I've searched this question in Stack Overflow before posting it, but none of the posts found seem to work for me.
I have this:
function addEvent(elm, evType, fn) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, false);
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
}
else {
elm['on' + evType] = fn;
}
}
and I do this:
var el = document.getElementById('myLink');
addEvent(el, "click", function(event){
alert('testing');
if(event.preventDefault){
event.preventDefault;
}
if (event.stopPropagation) {
event.stopPropagation();
}
return false;
});
where myLink is:
Click me
but when I click the link, it doesn't stop the default event action. I've tested on IE, Firefox and Chrome, with no result.
Any ideas please?
There are a couple of errors in the code:
addEvent(el, "click", function(event){ // event will be undefined in IE
event = event || window.event; // fallback to window.event in IE
alert('testing');
if(event.preventDefault){
event.preventDefault(); // () was missing here
}
if (event.stopPropagation) {
event.stopPropagation();
}
return false;
});

Categories