Learn VBA & Macros in 1 Week!

JavaScript - Chained Select Boxes Issue On Back Button

Full Excel VBA Course - Beginner to Expert

Chained Select Boxes Issue On Back Button	View Content

Hello to all and thank you for any help beforehand.

I have an issue with the script below, Select the top dropdown and the second gets populated, this is a nice piece of script, the only problem is that when the information is posted and presented on the process page I click page back to the form to rectify some other field but the ajax resets so I have to select Country & City each time even if thease fields are correct.

I know that back button as well as bookmark is a problem with ajax but i think there is a solution the only thing is I don't know how to apply it to this script.

Source of the script: http://www.dhtmlgoodies.com/index.ht...chained_select

Ajax file: http://www.dhtmlgoodies.com/AJAX/ajax.js

test.html
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">	
var ajax = new Array();

function getCityList(sel)
{
	var countryCode = sel.options[sel.selectedIndex].value;
	document.getElementById('dhtmlgoodies_city').options.length = 0;	// Empty city select box
	if(countryCode.length>0){
		var index = ajax.length;
		ajax[index] = new sack();
		
		ajax[index].requestFile = 'getCities.php?countryCode='+countryCode;	// Specifying which file to get
		ajax[index].onCompletion = function(){ createCities(index) };	// Specify function that will be executed after file has been found
		ajax[index].runAJAX();		// Execute AJAX function
	}
}

function createCities(index)
{
	var obj = document.getElementById('dhtmlgoodies_city');
	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}


function getSubCategoryList(sel)
{
	var category = sel.options[sel.selectedIndex].value;
	document.getElementById('dhtmlgoodies_subcategory').options.length = 0;	// Empty city select box
	if(category.length>0){
		var index = ajax.length;
		ajax[index] = new sack();
		
		ajax[index].requestFile = 'getSubCategories.php?category='+category;	// Specifying which file to get
		ajax[index].onCompletion = function(){ createSubCategories(index) };	// Specify function that will be executed after file has been found
		ajax[index].runAJAX();		// Execute AJAX function
	}
}
function createSubCategories(index)
{
	var obj = document.getElementById('dhtmlgoodies_subcategory');
	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}		
</script>
</head>
<body>
<form action="" method="post">
<table>
	<tr>
		<td>Country: </td>
		<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
			<option value="">Select a country</option>
			<option value="dk">Denmark</option>
			<option value="no">Norway</option>
			<option value="us">US</option>
		</select>
		</td>
	</tr>
	<tr>
		<td>City: </td>
		<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">
		
		</select>
		</td>
	</tr>
</table>
</form>

</body>
</html>

Here's the content of getCities.php
Code:

<?php

if(isset($_GET['countryCode'])){
  
  switch($_GET['countryCode']){
    
    case "no":
      echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
      echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
      echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
      echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";
      
      break;
    case "dk":
      
      echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
      echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
      echo "obj.options[obj.options.length] = new Option('Odense','13');\n";
      
      break;
    case "us":
      
      echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
      echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
      echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
      echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
      echo "obj.options[obj.options.length] = new Option('New York','25');\n";
      echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
      echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";
      
      break;
  }  
}

?>

Full Excel VBA Course - Beginner to Expert

Select Menu And Clicking Browser Back Button

Similar Tutorials

View Content

I am trying to write script that allows a user to select a new page using a select menu. But if a user changes mind and clicks Back button. i want a use to see again "Select a New Page" as a first option in the select menu. instead i see the page that was chosen before. in firefox, even when i click Refresh button, the select menu does not go back to its initial format.
I tried to use the principle that each time window is loaded, the selected Index would be 0. it is not working. Could anyone give me a hint on how to fix this problem?

my script is below.

