Remove 'onclick' command from a child of a div

Question

I am working on a website which is available at:
http://www.rate-me-now.com

The "top 10 Most beautiful Women" box is represented by a div ("box1"). Since I wanted that all this page-area would act as a link that clicking on it will cause a submitting of a form and moving to another page, 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 aprat from an HTML select that is inside this box and should be clicked without moving to the next page.
How can I cause it to heppend? I tried to wrap the select element with a div, giving it href="" or onclick="" but still pressing on this select also cause the form to be submitted.

Anyone got an idea?

Answer 1

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.
    }
};

Answer 2

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.