JavaScript - To All The Pros He How To Auto Select An Option On A Menu

Hi,

I have a select box whose options are populated from an xml file, the code goes like this:

Code:

 var sel_html = '<select onChange="handleSelected(this)">' +
                        '<option selected> - Select a zone - <\/option>';

var a = 0;

      function createPolygon(pts,colour,name) {
        var shape = new GPolygon(pts,"#000000",1,1,colour,0.5, {title:name});
        gpolygons[a] = shape;
       
		// ======= Add the entry to the select box =====
        sel_html += '<option> ' + name + '<\/option>';
        // ==========================================================
        
        a++;
        return shape;
      }	
		
						


// ======= This function handles selections from the select box ====
      // === If the dummy entry is selected, the info window is closed ==
      function handleSelected(opt) {
	  for (var a=0; a<gpolygons.length; a++) {
		  gpolygons[a].hide();
        }
        var a = opt.selectedIndex - 1; 
        if (a > -1) {
          gpolygons[a].show()
        }
 }

sel_html += '<\/select>';
        document.getElementById("selection").innerHTML = sel_html;

which works fine for showing one option at a time, but what I would like to do is have one of the selections to be to show all of the options at the same time. At the moment I have it working with a checkbox that works off a separate piece of code, but it would be great to have that option within the select box.

You can see the select box in question here - it's the one on the right which says "Select a zone"

thanks in advance.

Hi all,i'm wondering how to detect select option changes.For example i want the data in database changed when i click on update button and if there are changes on the select option side.If the values on the select option are not changed,i can't update the data..Is there a way to achieve it?Thanks a lot...

How to add title to options in Select box , where the options are generated from the data base.
Any idea

Hey, how do I make the following accessible if JS is disabled?

Code:

<select onchange="if (this.selectedIndex > 0) location.href=this[this.selectedIndex].value;"> 
                 <option value="www.domain.com">Your Domain</option>   </select>

Hello.

Could anyone help me with this? I understand how to use OnChange with select boxes to allow the page to be redirected when certain options are selected, such as;

Code:

<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
    <option value="">Choose a destination...</option>
    <option value="http://www.yahoo.com/">YAHOO</option>
    <option value="http://www.google.com/">GOOGLE</option>
    <option value="http://www.altavista.com/">ALTAVISTA</option>
    <option value="http://www.amazon.com/">AMAZON</option>
    <option value="http://artlung.com/">ARTLUNG</option>
</select>

However, I would like the page to only be redirected when just one option (out of 3) are chosen... and when the other two are chosen, we remain on the same page. such as;

Code:

<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
    <option value="">Choose an option...</option>
    <option value="tonight">TONIGHT</option>
    <option value="tomorrow">TOMORROW</option>
    <option value="http://mysite.com/selectdate">SELECT DATE</option>
</select>

is this possible?

Many Thanks,
Patrick.

I'm creating a paypal webpage and am having some issues with input values updating based on which item the user has selected. The boxes I need to update are the amount, item number and item name. I have the following code but it only updates the first form. If I make a change to the second set of options it updates the first form instead of the second. Any help would be much appreciated.

Code:

function details(val)
{
	var info = val.split("|");
	
	document.getElementById('num').value = info[0];
	document.getElementById('price').value = info[1];
	document.getElementById('package_name').value = info[2];
}


<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<select name="dy" Onchange="details(this.value);">
<option value="1|3|Package 1">Package 1</option>
<option value="2|6|Package 2">Package 2</option>
<option value="3|9|Package 3">Package 3</option>
</select>
<input type="text" id="num" name="item_number" value="1">
<input type="text" id="price" name="amount" value="3">
<input type="text" id="package_name" name="item_name" value="Package 1">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="add" value="1">
</form>


<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<select name="pt" Onchange="details(this.value);">
<option value="4|6|Package 4">Package 4</option>
<option value="5|9|Package 5">Package 5</option>
<option value="6|12|Package 6">Package 6</option>
</select>
<input type="text" id="num" name="item_number" value="4">
<input type="text" id="price" name="amount" value="6">
<input type="text" id="package_name" name="item_name" value="Package 4">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="add" value="1">
</form>

