|
JavaScript - Script Ignores The Change In The Select Menu
the script below should open a new window with a url specified in the select area. However, my script ignores the changes in the select area. it keeps opening the same page. I was wondering could someone take a look and tell me why?
Thank you very much. <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Jump Menu</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript"> function jump_menu() { var i=document.getElementById("page_select").selectedIndex; document.getElementById("jump_to_page").onclick=function() { (i==0) ? alert("Please select a page to go"):window.open("http://www."+document.getElementById("page_select").options[i].value); } } window.onload=jump_menu; </script> </head> <body> <select id="page_select"> <option>Select a Page</option> <option value="yahoo.ca">Yahoo</option> <option value="topnews.ru">Top News</option> <option value="google.com">Google</option> <option value="amazon.com">Amazon</option> </select> <button type="button" id="jump_to_page">Go</button> </body> </html> </code> Similar TutorialsI've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost. When I select the first option nothing appears in the second option. here's the javascript code: Code:
function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}
function valChange(){
var firstList = document.getElementById("emailaddress");
var secondList = document.getElementById("subject");
while(secondList.hasChildNodes())
secondList.removeChild(secondList.childNodes[0]);
switch(firstList.value){
case "1":{
secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
secondList.appendChild(createOption("Other", Other));
break;
}
case "2":{
secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
secondList.appendChild(createOption("Report Spam", Report Spam));
secondList.appendChild(createOption("Report Harassment", Report Harassment));
secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
break;
}
// ....
default:{
secondList.appendChild(createOption("Please select from the first list", ""));
break;
}
}
}
window.onload = valChange;
this is the form code Code: <div class="mailto_form"> <form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php"> <div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();"> <option value=""></option> <option value="1">Webmaster</option> <option value="2">Admin</option> </select> </div> <div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject"> </div> <div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value=""> </div> <div style="padding-bottom: 1em;">Enter the text contained in the image into the text box: <br /><img src="../includes/captcha.php" /> <br /><input type="text" name="userpass" value=""> </div> <div style="padding-bottom: 1em;">Message: <br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?> </div> <div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit"> </div> </form> </div> Link to the page http://www.netgamegurus.com/contact/ Hi JS Experts, I am working on a class registration system that requires students to register for a main class (101, 102 or 103). The student is supposed to select one main course as well as provide a second choice in case the first is not available. I have two dropdown select fields to capture data 1) Choice -1: 101 / 102 / 103 ( Student needs to select one - Reading the classID from classes table) 2) Choice -2: 101 / 102 / 103 ( If student selects 101 in Choice-1 then the only classes available under Choice-2 should be 102 or 103). How can I accomplish the above? Further to this there are two fields on the form where I would like to auto populate based on what they have selected in Choice-1 and Choice-2. For Example: If a parent selects choice1: 101 the child Choice1 field should autopopulate with 100. If a parent selects Choice2: 201 the child Choice2 field should autopopulate with 200 Any help would be really appreciated. Thanks Vinny Here's the code that I'm working with: 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">
function HouseSel(){
document.getElementById("HouseSelect").value = '3'
alert (document.getElementById("HouseSelect").value);
}
</script>
</head>
<body>
<form action="https://www.paypal.com/us/cgi-bin/webscr" method="post" name="_xclick">
<select name="item_name" id="HouseSelect">
<option value="0" selected="selected">--Please Select a House--</option>
<option value="1">Nags Head</option>
<option value="Rent Deposite: Calib ">Calibre</option>
</select>
<input name="calculate3" type="button" id="calculate3" tabindex="2"
onclick="HouseSel(); " value="Calculate"/>
</form>
</body>
</html>
But it's still returning the initial value. How do I get it to 3? I am trying to change a character limit based on items changed in a drop down menu. To do this I have one function that will change the posted count based on the currently selected option and another function that is a commonly used char count with a few tweaks. The main issue is getting the value of the currently selected option. I know that selectedIndex will return the position of the selected element rather than the actual value. I tried to code around that. I've tried every method I could find on google and nothing works. So, I may have a bigger problem on a higher level that I just don't understand. If any of you can take a look at my code and give me your thoughts I would be most appreciative. Thanks! 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>
<script type="text/javascript">
function checkTextArea(fromto){
var textstring = "textarea";
var id = textstring + fromto;
var destination = document.forms["form1"].[id.selectedIndex].text;
if (destination=="1") {
var limit = "500";
}
else {
var limit = "1000";
}
if (document.getElementById(id)){
var txt = document.getElementById(id).value;
if (txt.length>limit){
document.getElementById(id).value = txt.substr(0,limit);
}
len = document.getElementById(id).value.length;
span_id = "span" + id;
if (document.getElementById(span_id)){
document.getElementById(span_id).innerHTML = (limit-len);
} // if
} //if
} //function
function chardisplay(fromto) {
var deststring = "dest";
var identifier = deststring + fromto;
// no idea how to make this work...seems to stop working whenever I try to assign it to any kind of variable
// I have also tried assigning .value and .text
// I have also tried naming it with document.forms["form1"].[identifier.selectedIndex]
// also using .value and .text
var harmless = document.getElementById('identifier').selectedIndex;
alert("value="+document.getElementById('identifier').value);
alert("text="+document.getElementById('identifier').options.[harmless].text);
var spanstring = "spantextarea";
var spanidentifier = spanstring + fromto;
if (harmless=="1") {
document.getElementById(spanidentifier).innerHTML = "500";
}
else {
document.getElementById(spanidentifier).innerHTML = "1000";
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="POST" action="myurl">
<p><span id="spantextareafrSOMENUMBER">500</span> characters left </p>
<select name="destfrSOMENUMBER" onchange="javascript:chardisplay('frSOMENUMBER');\" onfocusout="javascript:chardisplay('frSOMENUMBER');\" onblur="javascript:chardisplay('frSOMENUMBER');\">
<option value="opt1">display option 1</option>
<option value="opt2">display option 2</option>
<option value="opt3">display option 3</option>
</select>
<textarea onkeyup="checkTextArea('textareafrSOMENUMBER');" name="mesgfrSOMENUMBER" id="textareafrSOMENUMBER" cols=50 rows=4></textarea>
</form>
</table>
</body>
</html>
Hello, I am trying to change the value of #name and #category inputs based on the value of select. A friend gave me the code below, but I can't get it to work. Thanks so much for your help Code:
<script type="text/javascript">
$('#Gift_Type').change(function(){
if ($(this).val() == 'Monthly'){
$('#name').val('Partnership')
$('#category').val('Partnership')
} else {
$('#name').val('Donation')
$('#category').val('Donations')
}
})
</script>
Code: <SELECT NAME="sub_frequency" ID="Gift_Type" onchange="OnSelectionChanged (this)"> <OPTION VALUE="1m">Monthly</OPTION> <OPTION VALUE="">One Time</OPTION> </SELECT> Code: <input type="text" id="name" name="name" value="Partnership" /> <input type="text" id="category" name="category" value="Partnership" /> I have html like this Code: <form>
<select name="otype[]" class="txtText" id="otype[]">
<option value="Processing">Processing</option>
<option value="Shipped">Shipped</option>
</select>
some code......
<select name="otype[]" class="txtText" id="otype[]">
<option value="Processing">Processing</option>
<option value="Shipped">Shipped</option>
</select>
some code.......
<select name="otype[]" class="txtText" id="otype[]">
<option value="Processing">Processing</option>
<option value="Shipped">Shipped</option>
</select>
I need to change all select lists options to "Shipped" if admin clicks on "Shipped" on top of the page and "Processing" if customer clicks on "Processing" link (<a href="javascript:select_processing()">Processing</a>) Can somebody help me in doing so? Hello all, I am having a problem, and since I am quite new in the Javascript code I hope somebody can help me here. This is my current code: Code: <select class="Form" name="opties"> <option value="AAA">AAA</option> <option value="BBB">BBB</option> <option value="SLX" selected>Selecteer optie</option> </select> Now my intention is the following: When the option with value SLX gets selected it needs to get a special css style. It is not a problem to give the option this style in the list itself, but once selected it always changes to the original style (standard font and color) in Chrome and Mozilla. Now I searched on the net and sometimes I find things like this: Code: function displayOption(divName)
{
document.getElementById(divName).innerText=document.form1.select1.options[document.form1.select1.selectedIndex].value;
}
<select class="Form" name="opties" onChange="displayOption('div1');">
<option value="AAA">AAA</option>
<option value="BBB">BBB</option>
<option value="SLX" selected>Selecteer optie</option>
</select>
But I suppose this always changes the style of the selected item? It only needs to change when the option SLX is chosen... Anyone knows how to solve this problem? Gonna be asking a few Q's about a quiz javascript i'm making. I'm pretty new to JS. I have this, a select box, in the body. Code: <div align="center"><center><p><strong>Your response:</strong> <select
name="theresponse" size="1" onChange="responses()">
<option value="-----">----</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
Then the relevant bit of script lower down Code: var loop=0
function responses(){
loop++
var temp2=document.instantquiz.theresponse
var temp3=temp2.options[temp2.selectedIndex].text
if (temp3!=solution[whichone]&&temp2.selectedIndex!=0)
document.instantquiz.thesolution.value="Sorry, the correct answer is "+solution[whichone];
else if(temp2.selectedIndex!=0)
document.instantquiz.thesolution.value=compliments[whichone];
}
I want to add 1 to 'loop' (so that people can't score twice etc.). The problem I have here is that loop just doesn't want to go up. I've tried all sorts of things like doing it under a new variable, and even putting a new function up, all in vain. Why doesn't it work? =s I have two drop down lists , list1, list 2. I want it to change according to the radio button selected by the user. If the user selects radio button1, lists1 should be displayed. If the user selects radio button2, lists2 should be displayed. How can i achieve this using javascript. Please somebody help me. all i have to do is the image to change automatically based on the option you selected from the drop down list. here is the code, any help is appreciable. thanks in advance. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> img{ height:95px; width:95px; display:block; margin-top:10px; } #caption{ font-family:Verdana,tahoma,arial; font-size:8pt; text-align:left; display:block; width:250px; } </style> <script type="text/javascript"> window.onload=function() { var caption=['Default Image Caption', 'begonia', 'daffodils', 'mixture', 'natural', 'purple', 'red flower', 'sunflower', 'tulip', 'two flowers'], // This will be your images caption bp='..\images', //base url of your images imgnum=9, //Number of your images. This should match on your comboboxes options. thumb=document.getElementById('thumb'), //id of your image that will be changing description=document.getElementById('caption'), //id of your caption combobox=document.getElementById('selection'); // id of your combobox. combobox.onchange=function() { thumb.src=bp+'Picture'+this.value+'.jpg'; description.innerHTML=caption[this.value]; } } </script> </head> <body> <label>Please Change the pictu </label> <select id="selection"> <option>Change Picture</option> <option value="1">begonia</option> <option value="2">daffodils</option> <option value="3">mixture</option> <option value="4">natural</option> <option value="5">purple</option> <option value="6">red flower</option> <option value="7">sunflower</option> <option value="8">tulip</option> <option value="9">two flowers</option> </select> <br> <img src="..\images" alt="mypic" id="thumb"> <span id="caption">Caption for the default Image</span> </body> </html> thanks again Hi there, I am a new javascript guy - struggling a bit but marching on - The following code works fine to set a form field - Code: document.getElementById("ZS_Land").value = (empLand.innerHTML);
However, I changed to form field into a select with option list, and I need it to set an option from the select now - the select has the same name/id as the field had, but is not working Any ideas how I do that ? Many thanks in advance Glorifindal Hello, I just joined the forum. I'm hoping someone could help me out or point me in the right direction. I am trying to set up a simple interaction for users. The user would be required to select a width then height from two separate drop down menus. I used this as an example to work from: http://www.w3.org/TR/WCAG20-TECHS/wo...dynselect.html The list of heights would not be available until the user selects a width.(similar to the example link above). Each width would have slightly different heights associated with it. After the user selects a width then height an image would be displayed based on that combination. So for example if the user selects 12w/30h they would see "01.jpg" if the user selects 12w/36h they would see "02.jpg". This would all be done on the same page. The user should be able to update the image by combining the different width/height options indefinitely. If anyone has a link to an example or can provide a basic structure I could build of off I would be extremely grateful, thanks. Hey there guys, i've been having a problem lately and i can't seem to find any solution for that. I know you guys could help me, so here it goes: I have a javascript promt box (as you can see in the code below) it works perfectly fine with internet explorer however it's NOT working in firefox. I tried everything i can think of, but still its not working! Please check the code below and give me the solution for firefox. Thank You! <%@LANGUAGE="VBSCRIPT" CODEPAGE="28592"%> <!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=iso-8859-2" /> <title>Choose Your Language</title> <script language="javascript" type="text/javascript"> function checklang() { var lang = prompt('Choose A Language:'+'\n' + "(Ex: Armenian, Arabic, English, French, Greek, Russian)",'English'); if (lang==null || lang=="") {lang=""; return;} if (lang=="Armenian" || lang=="Arabic" || lang=="English" || lang=="French" || lang=="Greek" || lang=="Russian") {location.href = "sermon-section.asp?lang="+lang}; else location.reload(); } </script> </head> <body> <a href="#" onclick="checklang()">Choose Your Language</a> </body> </html> Hi, what would be the best way to have a hidden array of possible text directed at a textarea and then if something is not within that array "onfocus", a certain select option is chosen within that form? Thanks Hi I have a form. In this form i have a pop down menu with 1,2,3,4,5 numbers in it. And after that i have 8 more form fields. what i want is when user select any number from pop down menu then these 8 fields should appear. for example when user select 2 from pop down menu then then these set of fields should appear twice i mean 8+8=16. and so on. my code is here 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>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>
<select name="jumpMenu" id="jumpMenu">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p>
Type :
<select name="jumpMenu2" id="jumpMenu2" onchange="MM_jumpMenu('parent',this,0)">
<option value="Delux">Delux</option>
<option value="king">king</option>
<option value="exe">exe</option>
</select>
</p>
<p>
<label>Number:
<input name="textfield" type="text" id="textfield" size="5" />
</label>
</p>
<p>
<label>Name:
<input type="text" name="textfield2" id="textfield2" />
</label>
</p>
<p>Date Arr:
<label>
<input type="text" name="textfield3" id="textfield3" />
</label>
</p>
<p>Dep Date:
<label>
<input type="text" name="textfield4" id="textfield4" />
</label>
</p>
<p>
<label>
<input type="checkbox" name="checkbox" id="checkbox" />
Extra</label>
</p>
<p>
<label>
<input type="checkbox" name="checkbox2" id="checkbox2" />
Park</label>
</p>
<p>Remarks:
<label>
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
</label>
</p>
</form>
</body>
</html>
how this can be done in js I have two select menus, the second menu items should be determined based on the selected item of the first menu, and the problem I face is about using document.write() in adding the select menu items, when I write the items like this it work: Code: <select name="cities" >
<script type="text/javascript">
document.write("<option value=''>city1</option>");
document.write("<option value=''>city2</option>");
document.write("<option value=''>city3</option>");
</script>
</select>
but when I put them in a function they wrote as a text not a menu item, and I must use a function and use if or switch in it, so what's the solution? Hello, I am trying to make a custom select menu. Here is what I have so far: http://mikewgd.com/wp-content/portfo...custom-select/ Im just stuck at getting the <li> to become selected and etc... I am using this as reference: http://v2.easy-designs.net/articles/replaceSelect/ -- Im not using there script exactly Im doing it a different way. Im doing it more as a dropdown menu Code: <ul class="select">
<li class="selected">
cheese
<ul class="drop">
<li>milk</li>
<li>bread</li>
<li class="selected">cheese</li>
<li>pickles</li>
<li>salsa</li>
</ul>
</li>
</ul>
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! Hi guys, I am after a script which will has parametres to modify the select menu in webpages. I have looked at niceforms http://www.emblematiq.com/lab/niceforms/demo/ However i dont know how to apply it. Any tips would be much appreciated. George |
|||||||