[SOLVED] Stop Propagation event after onchange Select!!!!

abdoukadri · #1 (**permalink**) Dec 3rd, 2007, 23:05

HI All,

This issue is driving me crazy

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

Code: Select all

<!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>

Thanks in advance for any help and suggestion OR a solution will be great

Rakuli · #2 (**permalink**) Dec 4th, 2007, 03:02

You could take the onchange= inline event handler away from the <select> element entirely and then add it to the callback function...

Code: Select all

function fnCallback(e) {
           var ok = confirm("Are you welling to continue? ");
			if(ok)
		{	 
                                               // If this is a select change things a bit
                                               if (this.tagName == 'SELECT') 
                                                   window.location.href=this.options[this.selectedIndex].value;
			return true;
		} 
		else
		{
	
	YAHOO.util.Event.preventDefault(e);
	YAHOO.util.Event.stopPropagation(e);
		  return false;
		}
	}

abdoukadri · #3 (**permalink**) Dec 4th, 2007, 12:59

Thanks alot Rakuli for your reply,

what you have provide me works but there are two issues still:
In my situation I cann't change in the html only I have to change in the javascript and another issue when I change selection and then press Cancel, the selection must go back to its pervious selection..

Again thanks Rakuli for your help

Any Other suggestions!!!!!

Quote:

Originally Posted by Rakuli

You could take the onchange= inline event handler away from the <select> element entirely and then add it to the callback function...

Code: Select all

function fnCallback(e) {
           var ok = confirm("Are you welling to continue? ");
            if(ok)
        {     
                                               // If this is a select change things a bit
                                               if (this.tagName == 'SELECT') 
                                                   window.location.href=this.options[this.selectedIndex].value;
            return true;
        } 
        else
        {
 
    YAHOO.util.Event.preventDefault(e);
    YAHOO.util.Event.stopPropagation(e);
          return false;
        }
    }

Rakuli · #4 (**permalink**) Dec 4th, 2007, 15:03

You could do something like adding a new function that will be added on focus, this will store what the currently showing selection is allowing you to change back if necessary.

create a function like

Code: Select all

function storeCurrentSelection()
{
           this.currentSelection = this.selectedIndex;
}

Then add an event handler to catch the onfocus event

Code: Select all

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

then finally change that code snippet I gave before to something like

Code: Select all

// If this is a select change things a bit
                                               if (this.tagName == 'SELECT') 
                                                   window.location.href=this.options[this.selectedIndex].value;
            return true;
        } 
        else
        {
 
    YAHOO.util.Event.preventDefault(e);
    YAHOO.util.Event.stopPropagation(e);
         // check if it's a select and use the current selection stored earlier to reset it
          if (this.tagName == 'SELECT')
              this.options[this.currentSelection].selected = 'selected';
          return false;
        }
    }

That should do it for you.

Cheers,

abdoukadri · #5 (**permalink**) Dec 4th, 2007, 15:37

What a Wonderful solution to go back to my pervious selection!!!!!!

Thanks alot Rakuli

But I have still the issue of not changing in the html i.e. not to delete "onchange" in the Select tag. Because in my case I have a legacy system and I am only adding javascript code.

Again many thanks for your help

Quote:

Originally Posted by Rakuli

You could do something like adding a new function that will be added on focus, this will store what the currently showing selection is allowing you to change back if necessary.

create a function like

Code: Select all

 
function storeCurrentSelection()
{
           this.currentSelection = this.selectedIndex;
}

Then add an event handler to catch the onfocus event

Code: Select all

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

then finally change that code snippet I gave before to something like

Code: Select all

 
// If this is a select change things a bit
                                               if (this.tagName == 'SELECT') 
                                                   window.location.href=this.options[this.selectedIndex].value;
            return true;
        } 
        else
        {
 
    YAHOO.util.Event.preventDefault(e);
    YAHOO.util.Event.stopPropagation(e);
         // check if it's a select and use the current selection stored earlier to reset it
          if (this.tagName == 'SELECT')
              this.options[this.currentSelection].selected = 'selected';
          return false;
        }
    }

That should do it for you.

Cheers,

Rakuli · #6 (**permalink**) Dec 4th, 2007, 15:55

Set the onchange event handler to nothing before adding the rest

like

Code: Select all

for (var i = 0; i < selects.length; i++){
           selects[i].onchange = function() {}; // now it holds an empty function
            var oElements = selects.item(i);
            YAHOO.util.Event.addListener(oElements, "change", fnCallback);
                                                YAHOO.util.Event.addListener(oElements, "focus", storeCurrentSelection);
        }

Cheers

abdoukadri · #7 (**permalink**) Dec 5th, 2007, 00:50

Its working beautiful now

What a wonderful job Rakuli

I don't know how to thank you, MANY MANY thanks for you help

Take Care

Quote:

Originally Posted by Rakuli

Set the onchange event handler to nothing before adding the rest

like

Code: Select all

 
for (var i = 0; i < selects.length; i++){
           selects[i].onchange = function() {}; // now it holds an empty function
            var oElements = selects.item(i);
            YAHOO.util.Event.addListener(oElements, "change", fnCallback);
                                                YAHOO.util.Event.addListener(oElements, "focus", storeCurrentSelection);
        }

Cheers

Rakuli · #8 (**permalink**) Dec 5th, 2007, 02:31

No problems

abdoukadri · #9 (**permalink**) Dec 5th, 2007, 20:50

Again thanks Rakuli

I still have a tiny issue, I am testing it with IE it work perfect.
But when an using the FireFox browser, the on change of the selection won't go back to the pervious selection when I press cancel on the popup message.

Many thanks in Advance for any help and suggestion

Quote:

Originally Posted by Rakuli

No problems

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] Event Chain detection	StanLevin	JavaScript Forum	4	Jan 18th, 2008 18:33
[SOLVED] select from array in drop down box	saltedm8	PHP Forum	6	Dec 3rd, 2007 21:08
[SOLVED] hpw to select from 2table using a 3rd	AdRock	Databases	3	Nov 16th, 2007 10:20
Dynamic Select Menu with Onchange	pimpmaster	JavaScript Forum	2	Jun 18th, 2007 18:11
onchange event and tabbing out of text field ARRRGG	juan110470	JavaScript Forum	1	Dec 7th, 2005 22:55

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
[SOLVED] Stop Propagation event after onchange Select!!!!