I am having a hard time understanding how to load a selected option value that I have saved in an external ini file upon load of page. For example, if the user had selected "Baltimore" previously, the value "c" is saved to the external ini file on close. On the next load I want the selected option to read "Baltimore" instead of the default "Atlanta.

Code:

<SELECT NAME="List">
                <option value="a">Arizona</option>
                <option value="b" selected>Atlanta</option>
                <option value="c">Baltimore</option>
                <option value="d">Buffalo</option>

function loadSettings()
{
var savedValue = "c"; //the value is grabbed from an external .ini
}

// loadSettings() is called with body onload=
// selected value is saved to ini upon close

The value is loaded from external .ini, I don't have a problem with that.

I couldn't think of a way to explain my idea thoroughly, but I'm learning javascript and I have an html <select> form selected by using getElementById. Now, how do I access the data within the option tags to write to a variable? I know there are many simple ways of making it so that the value of the options are the html color name rather than hex code, but I'm doing this to learn javascript.

I have experience with ruby (ok, not THAT much, but I understand the concepts). Anyway's the code explains my problem much better, so here it is:
Code:

<body>
    <form action= "">
        <fieldset>
            <select id="selColor">
                <option value="FFFFFF">White</option>
                <option value="#A9A9A9">Gray</option>
                <option value="#000000">Black</option>
                <option value="#FF0000">Red</option>
                <option value="#FFA500">Orange</option>
                <option value="FFFF00">Yellow</option>
                <option value="#9ACD32">Green</option>
                <option value="#0000FF">Blue</option>
                <option value="#4B0082">Indigo</option>
                <option value="#9400D3">Violet</option>
            </select>

            <input type="button" 
                   value="Change Color" 
                   onclick="changeColor()" />
        </fieldset>
    </form>
<script type="text/javascript">
    //<![CDATA[
    function changeColor() {
        var selColor = document.getElementById("selColor")
        var color = selColor.value
        var colorid = 
        if (confirm("would you like to change color to "+colorid+"?")) {
            document.body.style.backgroundColor = color
        }

    }
    //]]>
</script>

</body>

I haven't initialized var colorid, but I'm trying to set it to either of the highlighted parts of the following piece of my code.
<option id=" white " value="FFFFFF"> White </option>

