1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Stop Propagation event after onchange Select!!!!

Discussion in 'JavaScript' started by abdou_kadri, Dec 3, 2007.

0
  1. #1
    HI All, ;)
    This issue is driving me crazy:confused:
    Actually I want a warning message to appear if I change a select and tell me if I select continue so I can go ahead to the link of in the selected option OR cancel stop the event to go through and keep the previous selected option selected.

    My code appears down. Actually when I press continue it works fine on the select But the cancel Doesn't it always goes ahead and doesn't stop eventhough i am using the "stopPropagation(e)" method

    I have include a button and link. The continue and cancel Work fine on those but on change the select the cancel doesn't work

    Any suggestion and help 
    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>testing</title>


<!-- Dependency --> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo/yahoo-min.js" ></script>

<!-- Event source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/event/event-min.js" ></script>

<script language="javascript">
	YAHOO.namespace("example.container");
	
      function fnCallback(e) {
           var ok = confirm("Are you welling to continue? ");
			if(ok)
		{	 
			return true;
		} 
		else
		{
	
	YAHOO.util.Event.preventDefault(e);
	YAHOO.util.Event.stopPropagation(e);
		  return false;
		}
	}
	
	function init() {

		buttons = document.getElementsByTagName("button");

		for (var i = 0; i < buttons.length; i++){
			var oElementb = buttons.item(i);
			YAHOO.util.Event.addListener(oElementb, "click", fnCallback);
		}

		selects = document.getElementsByTagName("select");

		for (var i = 0; i < selects.length; i++){
			var oElements = selects.item(i);
			YAHOO.util.Event.addListener(oElements, "change", fnCallback);
		}

		
		links = document.getElementsByTagName("a");

		for (var i = 0; i < links.length; i++){
			var oElementl = links.item(i);
			YAHOO.util.Event.addListener(oElementl, "click", fnCallback);
		}
		
	}
	YAHOO.util.Event.onDOMReady(init);
</script>

</head>
<body>
Choose a mail Type:
<select onchange="window.location.href=this.options[this.selectedIndex].value"> 
<option VALUE="http://gmail.com">Gmail</option>
<option VALUE="http://www.hotmail.com">Hotmail</option>
<option VALUE="http://www.yahoo.com">Yahoo!</option>
</select>
<br/>
<button id="mybutton">Push Me</button>
<br/>
<a href="http://www.yahoo.com">This is a link to yahoo</a>
</body>
</html>
    Code (markup):
    Thanks in advance for any help and suggestion OR a solution will be great;)
     
    abdou_kadri, Dec 3, 2007 IP
  2. hrcerqueira

    hrcerqueira Peon

    Messages:
    125
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Instead of returning true on fnCallback, put the exact same code you have on the onChange event handler in the select box, and remove it from where it is now.

    Hope it helps...
     
    hrcerqueira, Dec 3, 2007 IP