|
JavaScript - Select Box Redirect, On Only One Option.
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. Similar TutorialsHey chaps, hope someone can help with this: I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables: // tbl_main_colour: Code: ID, NAME 1, Red 2, Blue 3, Green // tbl_shade_colour: Code: ID, NAME, FK_MAIN_COLOUR_ID 1, Light Red, 1 2, Dark Red, 1 3, Light Blue, 2 4, Dark Blue, 2 5, Light Green, 3 6, Dark Green, 3 What I'm after is something to filter the second select option, after the first select option has been chosen // Select 1: Code: Red // Select 2: Code: Light Red Dark Red I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated. 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. 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 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. 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 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 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>
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 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 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. 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! I have selectitem list which has name value pairs SelectItem(value, name), i need to iterate in JS and i need to populate in to option list, like below, but it dint work for me. Please any help function loadme(listVle){ // listVle is the List<SelectItem> var ele = document.getElementById('numadts'); for (var i=0;i<listVle.length;i++) { var elOpt = document.createElement('option'); var fldName = listVle.item(i).getAttribute('name'); // This line the problem is elOpt.text = fldName; elOpt.value = fldName; try { ele.add(elOpt, null); } catch(ex) { ele.add(elOpt); } } } and the HTML <BODY> <FORM> <select name="numadts" id="numadts" onclick="loadme()""> </select> </FORM> </BODY> Hey guys.... me again.... tried doing this a few different ways but it seems no matter what I do the last option won't remove for some reason..... if it's the only option, it won't remove either. as it's the last one. Here is my code.. PHP Code: function removeCats() { // Set selected category list var sel_cats = document.getElementById('cat_sel'); for (i = sel_cats.length-1; i >= 0; i--) { // Check if the cat is selected if (sel_cats.childNodes[i].selected == true) { // Remove the category sel_cats.removeChild(sel_cats.childNodes[i]); } } } Thanks again guys! 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> 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> hi guys! i would like to know the script for me to auto select an option in a menu on a single click. so i have two pages. on the first page is the button. second page is the drop down menu. menu has selection "fruit" "vegies" "meat". by default fruit is selected. when i click on that button it will automatically select the menu on the second page for "meat". thanks!! 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"/> 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. If i have a drop down list on my website, and i want to use javascript to change its selected value, however, i do not have the id/name attribute of the option i want to select, only have the "value" attribute of the option, can it be done? <select name="category"> <option value="">No Preference</option> <option value="Apples">Apples</option> <option value="Oranges">Oranges</option> <option value="Pears">Pears</option> <option value="Banana">Banana</option> </select> I imagine somehow.. selecting the options and looping through them and match the value. Really new to javascript, can anyone advise? Thanks in advance! |
|||||||