JavaScript - How Do I Program A Select Option To Enable A Field?

Hi,
I'm new to JavaScript. I'm trying to create my form in such a way that if 'Premium' is selected, a the text box with label 'membership no' is displayed and if 'bronze' is select, the drop-down list 'sponsor' is displayed instead....here's what my form looks like...

PHP Code:
<form id="form1" name="form1" method="post" action="">
  <p>
    <label for="select">Membership:</label>
    <br />
    <select name="select" id="select">
      <option value="Premium" selected="selected">premium</option>
      <option value="Bronze">bronze</option>
    </select>
  </p>
  <p>Membership No:<br />
    <input type="text" name="textfield" id="textfield" />
  </p>
  OR<br />
  Sponsor:
<br />
  <select name="select2" id="select2">
    <option value="329">329</option>
    <option value="234">234</option>
  </select>
</form> 


appreciate the help

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.

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

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>

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

I've inherited this piece and now I'm suppose to add to it. Its basic function currently is when the "Other" option is selected, a hidden text field shows. Now, I need to add when "Athletics" is selected, another hidden select group will show.
I've set up the new Select group already, but not sure how to incorporate it into the already existing script. I've been researching for two days, and hopefully this form will be helpful.


Code:

<select id="Program" name="Program" size="1" onchange="
      $other = document.getElementById('other_program').style;
      $invoice = document.getElementById('invoice');
      if (selectedIndex==6) {
        $other.visibility='visible';
        if ($invoice.value == 'General Fund') $invoice.value='';
      } else {
        $other.visibility='hidden';
        if (selectedIndex==1) {
          $invoice.value='Renegade Fund';
        } else {
          $invoice.value='Please Specify';
        }
      }
      ">
      <option selected="selected" value="Not Selected"> - - Select One - - </option>
      <option value="Athletics">Athletics</option>
      <option value="Drum Line">Drum Line</option>
      <option value="Renegade Fund">Renegade Fund</option>
      <option value="General Scholarships">General Scholarships</option>
      <option value="President's Circle">President's Circle</option>
      <option value="Other">Other</option>
    </select>

    <span id="other_program"><input type="text" id="invoice" name="invoice" size="15" /></span>

    <!-- the following is the new select group ive set up
    <span id="alumni">
        <select id="select-alumni" name="select-alumni" size="1">
            <option selected="selected" value="Not Selected">Yes or No</option>
            <option value="Yes-alumni">Yes</option>
            <option value="Not-alumni">No</option>
        </select>
    </span>
    -->

Hi,

Is there anyone who could help me figure out how to Change a Hidden Fields Name based on selected option. The hidden fields name is sent off and I need to change the name depending on what option they select.
For if they select MyList the hidden field name needs to be SelectLists[40] or if they select testlist the hidden field name needs to be SelectLists[41].

This is probably way, way off but I've done this and it doesn't work.

Any help would be greatly appreciated, thanks.


<script language="JavaScript">
function changelist() {
//here we assign the value of the hidden input to x
x=eval(document.getElementByName("SelectLists[40]");

if(document.getElementById("SelectLists[40]").selected=true
x=SelectLists[40]

else(document.getElementById("SelectLists[41]").selected=true
x=SelectLists[41]

else(document.getElementById("SelectLists[42]").selected=true
x=SelectLists[42]

//now we assign the new value to the input
document.getElementById("theHiddenInput").name=x;

//and now we test
alert(document.getElementById("theHiddenInput").name)


}
</script>





<input type="hidden" id="theHiddenInput" name="SelectLists[40]" value="Yes">
<select class="inpBox" style="width: 287px" name='mailinglist' id="lists" onchange="changelist()">
<option value="SelectLists[40]" name="SelectLists[40]" id="SelectLists[40]">MyList</option>
<option value="SelectLists[41]" name="SelectLists[41]" id="SelectLists[41]">testlist</option>
<option value="SelectLists[42]" name="SelectLists[42]" id="SelectLists[42]">testlist2</option>

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.

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!

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

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>