<html>
<head>
<title>Jump Menu 2</title>
<script type="text/javascript">
function new_page() {
var selectmenu=document.getElementById("states_form").states_select;
selectmenu.onchange=function new_state() {
var i=selectmenu.selectedIndex;
var state=selectmenu.options[i].value;

var new_page="http://www.50states.com/"+state+".htm";
location.href=new_page;
window.onload=function select_reload() {
i=0;
}
}
}
window.onload=new_page;
</script>
</head>
<body>
<form id="states_form">
<select name="states_select">
<option value="0"> -- Select a New State--</option>
<option value="nebraska"> Nebraska</option>
<option value="texas"> Texas</option>
<option value="florida">Florida </option>
<option value="oregon"> Oregon</option>
<option value="wisconsi"> Wisconsin</option>
</select>
</form>
</body>
</html>

Firefox Back Button Issue

Similar Tutorials

View Content

How you handle back button scenario in firefox browser.
The problem is when i click browser back button , the javascript on load is not executed and page is rendered from cache.

It works in IE..

Back Button And Ajax Issue

Similar Tutorials

View Content

I have a website using this pageslide function
http://srobbin.com/blog/jquery-pageslide/

Basically the page you see in the example is acting as a side menu bar and when you click the links on that page, it performs the sliding action and a new page slides into the screen. I'm wondering if there is any way to get the back button to slide it back to the main page, rather than having to click a link to go back?

Chained Select Mysql

Similar Tutorials

View Content

Hi!

I'm using this javascript and php/MySQL:

http://www.dynamicdrive.com/dynamici...ects/index.htm

When I make a selection in all 3 lists I have a button that saves the selections in my MySQL database, like this:

set1, Toyota, Cars, Camry

Then I want to be able to select set1 in a list and press an "Edit" button that retrieves these 3 selections and auto selects them in the list.

How is this possible?

Thanks in advance
Vigour

Chained Select Menu

Similar Tutorials

View Content

Hi
I wanna to have two select boxes, one of them will contain a list of provinces, and on the other I wanna have a list of cities, but based on selected province. When province selects, cities select box must be changed, too.
I don't wanna use AJAX for this purpose, as the server is already too busy and I don't like to disturb it more. So if anyone can provide a solution, just by Javascript and not with AJAX, I would be appreciate it.
Cheers!

Help With Chained Select And Hidden Divs

Similar Tutorials

View Content

Hi

I found this code from here http://www.dynamicdrive.com/forums/s...ad.php?t=35776

And cant seem to get it to work. I want to show 2 drop downs and then a hidden div with the answer.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/chainedmenu.js"></script>
<script type="text/javascript" src="scripts/config2.js"></script>
<script type="text/javascript">
window.onload=function(){
var lastDiv = "";
document.getElementById('secondlevel').onchange=function(){
if (lastDiv)
document.getElementById(lastDiv).className = "hiddenDiv";
//if value of the box is not nothing and an object with that name exists, then change the class
if (this.value && document.getElementById(this.value)) {
document.getElementById(this.value).className = "visibleDiv";
lastDiv = this.value;}}}
</script>
<style type="text/css">
.hiddenDiv {
	display:none;
}
</style>
</head>
<body onLoad="initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, 'saveit'); ">
<form name="listmenu0">
<div class="black1 bold">1. Select Product Range</div>
<div class="selects"><select name="firstlevel" style="width:250px;"></select></div>
<div class="black1 bold">2. Select Product Code</div>
<div class="selects"><select id="secondlevel" name="secondlevel" onchange="showDiv(this.value)" style="width:250px;"></select></div>
</form>
    <div id="storesContent">
        <div id="one" class="hiddenDiv">DIV1</div>
        <div id="two" class="hiddenDiv">DIV2</div>
        <div id="three" class="hiddenDiv">DIV3</div>
</div>
</body>
</html>

many thanks

Roy

Help With Back Button

Similar Tutorials

View Content

i have the following code which i am trying to insert a 'back button' into to go back to the previous page. i can only seem to get the button to appear either at the very top or very bottom of the page, does anyone know how i can specify the location?

this script is generated from easypano tourweaver -

Code:

