JavaScript - Select Box Option Pointing To Text Area

Hi Guys,

A bit stuck here and was wondering what you guys think.

I have an HTML Select Option with a list of countries. A user saves that page and when he wants to return to the same page later at some point, i would like to populate the countries drop down list with what he entered initially.

Is there an easy way to do this?

Thanks.

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

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

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.

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.

Hi,
I have a form setup so that selecting a radio button opens a specific text field. The problem is if the user starts to enter information, then switches to a different radio button (perhaps they chose the wrong radio to start), the text they already started to enter on the previous textfield doesn't get cleared. This will be a problem later when inserting to sql.

Here is a summary of the code:

Code:

<head>
<script type="text/javascript">
function doClick(objRad){
if (objRad.value=="0"){
document.getElementById("textbox").style.display='block'; 
}
else{
document.getElementById("textbox").style.display='none'; 
}
if (objRad.value=="1"){
document.getElementById("textbox1").style.display='block'; 
}
else{
document.getElementById("textbox1").style.display='none'; 
}
if (objRad.value=="2"){
document.getElementById("textbox2").style.display='block';
}
else{
document.getElementById("textbox2").style.display='none';
}
}
</script>
</head>
<body>

<form action="insert.php" method="post">
<p>Please choose the business type:
<input type="radio" name="rad" value="0" onclick="doClick(this)">
Sole Proprietorship
<input type="radio" name="rad" value="1" onclick="doClick(this)">
Partnership
<input type="radio" name="rad" value="2" onclick="doClick(this)">
Corporation

<div id="textbox" style="display:none">
<input type="text" name="txt">
This is my sole proprietorship info.</div>
<div id="textbox1" style="display:none">
<input type="text" name="txt">
This is my partnership info.</div>
<div id="textbox2" style="display:none">
<input type="text" name="txt">This is my corporation info.
</div>
</form>
</body>

Any help is appreciated,
Thanks in advance!

On a web form my users choose different variables to "shock" (ie change relative to a starting base)
over different periods:
eg user "shocks" US interest rates 0.50% points above base during 201202-201304 (ie 2012 Quarter2-2013 Quarter4)
User may then add another "shock" to same variable:
US interest rates .75 % points above base during 201301-201404 (ie 2013 Quarter1-2014 Quarter4)
User may then add "shock" to different variable:
JAPAN interest rates (RSH_j) 1.00 % points above base during 201201-201404 (ie 2012 Quarter1-2014 Quarter4)

I have generated a Select area (ShockVarPlot) that concatenates the required component data from DD boxes for charting:
RSH_u,201202-201304,+0.50
RSH_u,201301-201404,+0.75
RSH_j,201301-201404,+1.00

(NB each line of the above Select box is formed after the "Add Shock" button is clicked, so this is the obvious
event to trigger the Chart Plot too)

For EACH particular variable being shocked (eg RSH_u, RSH_j) I would like to instantly plot the entire profile of each
shock. Subsequent shocks to the SAME variable may simply
append to earlier shocks or may (partially) overwrite depending if the time period chosen overlaps.
But once a NEW shock variable is chosen (eg RSH_j) , the previous plot (of RSH_u) simple gets overwritten in the common plot area.
The x-axis scale width can be hard-coded; say 201004-202104.

Charting Requirement (for common plot area) ----
"Add Shock" button=> First Plot - Plot RSH_u +0.50 above base over 201202-201304.......
"Add Shock" button=> ....then (partially) overwrite/append with +0.75 over 201301-201404
"Add Shock" button=> Second Plot - Delete above plot & Plot RSH_j +1.00 above base over 201301-201404

Chartplot needs to display the variable being charted eg "RSH_u"or "RSH_j"

Logic Requirement ----
If new shock => plot this magnitude over selected period within 201001-202104
If new shock (same variable) => plot this as above but this shock overwrites previous if any time-period overlap
If new shock (new variable) => delete first plot & plot this magnitude over selected period within 201001-202104

Question --------------
Is there a simple Javascript method to achieve this real-time plotting/appending on clicking "Add Shock" ?
I have seen things like FLOT charting but not sure how to read/chart my Listbox output in ShockVarPlot above

Any thoughts ?

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

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

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;
}

im clueless when it comes to javascript, but this is what im trying to find:

i have a page that has multiple text areas, i also have 4 links that when clicked i want to add some predefined text into the active text area the one with the text cursor in?

The Hyperlinks:
Code:

<a href="#sc">Shift Changed</a> | <a href="#ol">On Leave</a> | <a href="#ot">OverTime</a> | <a href="#ss">ShiftSwap</a>

The textareas:
PHP Code:
                <td><textarea name=details$i rows=4 align=absmiddle cols=16 value="$details[$i]\">$details[$i]</textarea></td> 


as you can see the textareas are created on the fly based on a php array.

would anyone be willing to put some code together for this?
or even give me the basics on how i can get the active textarea's name so i can pass that to a script that inserts into a given field?