I want to access that part of the option tags of the element that the user selects. So, without changing the hex values to the color equivalent, how do I access the name of the selected option tag? ( I could make an if/switch statement to translate the hex color into a name and put it into the variable, but I would like to know how to do what I'm asking in case I run into a similair problem.)

I have a function that creates a Select dropdown on the fly:


function makeForm() {

mypara=document.getElementById("paraID");
myform=document.createElement("form");
myselect = document.createElement("select");

theOption=document.createElement("OPTION");
theText=document.createTextNode("Revenue");
theOption.appendChild(theText);
myselect.appendChild(theOption);

myform.appendChild(myselect);
mypara.appendChild(myform);
myselect.onchange=TitleOnChange;
mybreak=document.createElement("p");
myform.appendChild(mybreak);
}
function makeForm() {

mypara=document.getElementById("paraID");
myform=document.createElement("form");
myselect = document.createElement("select");

theOption=document.createElement("OPTION");
theText=document.createTextNode("Revenue");
theOption.appendChild(theText);
myselect.appendChild(theOption);

myform.appendChild(myselect);
mypara.appendChild(myform);
myselect.onchange=TitleOnChange;
mybreak=document.createElement("p");
myform.appendChild(mybreak);
}




I would guess that I have to add something like: theOption.setAttribute("value","1");


I want to be able to call the following function and execute a code base on the selection of the Select Dropdown:


<script type='text/javascript'>
function TitleOnChange()
{
if (document.form.select.value == "1")
{
alert("Value selected on the Select dropdonw is 1");
}

}

</script>
<script type='text/javascript'>
function TitleOnChange()
{
if (document.form.select.value == "1")
{
alert("Value selected on the Select dropdonw is 1");
}

}

</script>



I don't know why is not working. I assigned the value 1 to the select dropdown theOption.setAttribute("value","1");

I call the TitleOnChange function myselect.onchange=TitleOnChange;

And Finally I indicate that if the value is equal to 1 do...

view plaincopy to clipboardprint?
if (document.form.select.value == "1")
{
alert("Value selected on the Select dropdonw is 1");
}
if (document.form.select.value == "1")
{
alert("Value selected on the Select dropdonw is 1");
}



Does anyone knows why this doesn't work and how could I fix it?

Any helpt would be highly appreciate.

Thanks

Hello to all!

How can I insert two values in an array in a salect option like the one below:

Example:

So I need in the "var op1 = new Option" an array thisarray[<?php echo"$user_name" ?>, <?php echo"$user_id" ?>]

Data is being loaded by php from SQL

Code:

var newTextbox = document.createElement('select'); 
newTextbox.className = 'fn-select';
//First user in the populated select menu is the person Loged in
var op1 = new Option("", "");      <----------[an array with two variables] ???
newTextbox.appendChild(op1);
var txt1 = document.createTextNode('<?php echo"$user_name" ?>');
op1.appendChild(txt1);

And then separate these variables and let the following function save them individualy:

Code:

function saveNote (note) {
	resetAjax();
	var photoId = note.container.element.id;
	ajax.setVar('action', 'save');
	ajax.setVar('photo_id', photoId);
	ajax.setVar('note_id', note.id);
	ajax.setVar('left', note.rect.left);
	ajax.setVar('top', note.rect.top);
	ajax.setVar('width', note.rect.width);
	ajax.setVar('height', note.rect.height);
	ajax.encVar('text', note.gui.TextBox.value);  <------------- $user_name
	                                                            <------------- $user_id	ajax.runAJAX();
	var statusDiv = document.getElementById('PhotoNoteStatus');
	ajax.onCompletion = function () {statusDiv.innerHTML = "<p>Note saved.</p>"; }
	return 1;
}

I want to use a <select> drop-down in a form to let my user select a date from a list. The problem is how to easily update the list.

Easiest would be to have a list of dates in a separate file, and have code that would read the dates and write them into the <option> statements of the <select> control. Then when the page with the <select> control opens, the code will open the other file, get the dates, and update the <option>s. And all I have to do is periodically FTP a new date file.

I'm stuck in Visual Basic and FileSystemObject, where I can open a file, read line by line into an array, concatenate a string, and write it into a doc. I can't seem to find similar methods in JavaScript - no duh, because this isn't VB!

So _is_ there a way to do this? Maybe a certain way to create the date file so the code can easily find the values? (Like putting the dates into a table with each <TD> having a unique ID?) And assuming I manage to get the dates, I need to write them into the source HTML, vice in the document body.

What objects, methods, properties do I look at? Are there any samples floating around out there? A drop-kick in a good direction is greatly appreciated!

Ed

Hey guys..... I've worked out how to get the value from a select option tag, but can't work out how to get the text inside the option tags.

Here is the code I am using to get the value attribute from the option tag..

PHP Code:

    // Set the search results box
    var cats = document.getElementById('cat_list');
    
    // Loop through categories from the search results select box
    
    for (i = 0; i < cats.length; i++) {
        
        // Check if the cat is selected
        
        if (cats.childNodes[i].selected == true) {
            
            // Set this category's values to some variables
            var cat_id = cats.childNodes[i].getAttribute('value');
                        
        }
        
    } 


Thanks!

Hi all !

I have written code for select options one. In that option one of the option is to select others. When i select others automatically the cursor should goto others text area box. Any suggessions please.

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>Smartcard Gen2</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" charset="utf-8">
var notEmpty=function(){

document.write("Problem Submitted, Thank You");
window.open(list.html);

}




</script>
</head>

</head>
<body>
<div class="container">,
<div class="topbar">
<p>Report a Problem<a href="list.html" class="button back black"><span></span>&nbsp;&nbsp;&nbsp;ATM Details</a></p>
</div>
<div class="content">
<h6>Find ATMs by Address:</h6>
<div class="box">
<table width="95%" border="0" align="center" cellpadding="8" cellspacing="0">
<tr>
<td width="33%" align="right" valign="middle"><strong>Problem :</strong></td>
<td>
<FORM ACTION="#" NAME=latin>
<SELECT NAME="words" >
<option value="ATM NOT PRESENT">ATM not present</option>
<option value="ATM IS BROKEN">ATM Broken</option>
<option value="MASTERCARD IS NOT ACCEPTED">ATM doesnot accept MasterCard</option>
<option value="ATM IS NOT ACCESSIBLE">ATM is not accessible</option>
<option value="others" id="others">Others</option>

</select>
</FORM>
</td>
</td>
</tr>
</table>

<div class="box">
<table width="95%" border="0" align="center" cellpadding="8" cellspacing="0">
<tr>
<td width="33%" align="right" valign="middle"><strong>Other :</strong></td>
<td width="67%" align="left" valign="top"><input name="textfield3" type="textarea" rows="25" coloumns="15" id="textfield3" placeholder=" " /></td>
</tr>
</table>
</div>
<a href="#" class="transactions" onclick="notEmpty();">Submit</a></div>
</div>
</body>
</html>

I have a telephone input on my form. It is an optional input for users. The prompt begins with the user having to select a phone type from a select menu, and then continue to the text fields to enter the digits. I would like to have the text fields disabled unless any of the types of phone are selected, but not if a type isn't selected. Here's my HTML code so far:

Code:

<select name="phoneType1">
	<option value="" selected="selected">Type...</option>
	<option value="Home">Home</option>
	<option value="Work">Office</option>
	<option value="Cell">Cell</option>
</select> 
	(<input type="text" id="phAreaCode1" name="phAreaCode1" size="2" maxlength="3" onkeyup="moveOnMax(this,'phPrefix1')"/>) - 
	<input type="text" id="phPrefix1" name="phPrefix1" size="2" maxlength="3" onkeyup="moveOnMax(this,'phLine#1')"/> - 
	<input type="text" id="phLine#1" name="phLine#1" size="5" maxlength="4"/> 
	&nbsp;&nbsp;&nbsp;&nbsp;ext.<input type="text" name="phExtension1" size="4" maxlength="4"/>

I know that all I need to do to disable the text fields is to type in "disabled" before the name of the field. But, I don't know how to enable it when "Home," "Office," or "Cell" is selected. Thanks for any help.

hi, all... haven't found exactly the solution here, and trying to cobble something together but it's just not working.

php is doing the heavy lifting in terms of generating the code, but the upshoot is i have a script:

Code:

	<script type="text/javascript">
				var values[1] = "This layout includes a 'title' and 'body' content block.";
				var values[2] = "This layout features everything included in the Standard Page layout as well as a 'comments' block.";
			 function replaceText( var_id) {
				document.getElementByID(pageLayout_replace).innerHTML = values[var_id];
			}
		</script>

and a select box:

Code:

			<fieldset>
				<legend>Page Layouts</legend>
				<label for="pageLayout" class="half left">Choose a page layout<br />

					<select name="pageLayout" id="pageLayout" size="5" onChange="replaceText(this.options[this.selectedIndex]);">
						<option value="1">Standard Page</option>
<option value="2">Standard Page w/Comments</option>
					</select>
				</label>
				<label class="half right">
					Page Layout Description:<br />
					<span id="pageLayout_replace">Click on a page layout title to the left to get a description here.</span>

				</label>
			</fieldset>

however, the error console in firefox says

Code:

Error: missing ; before statement
Line: 14, Column: 8
Source Code:
    var values[1] = "This layout includes a 'title' and 'body' content block.";

and then when i try to select one of the items,

Code:

Error: replaceText is not defined
Line: 1

any insight? thanks in advance!