<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>Virtual Tour Created By CAPITA SYMONDS</title> 
 </head> 
 <body leftMargin="0" topMargin="0" rightMargin="0" bottomMargin="0"> 
 <script type="text/javascript" src="swfobject.js"></script> 
 <div id="flashcontent"> 
 To view virtual tour properly, Flash Player 9.0.28 or later version is needed. 
 Please download the latest version of <a href="http://www.adobe.com/go/getflashplayer" target="_blank">Flash Player</a> and install it on your computer.
 </div> 
  
 <script type="text/javascript"> 
 // <![CDATA[ 
 var so = new SWFObject("twviewer.swf", "sotester", "1024", "768", "9.0.0", "#FFFFFF"); 
 so.addParam("allowNetworking", "all"); 
 so.addParam("allowScriptAccess", "always"); 
 so.addParam("allowFullScreen", "true"); 
 so.addParam("scale", "noscale"); 
 //<!-%% Share Mode %%->
 so.addVariable("lwImg", "resources/2_area_multipix_preloading image file.jpg"); 
 so.addVariable("lwBgColor", "255,255,255,255"); 
 so.addVariable("lwBarBgColor", "255,186,186,186"); 
 so.addVariable("lwBarColor", "255,153,0,0"); 
 so.addVariable("lwBarBounds", "-512,-384,1024,768"); 
 so.addVariable("lwlocation", "4"); 
 so.addVariable("lwShowLoadingPercent", "false"); 
 so.addVariable("lwTextColor", "255,0,0,0"); 
 so.addVariable("iniFile", "config_2_Area_Multipix.bin"); 
 so.addVariable("progressType", "1"); 
 so.addVariable("swfFile", "resources/2_area_multipix_1_animation for tourweaver.swf"); 
 so.addVariable("href", location.href); 
 so.write("flashcontent"); 
 // ]]> 
 </script> 
 </body> 
 </html>

here is the button code -

Code:

<span onclick="javascript:history.back()" style="text-decoration:underline; color:blue; cursor:hand">Back</span>

Javascript Select Boxes

Similar Tutorials

View Content

Calculating quiz answers?

Code:

var correctAnswers = new Array();

correctAnswers[1] = "Extensible Hypertext Markup Language";

correctAnswers[2] = "<p></p>";

correctAnswers[3] = "<br />";



function checkAnswers(){

    var score = 0;

    for (i=1; i<4; i++){

        correctAnswers = getSelectValue("quiz","q" + i);

        if (correctAnswers == correctAnswers[i]){

            score++;

        }

    }

How To Disable Back Button?

Similar Tutorials

View Content

I am making a simple puzzle game on Android using Phonegap, that is HTML5, CSS3 and JavaScript.

When a user fills an answer on a page, if the answer is correct, it will go to another page. However, once the user goes to the next page, he/she CANNOT return back to the previous page.

I do not want the user to return back, else he/she will have to fill the answer again to go to the next page, so it's not good.

Thank

Ie9 Breaks Dynamic Select Boxes

Similar Tutorials

View Content

I have the below JS code to change up a select box based on what is selected in another select box. IE9 broke this somehow. It still works in other browsers as well as IE8 and IE7.

When you select something in select box A, it properly populates select box B. However when you go back and change select box A again the script stops working completely.

The error I'm getting from the IE9 developer tools debugger is:

SCRIPT65535: Invalid calling object
dynamicselect.js, line 31 character 18

I have bolded the relevant line below.

Code:

function dynamicSelect(id1, id2) {
	// Browser and feature tests to see if there is enough W3C DOM support
	var agt = navigator.userAgent.toLowerCase();
	var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
	var is_mac = (agt.indexOf("mac") != -1);
	if (!(is_ie && is_mac) && document.getElementById && document.getElementsByTagName) {
		// Obtain references to both select boxes
		var sel1 = document.getElementById(id1);
		var sel2 = document.getElementById(id2);
		// Clone the dynamic select box
		var clone = sel2.cloneNode(true);
		// Obtain references to all cloned options 
		var clonedOptions = clone.getElementsByTagName("option");
		// Onload init: call a generic function to display the related options in the dynamic select box
		refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
		// Onchange of the main select box: call a generic function to display the related options in the dynamic select box
		sel1.onchange = function() {
			refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
		};
	}
}
function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
	// Delete all options of the dynamic select box
	while (sel2.options.length) {
		sel2.remove(0);
	}
	// Create regular expression objects for "select" and the value of the selected option of the main select box as class names
	var pattern1 = /( |^)(select)( |$)/;
	var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
	// Iterate through all cloned options
	for (var i = 0; i < clonedOptions.length; i++) {
		// If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box
		if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
			// Clone the option from the hidden option pool and append it to the dynamic select box
			sel2.appendChild(clonedOptions[i].cloneNode(true));
		}
	}
}

