JavaScript - Problem With Onchange Attribute (i Think)
Hi all,
I have the following code: Code: <html> <head> <title>Page Title</title> <script type='text/javascript'> mymusic=[]; tracks=[]; mymusic=[{title:"a",artist:"b",artwork:"c",tracks:[{tracktitle:"d",trackmp3:"e"},{tracktitle:"x",trackmp3:"z"}]},{title:"f",artist:"g",artwork:"h",tracks:[{tracktitle:"i",trackmp3:"j"}]}]; function nowplaying(trackindex,albumindex){ q+="<html><head></head><body><p>Song:</p>"; q+="<p>"+mymusic[albumindex].tracks[trackindex].tracktitle+"</p>"; q+="<p>from Album:</p>"; q+="<p>"+mymusic[albumindex].title+"</p>"; q+="<img src=\""+mymusic[albumindex].artwork+"\">"; with(document.getElementById('nowplays').contentDocument){ open(); write(p); close(); } } function anything(i){ p=""; p+="<html><head></head><body><form><select onchange='parent.nowplaying(this.selectedIndex,i);' size='"; p+=mymusic[i].tracks.length+1+"'>"; p+="<option>Choose a song...</option>"; for(j=0;j<mymusic[i].tracks.length;j++){ p+="<option>"+mymusic[i].tracks[j].tracktitle+"</option>"}; p+="</select></form></body></html>"; with(document.getElementById('songs').contentDocument){ open(); write(p); close(); } } function showinitial(){ s=""; s+="<html><head></head><body><form><select onchange='parent.anything(this.selectedIndex-1);' size='"; s+=mymusic.length+1+"'>"; s+="<option>Choose an artist...</option>"; for(i=0;i<mymusic.length;i++){ s+="<option>"+mymusic[i].title+"</option>"}; s+="</select></form></body></html>"; alert(s); with(document.getElementById('albums').contentDocument){ open(); write(s); close(); } } </script> </head> <body onload="showinitial();"> <style type='text/css'> div { padding:0;margin:0; } .container { position:relative; width:100%; height:100%; } .topcontainer { height:65%; } .box { float:left; width:32%; height:90%; padding:5px; border:1px solid black; overflow:scroll; } .bottom { height:35%; border:1px solid black; } </style> <div class="container"> <div class="topcontainer"> <div class="box"><p>Albums:</p><iframe id='albums'>hi </iframe></div> <div class="box"><p>Songs:</p><iframe id='songs'></iframe></div> <div class="box"><p>Now Playing:</p><iframe id='nowplays'></iframe></div> </div> <div class="bottom"></div> </div> </body> </html> which, as you will see if you run it, creates an iframe-based media player based on a collection of albums, and songs within these albums (I just used letters to define these albums and songs in the mymusic array, for simplicity). Focusing on the top 3 iframes, the way I have set out the user interaction is to generate the HTML for forms of available albums and songs using Javascript, and write them to the iframes in the body. This nearly works fine: if you run it and make a selection in the 'Albums' menu, you will see that the options this causes to display in the 'Songs' menu correspond with the mymusic array, so this works. However, when I choose a song, the function "nowplaying(trackindex,albumindex)" should be called using an onchange event in the 'Songs' form, in the exact same way as in the form generated using "showinitial()"...but the function isn't called. I have ruled out the coding of "nowplaying" itself as a cause, because even when I change "nowplaying" to sth simple like alert("hello"), with no variables or anything being passed in, it still doesn't call. So this leads me to think the problem is with the onchange attribute in "anything", but I can't see what the problem is. The way I coded it is no different to before, and that worked fine, so why won't this work? Any help would be much appreciated! Similar TutorialsI'm trying to figure out how to call multiple functions within the same onchange attribute, associated in the same select object. I have a drop-down menu in which I can select MN, WI, and Other. I've worked it now so that when I select MN, a new drop-down menu appears in which I can select one of MN's Counties. I want to be able to do the same with WI and Other, but my code is only calling MN. Here it is: Code: <html> <head> <script="text/javascript"> function showMN(select) { select.form.MN.value=""; // reset the text box value document.getElementById("MNBox").style.display = select.value == "MN" ? "inline" : "none"; } function showWI(select) { select.form.WI.value=""; // reset the text box value document.getElementById("WIBox").style.display = select.value == "WI" ? "inline" : "none"; } function showOther(select) { select.form.otherState.value = ""; // reset the text box value document.getElementById("otherBox").style.display = select.value == "Other" ? "inline" : "none"; </script> </head> <body> <select name="state" onchange="showMN(this);showWI(this);showOther(this)"> <option value="" selected="selected">Choose...</option> <option value="MN">MN</option> <option value="WI">WI</option> <option value="Other">Other</option> </select><font color="red">*</font> <span id="MNBox" style="display:none"> County: <select name="MN"> <option value="" selected="selected">Choose...</option> <option value="List of MN Counties">List of MN Counties</option> </select><font color="red">*</font> <span id="WIBox" style="display:none"> County: <select name="WI"> <option value="" selected="selected">Choose...</option> <option value="List of WI Counties">List of WI Counties</option> </select><font color="red">*</font> <span id="otherBox" style="display:none"> <input type="text" name="otherState" placeholder="Enter state here"/><font color="red">*</font> <input type="text" name="otherCounty" placeholder="Enter County here"</span> </body> </html> Am I even close? I need the code to run a few functions on change, the box is a "date picker" and I unsure how to add my onchange function without breaking the date picker, can anyone help ? Code: p>end date:</p> <input id='secondDate' type="text" size="25"><a href="javascript:NewCal('secondDate','ddmmyyyy')"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date" onchange="dateDiff() ;calculate() ;deposit() ;milecharge() ;agecheck()"></a> Problem with onchange Javascript Hi, I have a variable declarared called minute which chanches every 3 minutes. if the variable output changes i want to call a href not using onclick but my trigger the change of my varable "minute" in detail <div> <input type="text" size="11" id="loadvideoid" value="u1zgFlCw8Aw" /> <a href="javascript:void(0)" onclick="loadNewVideo(document.getElementById('loadvideoid').value, document.getElementById('startseconds').value)"><- Load video</a> | Start at: <input type="text" size="4" id="startseconds" value="0" /> </div> The part of the script above is coming from http://code.google.com/intl/nl/apis/...example_1.html Have sombody a hint or a script for me how to do this PS i am a newbee, and want to learn !!! Thanks in advance Simon Netherlands Hoorn Hi All, Need a bit of help here, need this SELECT to submit the page and end up at the below URL, correctly passing the GET values through the string. <code> <select name="dir-fact-misma" id="dir-fact-misma" class="text100" tabindex="" onChange="alta_nueva.action='alta.php?page=p2#alta'; return true;"> <option value="Si" <?php if(!isset($_POST['dir-fact-misma']) || $_POST['dir-fact-misma'] == 'Si') print "Selected='Selected '"; ?>>Si</option> <option value="No" <?php if(isset($_POST['dir-fact-misma']) && $_POST['dir-fact-misma'] == 'No') print "Selected='Selected '"; ?>>No</option> </select> </code> the form in which this SELECT is placed needs to be submitted so that other fields in the form are not lost, they are saved in Session Variables. the same javascript but activated through an onclick event works perfect elsewhere in the same form with the following code, i think its the onChange that doesn't work for some reason. <code> <input name="p1" type='submit' id="p1" onclick="alta_nueva.action='alta.php?page=p1#alta'; return true;" value='1' /> </code> the page is programmed in PHP. Any help is appreciated. Hello all, i'm starting to use Niceforms solving for the better appearance of my forms (http://www.emblematiq.com/lab/niceforms/help/) In my page i have for example this form Code: <form action="<?echo $_SERVER["REQUEST_URI"]?>" method="post" class="niceform"> <label>order by:</label> <select size="1" name="orderby" onchange="this.form.submit()"> <option value="name"> Vzestupně </option> <option value="name1"> Sestupně </option> </select> <input type = "hidden" name = "akce4" value = "zmena_razeni_prodejci" /> </form> I modified this form follows (how it descibed http://www.emblematiq.com/lab/niceforms/help/): Code: <form action="<?echo $_SERVER["REQUEST_URI"]?>" method="post" class="niceform"> <label>order by:</label> <select size="1" name="orderby" class="NFOnChange" > el.lnk._onclick = el.onclick || function () { if(this.ref.oldClassName == "NFOnChange") { "this.form.submit()" }}; <option value="name"> Vzestupně </option> <option value="name1"> Sestupně </option> </select> <input type = "hidden" name = "akce4" value = "zmena_razeni_prodejci" /> </form> Author Niceforms wrote about onchange: By default, Niceforms overrides the onchange attributes of any drop down options, thus making a classic jump menu unusable. However, there is a quick workaround. Add a custom class name to that particular select element (i.e. class="NFOnChange") so that the script can separate it from all the other regular select elements. Within the option(el, no) function, add the following code: Code: el.lnk._onclick = el.onclick || function () { if(this.ref.oldClassName == "NFOnChange") { //insert your code here }}; Instead of the commented line simply insert your own custom javascript that should be executed when that particular option is selected. but i dont know how it must be edited. I think that there is a syntax problem in "this.form.submit()". i dont know how i can change it. Because now i have a beutiful form but when i try to change option it nothing happens. Could somebody help me? Im beginner in programming javascript.......thank you very much...Petr What I am trying to achieve, is a button that calls a function that changes the onclick attribute of that button, so that when it is clicked again, it resets the onclick attribute to call the default function. here is what the stripped down code looks like: Code: <html> <head> <script type="text/javascript"> function remove_prep(a){ a.value="cancel"; a.onclick="cancel_remove(this);"; } function cancel_remove(a){ a.value="remove"; a.onclick="remove_prep(this);"; } </script> </head> <body> <input type="button" value="remove" onclick="remove_prep(this);" /> </body> </html> for some reason, it only fires once, after which it ceases to work properly. thanks for the help this part of my code is killing me. i have the code: foreach($product_names as $product_row) { ?> <tr> <td > </td><td width='200px'><?php echo $product_row->getName();?></td> <td width='200px'><input type="checkbox" name="graphic[]" value="<?php echo $product_row->getId();?>" onclick="check()"/></td> <td width='200px'><input type="checkbox" name="text[]" value="<?php echo $product_row->getId();?>" onclick="check()"/></td> </tr> <?php } ?> and a submit button on the page. the i also have the javascript code for the onclick="check()" : <html> <head> <script type="text/javascript"> function check() { var graphics = document.getElementsByName("graphic[]"); for(i=0;i<graphics.length;i++) { if(graphics[i].checked) { if(document.getElementById('submit').style.display=='none') { document.getElementById('submit').style.display='block'; } } } var text = document.getElementsByName("text[]"); for(i=0;i<text.length;i++) { if(text[i].checked) { if(document.getElementById('submit').style.display=='none') { document.getElementById('submit').style.display='block'; } } } } </script> </head> so what all this means is i have two arrays of checkboxes for each product. as soon as i check any checkbox the submit button appears. i click on the submit button and i go to the next form. the problem now comes in if i click on the "back" button to go back to the previous page via the bwrowser..the submit button is disabled althou all my checkboxes that i checked, are still checked....i want the submit button to show??? please help?? thanks Code: <input type = "text" style ='display:none;' onchange="display_data_from_server(this.value)"/> Value inside that input is cahanged from js. Is there any reason that onchange would not happen ? i mean, it does not. I have a onChange value
Code: var people = [ ["Timothy Conner", "1999-Present", "Age: 12", "Male", ""], ["Andrew Conner", "1992-Present", "Age: 19", "Male", ""] ]; var how = "Brothers"; function find() { if(document.getElementById("name").value == people [0] [0]) { document.getElementById("desc").value = people [0] [1] + " " + people [0] [2] + " " + people [0] [3]; } if(document.getElementById("name").value == people [1] [0]) { document.getElementById("desc").value = people [1] [1] + " " + people [1] [2] + " " + people [1] [3]; } document.getElementById("relateb").value = document.getElementById("name").value; } Code: Name: <input type="text" id="name" value="" onChange="find()"/> So for it to proses a name you must click out of a box is ther a way to make it instead of when you click out of it, it would immidiatly change? Hi folks. I'm working on a calculator and need to use the 'onchange' function. Basically, the user selects the year (id=taxYear) and once the year is select (default is 2008) this year will appear in 2 different lines of the page under 2 seperate ID's(ageYear & totalYear). I've looked at a few example of the function but I'm still not sure how to approach it. At the moment the year changes once I hit the 'calculate' button but the onChange would obviously offer a better alternative with the date changing once 'taxYear' is changed. here is the script; Code: //check the year var taxYear = document.getElementById('taxYear').options[document.getElementById('taxYear').selectedIndex].value; document.getElementById('ageYear').innerHTML = taxYear; document.getElementById('totalYear').innerHTML = taxYear; Here is the jsp; Code: <tr> <td align="left" width="203" colspan=""><p> Your Tax Year: </p></td> <td align="left" > <s:select name="taxYear" id="taxYear" list="#{'2008':'2008', '2009':'2009'}" theme="simple" />* </td> </tr> <tr> <td align="left" width="203"><p> Age at December 31st <span id="ageYear"></span></p></td> <td align="left" colspan="1"> <s:textfield name="age" id="age" theme="simple" cssClass="text" value="30" /> * <div id="errorage" class="warningmessage" style="display:none"> Please enter your Age to proceed. </div> </td> </tr> <tr> <td colspan="2" class="basicboldtext"> <br/> The total pension contribution you can make for year <span id="totalYear"></span> is €<span id="totalTax2"></span> <br/> </td> </tr> Appreciate any help on this! Hi I'm a newbie. Please help me. I'm using Joomla. I've got a dropdown which reads the filename from the database. When the user selects it I want an onchange event to open the pdf. I've been at it for 2 days now. Code: <?php $con = mysql_connect('localhost', 'root', ''); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("metnet", $con); $sql="SELECT * FROM newsletter"; $result = mysql_query($sql); echo "<form method='post'>"; $dropdown = "<select name='sname' onChange='location(this.form.sname)' >"; while($row = mysql_fetch_assoc($result)) { $dropdown .= "\r\n<option value='{$row['fpath']}'>{$row['fpath']}</option>"; } $dropdown .= "\r\n</select>"; echo $dropdown; ?> Hello all, I have a translation script that I want to modify to use select boxes instead of divs, but I have a little problem with what I have. Bascially, the user selects an option and it changes the text in between the ' ' (VALUE) to whatever the value of the option is: Code: <select onchange="updateLangTo('VALUE')"> <option value="en">English</option> <option value="ar">Arabic</option> </select> So how would JavaScript be able to accomplish this? i keep getting the following error: - there is no attribute "onChange" Code: <select name="type" id="type" onChange="gettype('type');"> <option selected="selected">--Car type--</option> <option value="1">Bmw</option> <option value="2">Merc Blinds</option> <option value="3">Ford</option> <option value="4">Saab</option> </select> How can i change this code to do not duplicate the boxes when one option is selected in the same box as before? http://www.plpgolfandturf.com.au/rr/rrboxes_test.php Code: <script type="text/javascript"> function SetHTML2(type) { //document.getElementById("1").style.display = "none" //document.getElementById("2").style.display = "none" //document.getElementById("3").style.display = "none" //document.getElementById("4").style.display = "none" //document.getElementById("1.1").style.display = "none" //document.getElementById("1.2").style.display = "none" //document.getElementById("1.3").style.display = "none" //document.getElementById("1.4").style.display = "none" document.getElementById("2.1").style.display = "none" document.getElementById("2.2").style.display = "none" document.getElementById("2.3").style.display = "none" document.getElementById("2.4").style.display = "none" document.getElementById("3.1").style.display = "none" document.getElementById("3.2").style.display = "none" document.getElementById("3.3").style.display = "none" document.getElementById("3.4").style.display = "none" document.getElementById("4.1").style.display = "none" document.getElementById("4.2").style.display = "none" document.getElementById("4.3").style.display = "none" document.getElementById("4.4").style.display = "none" document.getElementById("1.1.1").style.display = "none" document.getElementById("1.1.2").style.display = "none" document.getElementById("1.1.3").style.display = "none" document.getElementById("1.1.4").style.display = "none" document.getElementById("1.2.1").style.display = "none" document.getElementById("1.2.2").style.display = "none" document.getElementById("1.2.3").style.display = "none" document.getElementById("1.2.4").style.display = "none" document.getElementById("1.3.1").style.display = "none" document.getElementById("1.3.2").style.display = "none" document.getElementById("1.3.3").style.display = "none" document.getElementById("1.3.4").style.display = "none" document.getElementById("1.4.1").style.display = "none" document.getElementById("1.4.2").style.display = "none" document.getElementById("1.4.3").style.display = "none" document.getElementById("1.4.4").style.display = "none" document.getElementById(type).style.display = "" } </script> <!--Display box --> <font face="Verdana, Geneva, sans-serif" size="4" color="#FF0000"><br /> Search Parts</font><br /> <br /> <select onchange="SetHTML2(this.value)"> <option selected="selected">Choose your option</option> <option value="1">Beck</option> <option value="2">BobCat</option> <option value="3">Briggs</option> <option value="4">Yazoo</option> </select> <span id="1" style="display:none" ><br /><select onchange="SetHTML2(this.value)"> <option selected="selected">Choose your option</option> <option value="1.1">Beck 1</option> <option value="1.2">Beck 2</option> <option value="1.3">Beck 3</option> <option value="1.4">Beck 4</option> </select></span> <span id="2" style="display:none"><br /><select onchange="SetHTML2(this.value)"> <option selected="selected">Choose your option</option> <option value="2.1">BobCat 1</option> <option value="2.2">BobCat 2</option> <option value="2.3">BobCat 3</option> <option value="2.4">BobCat 4</option> </select></span> <span id="3" style="display:none"><br /><select onchange="SetHTML2(this.value)"> <option selected="selected">Choose your option</option> <option value="3.1">Briggs 1</option> <option value="3.2">Briggs 2</option> <option value="3.3">Briggs 3</option> <option value="3.4">Briggs 4</option> </select></span> <span id="4" style="display:none"><br /><select onchange="SetHTML2(this.value)"> <option selected="selected">Choose your option</option> <option value="4.1">Yazoo 1</option> <option value="4.2">Yazoo 2</option> <option value="4.3">Yazoo 3</option> <option value="4.4">Yazoo 4</option> </select></span> <span id="1.1" style="display:none"><br /><select onchange="SetHTML2(this.value)"> <option selected="selected">Choose your option</option> <option value="1.1.1">Beck 1.1</option> <option value="1.1.2">Beck 1.2</option> <option value="1.1.3">Beck 1.3</option> <option value="1.1.4">Beck 1.4</option> </select></span> <span id="1.2" style="display:none"><br /><select onchange="SetHTML2(this.value)"> <option selected="selected">Choose your option</option> <option value="1.2.1">Beck 2.1</option> <option value="1.2.2">Beck 2.2</option> <option value="1.2.3">Beck 2.3</option> <option value="1.2.4">Beck 2.4</option> </select></span> <span id="1.3" style="display:none"><br /><select onchange="SetHTML2(this.value)"> <option selected="selected">Choose your option</option> <option value="1.3.1">Beck 3.1</option> <option value="1.3.2">Beck 3.2</option> <option value="1.3.3">Beck 3.3</option> <option value="1.3.4">Beck 3.4</option> </select></span> <span id="1.4" style="display:none"><br /><select onchange="SetHTML2(this.value)"> <option selected="selected">Choose your option</option> <option value="1.4.1">Beck 4.1</option> <option value="1.4.2">Beck 4.2</option> <option value="1.4.3">Beck 4.3</option> <option value="1.4.4">Beck 4.4</option> </select></span> <span id="2.1" style="display:none"> text </span> <span id="2.2" style="display:none"> text </span> <span id="2.3" style="display:none"> text </span> <span id="2.4" style="display:none"> text </span> <span id="3.1" style="display:none"> text </span> <span id="3.2" style="display:none"> text </span> <span id="3.3" style="display:none"> text </span> <span id="3.4" style="display:none"> text </span> <span id="4.1" style="display:none"> text </span> <span id="4.2" style="display:none"> text </span> <span id="4.3" style="display:none"> text </span> <span id="4.4" style="display:none"> text </span> <span id="1.1.1" style="display:none"> text </span> <span id="1.1.2" style="display:none"> text </span> <span id="1.1.3" style="display:none"> text </span> <span id="1.1.4" style="display:none"> text </span> <span id="1.2.1" style="display:none"> text </span> <span id="1.2.2" style="display:none"> text </span> <span id="1.2.3" style="display:none"> text </span> <span id="1.2.4" style="display:none"> text </span> <span id="1.3.1" style="display:none"> text </span> <span id="1.3.2" style="display:none"> text </span> <span id="1.3.3" style="display:none"> text </span> <span id="1.3.4" style="display:none"> text </span> <span id="1.4.1" style="display:none"> text </span> <span id="1.4.2" style="display:none"> text </span> <span id="1.4.3" style="display:none"> text </span> <span id="1.4.4" style="display:none"> text </span> <br /> <br /><a href="http://www.plpgolfandturf.com.au/rr/rrboxes_test.php"><img src="http://www.plpgolfandturf.com.au/rr/bt2.png" border="0" /></a> I have an onchange event JS working fine in IE, but not in FF. It's intended to reset an input field to zero when an adjacent drop-down menu value is changed. I've spent a half-hour looking for answers, and nothing has worked. Decided to post here in the hope there is a quick solution I've overlooked. TIA. Code: function resetInput() { y = document.getElementById("baseInput"); y.setAttribute("value","0"); } And the HTML... Code: <select id="baseMethod" onchange="resetInput()"> <option value="baseGrowth" selected="selected">Annual Growth Rate (%)</option> <option value="baseTarget">Target Year Projection</option> </select> <input type="text" name="baseInput" id="baseInput" value="0" size="14" maxlength="14" /><br /> Hi there - this seems like it should be an obvious problem - can anyone spot it? I have an object, declared this way: Code: var FK_gid = new picChooser('FK_gid', FK_gidArray); FK_gid.init(); and a select group like this: Code: <select id = "FK_gid" name = "FK_gid"> <option value="none" selected="true" >None</option> <option value="335" >pics/zoobins.jpg</option> etc. etc. </select> picChooser in construction sets the onchange of the select group like this: Code: this.list = document.getElementById('FK_gid'); this.list.setAttribute("onchange", "FK_gid.displayImage();"); and the object's displayImage(); is like this: Code: this.displayImage = function () { this.clearImage(); if (this.list.selectedIndex != 0) { pic = new Image(); pic.src = this.reformat(this.list.options[this.list.selectedIndex].innerHTML); img = document.createElement("img"); img.src = pic.src; this.preview.appendChild(img); } } But whenever I choose something else off the list I get this error message: Code: TypeError: Result of expression 'FK_gid.displayImage' [undefined] is not a function. It's bizarre because when I type FK_gid.displayImage(); into Safari's dynamic console the function works perfectly... Any ideas? Thanks Edd hi i have a form where i need to join fields from the form prior to submission to flow into a pdf form. here is the function PHP Code: <SCRIPT language='javascript' type='text/javascript'> function joinna(form, elemName, ttl) { form.bname.value = form.b_fname.value + ' ' + form.b_lname.value; } </script> here is what the form input looks like PHP Code: <input class="left" onBlur="mark(this,'#ffffff','#000000')" name="b_fname" size="20" maxlength="40" onFocus="nextfield ='cb_fname'; mark(this,'#FFFF99','#0000FF')" value="<?php echo $row['b_fname'];?>" onChange="joinna(this.form,'b_fname','p1f6');"> </span> <input class="left" onBlur="mark(this,'#ffffff','#000000')" name="b_lname" size="20" maxlength="40" onFocus="nextfield ='cb_fname'; mark(this,'#FFFF99','#0000FF')" value="<?php echo $row['b_lname'];?>" onChange="joinna(this.form,'b_lname','p1f6');"> </span> and here is the calc field PHP Code: <input type="hidden" NAME="bname" value="" Size="7" onBlur="mark(this,'#ffffff','#000000')" onFocus="blur();document.smartform.bname.focus()" onChange="this.form.b_fname.value + this.form.b_lname.value; joinna(this.form,'field');" > this works fine IF i manually insert something new into the b_fname field. but lets say a user pulls the for to edit, and then makes no changes, "bname" will remain blank. what i want to do is call the function and/or force an 'onchange' or do whatever so bname is not left blank in the event the user submits w/o making any changes to the form tia This code works great for splitting value to textbox.. However; It quits working in example 2 when I move the select outside the form tags Code: <!-- EXAMPLE 1 WORKS--> <script type="text/javascript"> function Split(sel,first) { if (sel.selectedIndex == 0 ) return; var temp = sel.value.split(","); sel.form["F"+first].value = temp[0]; sel.form["F"+(first+1)].value = temp[1]; sel.form["F"+(first+2)].value = temp[2]; } </script> <form method='post'> <input type="text" name="F1" value="" > <input type="text" name="F2" value="" > <input type="text" name="F3" value="" > <select onChange="Split(this,1)"> <option> ===Select Color ==== </option> <option value='000,000,000'>black</option> <option value='169,169,169'>grey</option> <option value='000,000,255'>blue</option> <option value='153 102,255'>aqua</option> </select> </form> Help with the onChange to work outside the form tags. Code: <!-- EXAMPLE 2 NEED HELP--> <script type="text/javascript"> function Split(sel,first) { if (sel.selectedIndex == 0 ) return; var temp = sel.value.split(","); sel.form1["F"+first].value = temp[0]; sel.form1["F"+(first+1)].value = temp[1]; sel.form1["F"+(first+2)].value = temp[2]; } </script> <form method='post' name="form1"> <input type="text" name="F1" value="" > <input type="text" name="F2" value="" > <input type="text" name="F3" value="" > </form> <!-- NEED TO MODIFY THE ONCHANGE TO WORK IN THIS POSITON?? --> <select onChange="Split(this.form1.value,1)"> <option> ===Select Color ==== </option> <option value='000,000,000'>black</option> <option value='169,169,169'>grey</option> <option value='000,000,255'>blue</option> <option value='153 102,255'>aqua</option> </select> All, If I have the following code: Code: <form name="datatoshow" id="datatoshow"> Want to learn more about the sie? Use the drop down menu:<br /> <select name="thingtoshow" onchange="javascript:showvalues(this.datatoshow);"> <option value="home">Home</option> <option value="help">Help!</option> <option value="refer">Refer a Friend</option> </select> </form> This doesn't do anything on the onchange. The code it's supposed to send to is: Code: function showvalues(selObj){ alert("it gets here"); var valuetoshow; valuetoshow = "valuetoshow="+selObj.options[selObj.selectedIndex].value; alert(valuetoshow); makePOSTRequest('showhome.php', valuetoshow); } This is in external js file. For some reason it doesn't send it and the alert never gets triggered. Thanks. |