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?

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?

• javascript
• html

Share Improve this question Follow edited Jul 10, 2017 at 15:46 Wolfie 30.2k77 gold badges2929 silver badges5959 bronze badges asked Mar 6, 2010 at 11:09 SpidermanSpiderman 10k1313 gold badges5050 silver badges5656 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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.

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