Thank you in advance for any help provided.

Customizing Dynamic Select Boxes

Similar Tutorials

View Content

Hi all,
I'm trying to customize a script I found. It's about two select boxes, one for continent selection and one for country selection. When user selects a continent from the first select box, the second select box is filled with the list of the proper countries that belong to this continent.

You can see that code of the script he http://www.howtocreate.co.uk/jslibs/htmlhigh/countryselect.html

In my page, the continent select box is loaded with a continent-value already selected (the selection depends on a database value) and I want to have the second countries select box, also loaded with the proper countries.

I cannot make this happen, unless I change the continent's selection and trigger the onchange event. Can I someway keep the onchange event and also add the ability to have a continent and it's list of countries already loaded?

Need Help. Javascript Select Boxes Using Arrays

Similar Tutorials

View Content

I'm trying to do this using numerical arrays for an assignment:

Create a webpage with three select boxes. If basketball is selected in the first select box, the second select box should display the names Celtics, Lakers, and Bulls. If Celtics is selected from the second select box, the third select box should display the names Larry Bird, Bill Russell, and Kevin McHale.

I think i have a good start but i can't seem to get the fields to automatically populate with the players. This has to be done solely with JavaScript. Any help would be greatly appreciated?

<html>

<head>
<script type="text/javascript">

</script>
</head>

<body>

<form>
<select id="theSport" onChange="fillTeams()">
<option>Choose a Sport</option>
<option>Basketball</option>
<option> Baseball </option>
</select>
<select id="theTeams" onChange="fillPlayers()">
<option>................</option>
<option></option>
<option></option>
</select>
<select id="thePlayers" size="3">
<option> ...............</option>
<option></option>
<option></option>
</select>
</form>

</body>

</html>

Ie Vs Firefax Back Button Reload

Similar Tutorials

View Content

Sorry if this is the wrong place for this question, but...

I'm having an issue with the difference in behavior between the IE and FF back buttons. I'm using jQuery to create collapsable div regions which contain text boxes on a search form. After submit, if the use clicks the back button in FF, the region(s) the user had previously expanded, show as expanded. Also, there search term is still present. In IE, when clicking the back button, all regions are collapsed, in there original loaded state, but the search term is still saved.

I put the following code at the top of the page:

onload=function(){
alert('Onload!');
}

When clicking the back button in FF, nothing happens. For IE, the alert pops up. This tells me that IE reloads the page (but somehow still saves some things, like the search text).

My question is, is there a way to keep IE from reloading when the use clicks 'back'? I will be creating my own 'edit' back button for users to get around this, but I also would like to prevent this from confusing users and causing undesired results.

Any help would be greatly appreciated.

Onbeforeunload: Close Vs. Back Button

Similar Tutorials

View Content

Hi,
I have the following problem:
When I use this script it pops up both if a user tries to close the window and also if he presses the back button. Please tell how to show another window or do another action when the back button is pressed? I know it is possible although a lot of people say it's not.
Code:

<script type="text/javascript" type="text/javascript">
window.onbeforeunload = confirmExit;
  function confirmExit()
  {
    return "blabla";
  }
 </script>

