Remove onclick command from div child

Question

I am working on a website where I have a main one div. I wanted all pages to divwork as a link (clicking on it will send the form and go to another page), so I added to this attribute div:

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

Everything in this area shuold links to the next page , except for the HTML selection, which is located inside this div, but should be accessible for a click without going to the next page.

How can i do this? I tried to wrap the selected div element by specifying it href=""or onclick="", but still the form is submitted.

Can anyone solve this?

Answer 1

You need to stop the event bubbles up the hierarchy ...

using the onclick attribute you can do this with

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

Answer 2

Firstly, the pseudo-protocol is javascript:superfluous in your code, because you use the onclick attribute.

I suggest abandoning inline JavaScript and take a chance in more acceptable unobtrusive JavaScript .

In any case, what you want to do is verify that the event was not fired on the element <select>. With unobtrusive JS that will look something like this:

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