JavaScript - Retrieve Select Box Value Using Js
hi all,
as i am very stupid in javascript.... supposing i had a select box on a page with an id of "select1" and name of "select1" as well... using javascript how would i access the select box's selected value and how would i print it out on the screen.... thanks in advance.... cheers sanjeev 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. I'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 guys can help me are very little versed in javascript ... I explain my problem! I have a table where they passed the results of a query ... The table field is called Article and consists of about 500 characters, but the substring in the table with a step the first 40 characters, and now the question arises ... I would click on the text of the article and see the page the entire article ... Code: query="SELECT * FROM Articolo ORDER BY titolo DESC"; ResultSet r = stmt.executeQuery(query); %> <table border="1"> <tr><td> titolo </td> <td> articolo </td> <td> data inser </td></tr> <% while(r.next()) { Tot = r.getString("titolo"); Art = r.getString("articolo"); dat = r.getString("data_inserimento"); String meta = ""; String metadata = ""; meta = Art.substring(0,40); metadata = dat.substring(0, 10); StringBuffer sb = new StringBuffer(meta); sb.replace(37,40, "..."); String s2 = sb.toString(); %> <tr> <td> <%= Tot %> </td> <td> <a href="#" onClick="this.innerText = '<%= Art %>';"><%= s2 %></a> </td> <td> <%= metadata %> </td> </tr> <% } %> </table> Hi guys, i need to retrieve the url created in the following script and embed it in the player below. Here is what i have. You can see how it works (and doesn't) here http://www.brittv.co.uk/template.php...ws.stream_360p Code: <html> <head> <title>...</title> <?php $URL_GETKEY="http://www.uktvlive.com/tvc/key.php"; function doCurl($url) { $ch = curl_init($url); curl_setopt($ch, CURLOPT_HEADER, 0); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $output = curl_exec($ch); curl_close($ch); return $output; } $a=doCurl($URL_GETKEY); $split=explode("<split>",$a); ?> <script type="text/javascript"> // parse the querystring and create a dictionary of terms for later use: var qs = [ ]; // where the dictionary goes if ( location.search.length > 1 ) { var pairs = location.search.substring(1).split("&"); for ( var p = 0; p < pairs.length; ++p ) { var pair = pairs[p].split("="); qs[pair[0]] = unescape( pair[1] ); } } // do the replacements *after* page is loaded, for simplicity: function doReplacements( ) { var link = document.getElementById("link1"); link.href = "rtsp://81.104.67.230/"+ qs["host"] + "/" + qs["stream"] + "?userID=" + "<?php echo $split[5];?>" + "&accessKey=" + "<?php echo $split[6];?>" + "&sdp=alt&device=mobile"; link.innerHTML = qs["page"]; // and of course you could do any other replacements, too. } window.onload = doReplacements; </script> </head> The following part produces the url Code: <body> <br/><br/> <a id="link1">Generic Link</a> <br/><br/> Lastly we have the player embed code, this is where im stuck im afraid Code: <script type="text/javascript"> var url = qs["link1"]; // or whatever name it was passed by document.write('<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" ' + ' WIDTH="300" HEIGHT="160" ' + ' CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">\n' + '<PARAM name="SRC" VALUE = "http://www.tvpc.com/images/image1.gif" >\n' + '<PARAM name="QTSRC" VALUE = "' + url +'" >\n' + '<PARAM name="HREF" VALUE = "' + url + '" >\n' + '<PARAM name="AUTOPLAY" VALUE = "true" >\n' + '<PARAM name="CONTROLLER" VALUE = "true" >\n' + '<PARAM name="TYPE" VALUE = "video/quicktime" >\n' + '<PARAM name="TARGET" VALUE = "myself" >\n' + '<EMBED \n' + ' SRC = "#" \n' + ' QTSRC = "' + url + '" \n' + ' HREF = "' + url + '" \n' + ' TARGET = "myself"\n' + ' CONTROLLER = "true"\n' + ' WIDTH = "300" \n' + ' HEIGHT = "160" \n' + ' LOOP = "false" \n' + ' AUTOPLAY = "true" \n' + ' PLUGIN = "quicktimeplugin" \n' + ' TYPE = "video/quicktime" \n' + ' CACHE = "false" \n' + ' PLUGINSPAGE= "http://www.apple.com/quicktime/download/" >\n' + '</EMBED>\n' + '</OBJECT>\n' ); </script> </body> </head> Thanks in advance guys I have been able to use javascript to place the last modified date in the bottom left corner of my document however I do not need the time with it. How do I use the substring() method on the lastModified property? Here is what it looks like. Code: <script type="text/javascript"> <!--Hide from old browsers var today = new Date() var dayofweek = today.toLocaleString() dayLocate = dayofweek.indexOf(",") weekDay = dayofweek.substring(0, dayLocate) newDay = dayofweek.substring() dateLocate= newDay.indexOf(",") monthDate = newDay.substring(0, dateLocate+1) yearLocate = dayofweek.indexOf("2011") year = dayofweek.substr(yearLocate, 4) document.write("<p style='font-family:bold, Arial, Helvetica, sans-serif; font-size:xx-small; color:#000000'>") document.write("Copyright the Huysken Performing Arts Center. ") document.write("<br />This document was last modified "+document.lastModified+"</p>") The text book says to use a substring() method on the lastModified property, but I am uncertain on how to do that. Any help is greatly appreciated, Thank you. Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear). I need some advice on how to do this Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <form name = "form1"> <fieldset> <legend>Fruit or Veggie</legend> <select name = "S1"> <option name = "fruit">Fruit </option> <option name = "veggie">Veggie</option> </select> <select name = "S2" </select> </fieldset> </form> <script language="JavaScript" type="text/javascript"> ??? </script> </body> </html> 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 Hey Guys When a user changes the select list called "reason_code_master" I need the uodatecodes() function to update all the other select list with the id of "reason_codes" with the same . How can I do this. <select size='1' onchange="updatecodes()" name='reason_code_master'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> Hi, I have several input text boxes in a <FIELDSET> tag. I would like to load id attributes of the <FIELDSET> tag into an array and then process the array. My code example is below my signature. Thank You in Advance for Your Help, Lou 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> <SCRIPT LANGUAGE="JavaScript"> function DisplayDetails(obj_id) { alert("DisplayDetails(" + obj_id + ")"); var form_object = new Array(document.getElementById(obj_id)); var form_elements = form_object.elements; alert(form_object[0]); } </SCRIPT> </HEAD> <BODY> <font size="4" face="Arial" color='Black'> Hi Barney <form> <fieldset id="Person1"> <legend>Person 1:</legend> Name: <input type="text" id="name1" size="30" /><br /> Email: <input type="text" id="email1" size="30" /><br /> Date of birth: <input type="text" id="dob1" size="10" /> </fieldset> </form> </font> <button type="button" onclick="DisplayDetails('name1')">Click Me!</button> </html> Hello I am trying to iterate out the values of an xml file. I have got the file to load though I have not yet been able to extract the values. Considering that theXml is an xml file and 'coords' are tags containing a coordinate how would I extract the value. Here is the code I am using Code: var coordTags = theXml.getElementsByTagName( 'coords' ); var len =coordTags.length;///this works var coord =coordTags[0].value;///this doesn't work var coord =coordTags[0].text;///this doesn't work var coord =coordTags[0].innerText;///this doesn't work parent.document.receiver.theres.value = coord; I am sure for some of you this is a really simple question so please someone help!! Hello, I'm very new to JavaScript as well as this forum, so apologies if I mess up somewhere. Okay, so I have a HTML doc with a JavaScript attached to it, and in the HTML I have a checkbox. All I want to do is to pass the checkbox data to Javascript as a true/false. Okay, so below is my HTML: Code: <head> <script type="text/javascript" src="java.js"></script> </head> <body> <input id="toggle" type="checkbox" value=""> </body> And this is my JS: Code: var toggleData = false; Now where do I go from here? I tried using getElementByld('toggle'); But no result. I sure would appetite some help here. Thanks Hi, I know there are several ways to do this- but which way is best practice? I can access a variable from one function by making it a global variable, but I read that this isn't the most ideal way, and is a last resort. So for example if I have this: Code: function num1(){ var firstNum = 35; return firstNum; } function num2(){ var secNum = 52; return secNum; } function addNums(x,y){ var f = num1(x); var s = num2(y); var total = f + s; alert(total); } Then I call this function with a button. Now, I know this works, but it doesn't seem like a very good way to do what I'm after. Or is it? Any help/ tips would be great. edit: The idea is that the functions won't just return a single value and that's it. They will return a users choice in a given scenario, so they might return the user's age from the first function, then their location in the next etc etc, then I want to use this information in a separate function. Hi there I am trying to retrieve xml data using the prototype Ajax.Request. I think I am getting the xml though I am unsure as to how to retrieve the text from the nodes here is the function I am using to try and populate a text field Code: function makeMarkerXml() { new Ajax.Request('coords.xml', { method:'post', onSuccess: function(transport){ ////this will not work///////// var coord = transport.responseXML.childNodes(0).childNodes(0).firstChild.text; /////////////////////////////// }, onFailu function(){ alert('Call failed') } }); } can anyone help? Hi guys, I'm new to the forum, and new to JavaScipt. Here's my problem. I create a form dynamically with Java Script dependin on certail actions a user choose. The end result is a form asking the user to confirm sending one or more SMS message via a mesage gateway outside of my system. Confirmation will then trigger a funtion with one or more statements like this: [CODE] document.frmSMS.action ="http://www.infobip.com/Addon/SMSService/SendSMS.aspx?user=User&password=Password&sender=Sender&SMSText=Friendly Reminder from Joe Bloggs Pty Ltd: You have an outstanding amount of R 4,534.00 that is 135 days ovedue. Please settle to as soon possible.&IsFlash=0&GSM=27826555959"; document.frmSMS.submit(); [ICODE] The target site then responds with either an error code (i.e. -10) or a reference number. The question is - How do I retrieve the error code?? Your assistance will be appreciated. NicOos HI I'm using this form in my site, but I want to amend it so the form updates based on the option ID, not the option Value. This will make it easier for me to save the correct data in the value field.. Any ideas ? PHP Code: <html> <head> <script type="text/javascript"> function setOptions(chosen) { var selbox = document.myform.opttwo; selbox.options.length = 0; if (chosen == " ") { selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' '); } if (chosen == "1") { selbox.options[selbox.options.length] = new Option('first choice - option one','oneone'); selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo'); } if (chosen == "2") { selbox.options[selbox.options.length] = new Option('second choice - option one','twoone'); selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo'); } if (chosen == "3") { selbox.options[selbox.options.length] = new Option('third choice - option one','threeone'); selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo'); } } </script> </head> <body> <form name="myform"><div class="centre"> <select name="optone" size="1" onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);"> <option id="0" value=" " selected="selected"> </option> <option id="1" value="1">First Option</option> <option id="2" value="2">Second Choice</option> <option id="3" value="3">Third Choice</option> </select><br /> <br /> <select name="opttwo" size="1"> <option value=" " selected="selected">Please select one of the options above first</option> </select> <input type="button" name="go" value="Value Selected" onclick="alert(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value);"> </div></form> </body> </html> So how do I get CHOSEN to equal the ID not the value ? Thanks Hello Everyone!!! I have a question, and any advise or help would be greatly appreciated. I know that ANCHORS situated on a page may be retrieved from another page using the method [a href="faq.html#here"]. How would I retrieve an ANCHOR within an IFRAME from another page. Below are my codes. Thank you all in advance, mbay -- [Help Page] <html><body><head><title>Help</title></head><table><tr><td>Below I will show an example of html. For those of you who don't know what HTML is, click <a href="faq_iframe.html#whatis"> here</a></td></tr><tr><td>Below I will show an example of tables. For those of you who don't know what tables are, click <a href="faq_iframe.html#table"> here</a></td></tr><tr><td>Below I will show an example of a hyperlink. For those of you who don't know what HYPERLINK is, click <a href="faq_iframe.html#hyper"> here</a></td></tr></table></body></html> -- [FAQ] <html><body><head><title>FAQ</title> <script language="javascript"> <!-- Hide the script from old browsers -- function surfto(form) { var myindex=form.dest.selectedIndex var passed = form.dest.options[myindex].value var acomma = passed.indexOf(",") var chars = passed.length var filename = passed.substring(0,acomma) var where = passed.substring(acomma+1,chars) if(filename != "") {window.open(filename, rel="nofollow" target=where)}; } //--> </script> </head><table><tr><td><form name="myform"><select class="pulldown" name="dest" size="1"><option>Select An Option</option><option value="faq_iframe.html#whatis,FAQ">What is HTML</option><option value="faq_iframe.html#table,FAQ">What are tables?</option><option value="faq_iframe.html#hyper,FAQ">What are hyperlinks?</option></select> <input type="button" value="GO!" onclick="surfto(this.form)"></form></td></tr><tr><td><IFRAME SRC="faq_iframe.html" Title="FAQ" SCROLLING="auto" NAME="FAQ" WIDTH="200" HEIGHT="200" ALIGN="center" FRAMEBORDER="no" style="border:15px ridge #0066FF"></IFRAME></td></tr></table></body></html> -- [FAQ IFRAME] <html><body><head><title>FAQ IFRAME</title></head><table><tr><td><font size="7">Welcome to the FAQ SECTION</font></td></tr><tr><td><a name="whatis"><b>What is Html?</b></a></td></tr><tr><td>HTML ( H yper T ext M arkup L anguage) is the language used to write Web pages. You are looking at a Web page right now. </td></tr><tr><td><a name="table"><b>What are tables?</b></a></td></tr><tr><td>Think of your tabular information in light of the coding explained below. A table has heads where you explain what the columns/rows include, rows for information, cells for each item. In the following table, the first column contains the header information, each row explains an HTML table tag, and each cell contains a paired tag or an explanation of the tag's function. </td></tr><tr><td><a name="hyper"><b>What are hyperlinks?</b></a></td></tr><tr><td>Hyperlinks are what connect the world wide web, without them we would get nowhere without knowing the exact URL (Universal Resource Locater) of the document we are looking for. Hyperlinks or more commonly just called "links" can do many things, but they always call for an action. A link could open your email client, it can move you to different pages or it can move you to different spots within the same document. </td></tr></table></body></html> So, this is my last problem. If I can nail this, then the website will be completely AJAX driven, and will be spectacular. It took me a while to figure out just how to ask the question. lol Now it is really simple. 1) When I hit the button, in the simplified example below, the website sends a code to the server. 2) The server then re-writes the "xyz.js" JavaScript file with a new array of values. Is there any way to re-retrieve that JavaScript file, from the server to make it the current "xyz.js" rather than the old one that loaded on the client originally. I can get a new XML data file and re-submit that to the website, but how do I re-retrieve the new JavaScript code? Code: <html> <head> <script src="xyz.js" type="text/javascript"></script> </head> <body> <button onclick="onload();">Change</button> </body> </html> Good morning! I am Brazilian, sorry if there is a clerical error because I used the Google translator. I'm having trouble recovering in JS content of the columns of a <TABLE>. I did many searches but found nothing that could help me. I appreciate any help. Thank you! Manoel Zancheta |