2 Select Boxes In 1 Form With Onchange Display

Similar Tutorials

View Content

I'm using onchange display to hide/show form elements depending on the value of a select box. It works perfectly well (I actually really adore it) for one select box, but I have another select box which I'd like to act similarly.

Code:

<head>
 <script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3,id4) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
document.getElementById(id4).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
if ( txt.match(id4) ) {
document.getElementById(id4).style.display = 'block';
}
}
// ]]>
</script>
</head><body>

<form action="#">
<select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');">
<option>Please select:</option>
<option value="oneshot">Oneshot</option>
<option value="outtake">Outtake</option>
<option value="multi">Original Multi-Chapter</option>
<option value="drabbles">Drabbles</option>
<option value="outline">Outline Preview</option>
<option value="chapter">Chapter Preview</option>
</select><BR><BR>
<div id="oneshot" style="display: none;">Some fields here</div>
<div id="outtake" style="display: none;">Some different fields here</div>
<div id="multi" style="display: none;">Some other fields here</div>
<div id="chapter" style="display: none;">Some more fields here</div>
</form>
</body>

But when I go to add a second select (obj,id1,id2,id3,id4,id5,id6) with new "ifs" and id's, etc and so forth, neither work.

Code:

<head>
 <script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3,id4,id5,id6) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
document.getElementById(id4).style.display = 'none';
document.getElementById(id5).style.display = 'none';
document.getElementById(id6).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
if ( txt.match(id4) ) {
document.getElementById(id4).style.display = 'block';
}
if ( txt.match(id5) ) {
document.getElementById(id5).style.display = 'block';
}
if ( txt.match(id6) ) {
document.getElementById(id6).style.display = 'block';
}
}
// ]]>
</script>
</head><body>

<form action="#">
<select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');">
<option>Please select:</option>
<option value="oneshot">Oneshot</option>
<option value="outtake">Outtake</option>
<option value="multi">Original Multi-Chapter</option>
<option value="drabbles">Drabbles</option>
<option value="outline">Outline Preview</option>
<option value="chapter">Chapter Preview</option>
</select><BR><BR>
<div id="oneshot" style="display: none;">Some fields here</div>
<div id="outtake" style="display: none;">Some different fields here</div>
<div id="multi" style="display: none;">Some other fields here</div>
<div id="chapter" style="display: none;">Some more fields here</div>  <BR><BR><BR>

<select name="Atype" onchange="display(this,'romance','adventure');">
<option>Please select:</option>
<option value="romance">Romance</option>
<option value="adventure">Adventure</option>
</select><BR><BR>
<div id="romance" style="display: none;">Some new fields here</div>
<div id="adventure" style="display: none;">Some even newer fields here</div>
</form>
</body>

Is there any way to fuse them and get a second select to work the same?

Thanks in advance for the help!

Javascript Select Boxes, Onchange Event Help

Similar Tutorials

View Content

Hello,

I am working on a CGI/Ajax application to interface with a database. I have the back-end Perl/CGI application working, so now it it is time to design the web interface and respective forms.

So here goes, I am attempting to create dynamic list boxes, but I am unable to pass a value to the 'onChange' event.

Here is my code (this is a proof of concept and highly stripped down):
Code:

<html>
<head>
</head>
<body>
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

    var array = [ 'name', 'age', 'year'];

    function init(sel_val){
        for (var i = 0; i < array.length; i++){
            document.write(i + " " + array[i] + "<br />");
        }

        for (var i = 0; i< array.length; i++){
            document.product.id_type.options[i] = new Option(i + array[i], i);
        }
    }


    function OnChange(sel_val) {
//         for(i = document.product.id_style.length - 1; i > 0; i--)
//                document.product.id_style.options[i]    = null;
//        document.product.id_style.options[0] = new Option("something else", 15);
          alert("pressed" + " " + sel_val + "<br />");
    }

    </script>


