Remove 'onclick' command from a child of a div

Question

I am working on a website where I have a main div . I wanted all of the div 's page-area to act as a link (clicking on it will cause a submitting of a form and moving to another page) so I added to that div the attribute:

<div class="box1" onclick="javascript:document.forms['womenForm'].submit();" ...>

Everything in this area shuold link to the next page apart from an HTML selection that is inside this div, but should be clickable without moving to the next page.

How can I cause this to happen? I tried to wrap the selected element with a div, giving it href="" or onclick="" but still the form is submitted.

Can anybody resolve this?

Answer 1

You need to stop the bubbling of the event up the hierarchy ...

using the onclick attribute you can do this with

onclick="event.cancelBubble=true;if(event.stopPropagation) event.stopPropagation();return false;" on the select element.

Answer 2

First, the javascript: pseudo-protocol is superfluous in your code because you're using the "onclick" attribute.

I suggest moving away from inline JavaScript and venturing into the more acceptable unobtrusive JavaScript world.

Anyway, what you want to do is check that the event was not fired on a <select> element. With unobtrusive JS that would go something like this:

someElement.onclick = function(e) {
    var target = e ? e.target : event.srcElement;
    if (!/option|select/i.test(target.nodeName)) {
        // do stuff.
    }
};