<form name="product">
<select name="id_type" size="5" style="width: 150px;" onChange="OnChange()"></select>

        <select name="id_style" size="5" style="width: 150px;" ></select>
    </form>
    <script>
            init();
    </script>



</body>
</html>

I'm well versed in Perl and Java but I am a JavaScript newbie, so go easy.

I understand that sel_val is not being set, but I'm not sure how it should (or could) be set.

I would like to use a hash instead of integer values for `i`

document.product.id_type.options[i] = new Option(i + array[i], i);

becomes

document.product.id_type.options[i] = new Option(hash[key], key);

Any thoughts, comments, criticisms, jokes are welcome. Thanks in advance for the assist.

Reload/refresh On Browser Button Back

Similar Tutorials

View Content

Hello,
I need some script to force the browser to reload/refresh when a page is reached from the back button.

EG
You're on page A -> You click a link onto page B -> You Press Browser back to go onto Page A, it has old content that requires a reload.

Now, my page is currently php so I won't bother with my code here as I am looking for any solution (I have also posted in php forum).

Any JS solution that will trigger a reload on browser back is appreciated.
I have tried a few ideas, most work in Chrome, IE always works, Firefox 4 and Opera 11 wont reload, simply fetching from cache I believe.

Thanks.

Onbeforeunload Should Not Fire On Clicking The Back Button

Similar Tutorials

View Content

I am creating a popup for an online store so that when prospective customers put something in their shopping cart and then try to leave the site, they are offered a coupon in a popup.

I am using the following code (FYI, uses prototype.js)
Code:

Event.observe(document.body, 'click', function(event) {
	if (Event.element(event).tagName == 'A' || Event.element(event).tagName == 'INPUT' || Event.element(event).tagName == 'IMG') {
		staying_in_site = true;
	}
});

window.onbeforeunload = popup;

function popup() {
	if (staying_in_site) {
		return;
	}
	if (popup_displayed) {
		return;
	}
	popup_displayed = true;
	
	//popup displayed here 
}

The popup is not displayed when the user clicks on a link or submits a form (correct behavior) and it is displayed when the user types in a URL or tries to close the browser (also correct behavior).
The problem is when the user clicks the back or forward buttons, the popup is displayed which is not the desired behavior.

Anyone here have a solution for this?

Program In Javascript To Select Multiple Text Boxes

Similar Tutorials

View Content

hi ! i would like to write the code for multiple text box select as shown in the link below:

http://www.downloadplex.com/Mobile/I...ne_284120.html

please see the screen shot 3

Extracting Values From Select Boxes And Summing The Result

Similar Tutorials

View Content

Hello,

I'm working on a project that involves extracting values from a series of select boxes and then working out the result.

The select boxes contain the following:
Code:

<select name="select_Col1_Row1">
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="red>Red</option>
</select>
<select name="select_Col1_Row2">
<option value="blue" selected="selected">Blue</option>
<option value="green">Green</option>
<option value="red>Red</option>
</select>
<input type="text" name="RedSum">
<input type="text" name="BlueSum">
<input type="text" name="GreenSum">
</select>

As you can see by my code, I'm early days at this and guessing the steps on the way. I tried using getElementsByTagName on the select and then on the option but had no luck with that. The code below does a wonderful job of returning blue for both select statements...

Code:

<script type="text/javascript">
function getElements()
  {
  var table = document.getElementById("x");   
  var x = table.getElementsByTagName("option");
  for (var i = 0; i < x.length; i++) {   
    var status = x[i].getAttribute("selected");
	alert(status);
    if (status == "selected") {
      var statushcap = x[i].getAttribute("id");
      var statusvalue =x[i].getAttribute("value");
      if (statusvalue == "blue") {
        alert(statusvalue);
      }
    }

  }
  
  alert(x.length);
  }
</script>

If someone could suggest some way to map the select tag and then extract its option value to being the user selected value, I'd most appreciate it. I can probably do the rest of it. Can you extract additional information from the id of the option that is selected as I'd like to sum additional information from the user's choice.

Best,

John