|
JavaScript - Program In Javascript To Select Multiple Text Boxes
hi ! i would like to write the code for multiple text box select as shown in the link below:
http://www.downloadplex.com/Mobile/I...ne_284120.html please see the screen shot 3 Similar TutorialsCalculating quiz answers? Code: var correctAnswers = new Array();
correctAnswers[1] = "Extensible Hypertext Markup Language";
correctAnswers[2] = "<p></p>";
correctAnswers[3] = "<br />";
function checkAnswers(){
var score = 0;
for (i=1; i<4; i++){
correctAnswers = getSelectValue("quiz","q" + i);
if (correctAnswers == correctAnswers[i]){
score++;
}
}
I'm trying to do this using numerical arrays for an assignment: Create a webpage with three select boxes. If basketball is selected in the first select box, the second select box should display the names Celtics, Lakers, and Bulls. If Celtics is selected from the second select box, the third select box should display the names Larry Bird, Bill Russell, and Kevin McHale. I think i have a good start but i can't seem to get the fields to automatically populate with the players. This has to be done solely with JavaScript. Any help would be greatly appreciated? <html> <head> <script type="text/javascript"> <!-- var teams = new Array() teams[1] = new Array() teams[1][0] = "Celtics" teams[1][1] = "Lakers" teams[1][2] = "Bulls" teams[2] = new Array() teams[2][0] = "Yankees" teams[2][1] = "Cardinals" teams[2][2] = "Reds" var basketball = new Array() basketball[0] = new Array() basketball[0][0] = "Larry Bird" basketball[0][1] = "Bill Russell" basketball[0][2] = "Kevin McHale" basketball[1] = new Array() basketball[1][0] = "Wilt Chamberlain" basketball[1][1] = "Jerry West" basketball[1][2] = "Magic Johnson" basketball[2] = new Array() basketball[2][0] = "Micheal Jordan" basketball[2][1] = "Scottie Pippen" basketball[2][2] = "Dennis Rodman" var baseball = new Array() baseball[0] = new Array() baseball[0][0] = "Babe Ruth" baseball[0][1] = "Joe DiMaggio" baseball[0][2] = "Mickey Mantle" baseball[1] = new Array() baseball[1][0] = "Mark McGuire" baseball[1][1] = "Ozzie Smith" baseball[1][2] = "Willie McGee" baseball[2] = new Array() baseball[2][0] = "Pete Rose" baseball[2][1] = "Johnny Bench" baseball[2][2] = "Joe Morgan" function fillTeams() { var whichIndex = document.getElementById("theSport").selectedIndex var numberOfTeams = teams[whichIndex].length for(i=0;i < numberOfTeams; i++){ document.getElementById("theTeams").options[i].text = teams[whichIndex][i] } } function fillPlayers() { var whichIndex = document.getElementById("theTeams").selectedIndex if(document.getElementById("theTeams").selectedIndex=="basketball") var numberOfPlayers = teams[teams[whichIndex]].length for(i=0;i < numberOfPlayers; i++) { document.getElementById("thePlayers").options[i].text = basketball[teams[whichIndex]][i] } else if(document.getElementById("theTeams").selectedIndex =="baseball") for(i=0;i < numberOfPlayers; i++) { document.getElementById("thePlayers").options[i].text = basketball[teams[whichIndex]][i] } } //--> </script> </head> <body> <form> <select id="theSport" onChange="fillTeams()"> <option>Choose a Sport</option> <option>Basketball</option> <option> Baseball </option> </select> <select id="theTeams" onChange="fillPlayers()"> <option>................</option> <option></option> <option></option> </select> <select id="thePlayers" size="3"> <option> ...............</option> <option></option> <option></option> </select> </form> </body> </html> hello, I have a problem changing the value of multiple text boxes, My page contain one text box named "price" and i need to set the value of this box to all other text boxes in the page which they attribute is <input type="text" value="" name="product[xxxx]" id="product"/> xxxx = random number the page may contain only one text box id=product or more i have tried the following code but it only works with multiple text boxes and doesn't work if the page have one text box Code: var price = document.getElementById('price').value;
var allElements = document.form1.product;
var len=allElements.length;
if(allElements.length){
for (i = 0; i < len; i++){
allElements[i].value = price;
}
I'm not a javascript expert so i don't know if this code is the right way to accomplish this. Thank you very much for your help Hello, I am working on a CGI/Ajax application to interface with a database. I have the back-end Perl/CGI application working, so now it it is time to design the web interface and respective forms. So here goes, I am attempting to create dynamic list boxes, but I am unable to pass a value to the 'onChange' event. Here is my code (this is a proof of concept and highly stripped down): Code: <html>
<head>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
var array = [ 'name', 'age', 'year'];
function init(sel_val){
for (var i = 0; i < array.length; i++){
document.write(i + " " + array[i] + "<br />");
}
for (var i = 0; i< array.length; i++){
document.product.id_type.options[i] = new Option(i + array[i], i);
}
}
function OnChange(sel_val) {
// for(i = document.product.id_style.length - 1; i > 0; i--)
// document.product.id_style.options[i] = null;
// document.product.id_style.options[0] = new Option("something else", 15);
alert("pressed" + " " + sel_val + "<br />");
}
</script>
<form name="product">
<select name="id_type" size="5" style="width: 150px;" onChange="OnChange()"></select>
<select name="id_style" size="5" style="width: 150px;" ></select>
</form>
<script>
init();
</script>
</body>
</html>
I'm well versed in Perl and Java but I am a JavaScript newbie, so go easy. I understand that sel_val is not being set, but I'm not sure how it should (or could) be set. I would like to use a hash instead of integer values for `i` document.product.id_type.options[i] = new Option(i + array[i], i); becomes document.product.id_type.options[i] = new Option(hash[key], key); Any thoughts, comments, criticisms, jokes are welcome. Thanks in advance for the assist. I set up my javascript so that it shows a hidden div box from an array when i click on a link. To show only one hidden box, the code is <a href="javascript:showOnlyThis('divIDgoeshere')"> how do i show multiple hidden div boxes with one link? Thanks! Hi, I think the problem I am having is an event not a css issue, so I hope I posted in the right forum. What I am trying to achieve is the capability to provide multiple instant chat messages. I have the php/ajax for the instant messages, what I am not sure is how to be able to view multiple chats. What I have started to do is limit it to five possible instant chat messages and have five divs in place with visibility hidden. It works fine for one. But if someone clicks on the name of a person they wish to chat with, the way I am currently doing it, I would need to find out: 1. which divs were free to start an instant chat in (I have no idea how to do this with divs)? 2. Having identified it I will need to change the visibility so it suddenly becomes visible I guess firstly am I going about this the right way to be able to host/view multiple chats? My code is below. Main Page PHP Code: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function (){ $('#submitchat').live('click',function(){ var data = $('#chatmessage').serialize(); $.post ('insertChat.php',data, function(){ $('#chatmessage').each (function(){ this.reset(); }); return false; }); }); }); </script> <script type="text/javascript"> function loadChat(File,ID,Msg,TID,Cile){ loadXMLDoc1(File,ID,Msg); delay = setTimeout(function(){loadChatRefresh(Cile,TID,Msg)},5000); } </script> <script type="text/javascript"> function loadChatRefresh(File,ID,Msg){ if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { try{ xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById(ID).innerHTML=xmlhttp.responseText; timer = setInterval(function(){loadChatRefresh(File,ID,Msg)},3000); } } var params=Msg; xmlhttp.open("POST",File,true); xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache"); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-length", params.length); xmlhttp.setRequestHeader("Connection", "close"); xmlhttp.send(params); } </script> <script type="text/javascript"> function loadXMLDoc1(File,ID,Msg){ if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { try{ xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById(ID).innerHTML=xmlhttp.responseText; } } var params=Msg; xmlhttp.open("POST",File,true); xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache"); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-length", params.length); xmlhttp.setRequestHeader("Connection", "close"); xmlhttp.send(params); } </script> </head> <body> <h1>Test</h1> <?php include("dbconnect.php"); $result = mysql_query("SELECT *, signedin.PId as SIPId FROM signedin INNER JOIN friends ON signedin.PId=friends.invited OR signedin.PId=friends.invitee WHERE ((friends.invitee={$_SESSION['MyPId']} AND friends.statae='accepted') OR (friends.invited={$_SESSION['MyPId']} AND friends.statae='accepted')) AND signedin.LogOff IS NULL AND signedin.PId !={$_SESSION['MyPId']}"); while($row = mysql_fetch_array($result)){ $mugwort= $row['SIPId'] . ';'; } $motherwort=explode(';',$mugwort); foreach ($motherwort as $mulberry){ $result = mysql_query("SELECT * FROM allusers WHERE PId='{$mulberry}'"); while($row = mysql_fetch_array($result)){ $nosegay=rand(). rand(). rand(). rand(). rand(); $nightshade="{$_SESSION['MyPId']};{$mulberry};{$nosegay}"; echo '<div class="img"><img src="thumbs/' . $row['pphoto'] . '" height="80px" width="80px" onclick="loadChat(\'chat.php\',\'chat1\',\'olivier=' . urlencode($nightshade) . '\',\'chatdisplay\',\'getDisplayChat.php\')";><div class="desc">' . $row['fullname'] . '</div></div><br />'; } } echo '<br /><div class="clear"></div><br /><br />'; ?> <div class="chat1" id="chat1"></div> <div class="chat2" id="chat2"></div> <div class="chat3" id="chat3"></div> <div class="chat4" id="chat4"></div> <div class="chat5" id="chat5"></div> <br /> <br /> Chat Page PHP Code: <?php include("dbconnect.php"); $blossom=explode(';',$_POST['olivier']); $periwinkle=$blossom[0]; $peppermint=$blossom[1]; $pine=$blossom[2]; global $periwinkle; global $peppermint; global $pine; echo '<div class="chatbanner" width="100%"> <table width="100%"> <tr> <td width="90%">'; echo '<center><b>This Name</b></center>'; echo '</td> <td width="5%">'; echo '<input type="button" class="buttonchat" name="minimize" id="minimize" value="−">'; echo '</td> <td width="5%">'; echo '<input type="button" class="buttonchat" name="minimize" id="minimize" value="X">'; echo '</td> </tr> </table></div>'; echo '<div class="chattext" id="chatdisplay" overflow="scroll">'; $result = mysql_query("SELECT * FROM chat INNER JOIN allusers ON chat.chatter=allusers.PId WHERE (chat.chatter={$periwinkle} AND chat.chattee={$peppermint}) OR (chat.chatter={$peppermint} AND chat.chattee={$periwinkle}) AND ref={$pine} ORDER BY chat.date DESC"); while($row = mysql_fetch_array($result)){ echo '<table width="100%"><tr><td width="20%"><img src="thumbs/' . $row['pphoto'] . '" width="40px" height="40px"></td>'; echo '<td width="80%" valign="top">' . nl2br($row['message']) . '</td></tr></table><hr />'; } echo '</div><br /><br />'; echo '<form action="insertChat.php" method="post" name="chatmessage" id="chatmessage"> <input type="text" class="hidden" name="from" id="from" value="' . $_SESSION['MyPId'] . '"> <input type="text" class="hidden" name="to" id="to" value="'; echo ($_SESSION['MyPId']==$peppermint) ? $periwinkle : $peppermint . '"> <input type="text" class="hidden" name="ref" id="ref" value="' . $pine . '">'; echo '<div class="textchat">'; echo '<textarea cols="21" row="5" name="message" id="message"></textarea>'; echo '<input type="button" name="submitchat" id="submitchat" value=" "></div></form>'; ?> Style Sheet: Code:
div.chat1 {
position:fixed;
bottom:1px;
right:50px;
width:200px;
height:250px;
float:right;
border:2px solid black;
background-color:#fdf5e6;
scrolling:auto;
}
div.chat2 {
position:fixed;
bottom:1px;
right:260px;
width:200px;
height:250px;
float:right;
border:2px solid black;
background-color:#fdf5e6;
scrolling:auto;
}
div.chat3 {
position:fixed;
bottom:1px;
right:470px;
width:200px;
height:250px;
float:right;
border:2px solid black;
background-color:#fdf5e6;
scrolling:auto;
}
div.chat4 {
position:fixed;
bottom:1px;
right:680px;
width:200px;
height:250px;
float:right;
border:2px solid black;
background-color:#fdf5e6;
scrolling:auto;
}
div.chat5 {
position:fixed;
bottom:1px;
right:890px;
width:200px;
height:250px;
float:right;
border:2px solid black;
background-color:#fdf5e6;
scrolling:auto;
}
.chatbanner {
background-color:#4b0082;
text-decoration:none;
color:white;
}
.textchat {
position:fixed;
bottom:0.5px;
}
.chatbutton {
position:fixed;
bottom:0.5px;
right:0.5px;
border:none;
}
If I have left anything out which might be helpful please let me know. I just got stuck on the logistics side of figuring out how was the best way to make this happen, any pointers would be great. Hi, I have a drop down menu, which you select an item and the text in a text box below displays according to what has been chosen from the drop down list. I have too much text in some case to appear in the text box, so i wanted to find some code so i can select different numbers for pages so i can display the information on different pages. Is this possible. Thanks hi everyone, this is my 1st post here in this community forum, just would like to say "HI" to everyone. i would like to share with you my experience in developing multiple dependency selection form developed in java script, how this script works is that when 1st selection is selected, based on the value the user select, a second level selection will appear and so on. below is the Java-script code along with my form code too Javascript: <script type="text/javascript"> function nextSelect(o) { if (o.value == '0') { var next = o.nextSibling; while (next && next.nodeName != 'SELECT') { next = next.nextSibling; } next.length = 0; return; } var d = document; var useSelect = d.getElementById(o.name + '_' + o.value); if (!useSelect) { alert('Unknown id: ' + o.name + '_' + o.value); return; } var copy = useSelect.cloneNode(true); copy.style.display = 'inline'; var next = o.nextSibling; while (next && next.nodeName != 'SELECT') { next = next.nextSibling; } next.parentNode.insertBefore(copy, next); next.parentNode.removeChild(next); } </script> my form: <div style="display: none;"> <!-- ##### First Selection ####### --> <select name="second" id="first_dp" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="dp_2_38">2 3/8'</option> <option value="dp_4">4'</option> </select> <select name="second" id="first_hw" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="hw_3_12">3 1/2'</option> <option value="hw_4">4'</option> </select> <!-- ####### 2nd Selection ####### --> <select name="third" id="second_dp_2_38" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="dp_2_38_4.85">4.85 lbs/ft</option> <option value="dp_2_38_6.65">6.65 lbs/ft</option> </select> <select name="third" id="second_dp_2_78" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="dp_2_78_6.85">6.85 lbs/ft</option> <option value="dp_2_78_10.4">10.4 lbs/ft</option> </select> >>>>>>and so on till 3rd selection<<<<<<<<< </div> <form action="pdfHandle.php" method="post" id="pdfsearch"> <fieldset> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="142" height="146"> <p> Type:<br /> Size:<br /> Weight:<br /> </td> <td width="266"><select name="first" onclick="nextSelect(this);"> <option value="0">Choose</option> <option value="dp">Drill Pipe</option> <option value="hw">Heavy Weight</option> </select><br/> <select name="select"> </select> <br/> <select name="select"> </select> <br/> <select name="select"> </select> </td> </tr> </table> <p> <input type="submit" name="submit" id="submit" value="Create PDF" /> <input type="reset" value="Reset Selection" /> </p> </fieldset> </form> ----------------------------------------------------------------------- i would like to know what i am missing here and what is making Safari n chrome not to run this page properly, when u execute this code, only the 1st selection will appear while the rest of the selections are Null, i hope someone will guide me through this or direct me to solution or any other way of doing this perhaps i thank you for viewing this post. 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. I have a web page created using plsql web toolkit. I want to set the text box values for street line 2 and zip based on user selection in select drop down which is street line 1. The select drop down list is based on a cursor selecting data from the Oracle database. I'm not sure if I need to use an array in the javascript code or if I can set the values some where in my package. Any advice would be appreciated. cursor: Quote: cursor bldglistc is select stvbldg_code, stvbldg_desc, slbbldg_street_line1, slbbldg_city, slbbldg_stat_code, slbbldg_zip from stvbldg, slbbldg where stvbldg_code = slbbldg_bldg_code (+) and stvbldg_desc not like 'DNU%' and stvbldg_desc not like 'Online%' order by slbbldg_bldg_code; bldg_record bldglistc%ROWTYPE; Javascript in package: Quote: htp.p(' <SCRIPT LANGUAGE="JavaScript" TYPE = "text/javascript"> function UpdateNextField(which1,which2,fld1,fld2) { document.getElementById(fld1).value = which1.value; document.getElementById(fld2).value = which2.value; } </SCRIPT> '); Form code from package: Quote: HTP.formopen ('bwgkogad.P_ProcAddrUpdate', 'post'); twbkfrmt.P_FormHidden ('atyp', atyp); twbkfrmt.P_FormHidden ('seqno', seqno); twbkfrmt.p_tableopen ( 'DATAENTRY', cattributes =>G$_NLS.Get('BWGKOAD1-0003','SQL','SUMMARY="This table shows Address Selected for Update."') ); twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledataheader (stvatyp_rec.stvatyp_desc, ccolspan => '5'); twbkfrmt.p_tablerowclose; twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledatalabel ( twbkfrmt.f_formlabel ( g$_nls.get ('BWGKOAD1-0007', 'SQL', 'Address Line 1:'), idname => 'street_line1_input_id' ) ); twbkfrmt.p_tabledataopen (ccolspan => '5'); HTP.formselectopen ( 'str1', '', 1, cattributes => 'ID="street_line1_input_id" onChange="javascript: UpdateNextField(this,this,''street_line2_input_id' ',''zip_input_id'')"' ); OPEN bldglistc; LOOP FETCH bldglistc INTO bldg_record; IF bldglistc%NOTFOUND THEN EXIT; END IF; IF address_rec.spraddr_street_line1 = bldg_record.slbbldg_street_line1 THEN twbkwbis.p_formselectoption ( bldg_record.slbbldg_street_line1, bldg_record.slbbldg_street_line1, 'selected' ); ELSE twbkwbis.p_formselectoption ( bldg_record.slbbldg_street_line1, bldg_record.slbbldg_street_line1 ); END IF; END LOOP; CLOSE bldglistc; HTP.formselectclose; twbkfrmt.p_tabledataclose; twbkfrmt.p_tablerowclose; twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledatalabel ( twbkfrmt.f_formlabel ( g$_nls.get ('BWGKOAD1-0008', 'SQL', 'Address Line 2:'), idname => 'street_line2_input_id' ) ); twbkfrmt.p_tabledata ( twbkfrmt.f_formtext ( 'str2', 70, 75, address_rec.spraddr_street_line2, cattributes => 'ID="street_line2_input_id" readonly' ), ccolspan => '5' ); twbkfrmt.p_tablerowclose; twbkfrmt.p_tablerowopen; twbkfrmt.p_tabledatalabel ( twbkfrmt.f_formlabel ( g$_nls.get ('BWGKOAD1-0013', 'SQL', 'ZIP or Postal Code:'), idname => 'zip_input_id' ) ); twbkfrmt.p_tabledata ( twbkfrmt.f_formtext ( 'zip', NULL, 30, address_rec.spraddr_zip, cattributes => 'ID="zip_input_id" readonly' ), ccolspan => '5' ); twbkfrmt.p_tablerowclose; twbkfrmt.p_tableclose; HTP.para; -- HTP.formsubmit (NULL, G$_NLS.Get('BWGKOAD1-0054','SQL','Submit')); HTP.formreset (g$_nls.get ('BWGKOAD1-0055', 'SQL', 'Reset')); HTP.formclose; Hello, I am currently making a multiple choice program in JS using 3 arrays, one to call the question, one to store the user answer and one to store the real answer. The answers will then be compared to find the score. I have done most of it, but am still having one problem, I am using prompts and when I call the question, only the text in the if statement "qArray[counter]" is actually showing on the prompt and not the actual question from the array and I wondered if anyone could help? Thanks <html> <head><B>Multiple Choice Quiz</B> </head> <body> <script language = 'JavaScript'> document.write('<br><br>This program allows multiple choice questions to be asked - once finished a calculation will total your score.<br>'); qArray = new Array(); qArray = ['What is the capital of England? London/Paris/Cardiff/Berlin', 'What is the capital of France? London/Paris/Cardiff/Berlin', 'What is the capital of Wales? London/Paris/Cardiff/Berlin', 'What is the capital of Germany? London/Paris/Cardiff/Berlin']; aArray = new Array(); aArray = ['London', 'Paris', 'Cardiff', 'Berlin']; //array of the answers counter = 0; NumberofQuestions = 4; score = 0; while (counter < NumberofQuestions){ if (counter == 0){ question1=prompt('qArray[counter]',''); } if (counter == 1){ question2=prompt('qArray[counter]',''); } if (counter == 2){ question3=prompt('qArray[counter]',''); } if (counter == 3){ question4=prompt('qArray[counter]',''); } counter++; } studentAnswers = new Array(); studentAnswers = [question1, question2, question3, question4]; //an array with the answers the student has inputted counter = 0; while (counter < NumberofQuestions){ if (studentAnswers[counter] == aArray[counter]){ score++; } counter++; } document.write ('You have finished the quiz, your total marks will be calculated.'); //inform student that they have finished document.write('You scored: ',score,' /4'); //prints the score to screen. </script> </body> </html> I have the below JS code to change up a select box based on what is selected in another select box. IE9 broke this somehow. It still works in other browsers as well as IE8 and IE7. When you select something in select box A, it properly populates select box B. However when you go back and change select box A again the script stops working completely. The error I'm getting from the IE9 developer tools debugger is: SCRIPT65535: Invalid calling object dynamicselect.js, line 31 character 18 I have bolded the relevant line below. Code: function dynamicSelect(id1, id2) {
// Browser and feature tests to see if there is enough W3C DOM support
var agt = navigator.userAgent.toLowerCase();
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_mac = (agt.indexOf("mac") != -1);
if (!(is_ie && is_mac) && document.getElementById && document.getElementsByTagName) {
// Obtain references to both select boxes
var sel1 = document.getElementById(id1);
var sel2 = document.getElementById(id2);
// Clone the dynamic select box
var clone = sel2.cloneNode(true);
// Obtain references to all cloned options
var clonedOptions = clone.getElementsByTagName("option");
// Onload init: call a generic function to display the related options in the dynamic select box
refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
// Onchange of the main select box: call a generic function to display the related options in the dynamic select box
sel1.onchange = function() {
refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
};
}
}
function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
// Delete all options of the dynamic select box
while (sel2.options.length) {
sel2.remove(0);
}
// Create regular expression objects for "select" and the value of the selected option of the main select box as class names
var pattern1 = /( |^)(select)( |$)/;
var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
// Iterate through all cloned options
for (var i = 0; i < clonedOptions.length; i++) {
// If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box
if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
// Clone the option from the hidden option pool and append it to the dynamic select box
sel2.appendChild(clonedOptions[i].cloneNode(true));
}
}
}
Thank you in advance for any help provided. Hi all, I'm trying to customize a script I found. It's about two select boxes, one for continent selection and one for country selection. When user selects a continent from the first select box, the second select box is filled with the list of the proper countries that belong to this continent. You can see that code of the script he http://www.howtocreate.co.uk/jslibs/htmlhigh/countryselect.html In my page, the continent select box is loaded with a continent-value already selected (the selection depends on a database value) and I want to have the second countries select box, also loaded with the proper countries. I cannot make this happen, unless I change the continent's selection and trigger the onchange event. Can I someway keep the onchange event and also add the ability to have a continent and it's list of countries already loaded? I'm using onchange display to hide/show form elements depending on the value of a select box. It works perfectly well (I actually really adore it) for one select box, but I have another select box which I'd like to act similarly. Code: <head>
<script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3,id4) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
document.getElementById(id4).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
if ( txt.match(id4) ) {
document.getElementById(id4).style.display = 'block';
}
}
// ]]>
</script>
</head><body>
<form action="#">
<select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');">
<option>Please select:</option>
<option value="oneshot">Oneshot</option>
<option value="outtake">Outtake</option>
<option value="multi">Original Multi-Chapter</option>
<option value="drabbles">Drabbles</option>
<option value="outline">Outline Preview</option>
<option value="chapter">Chapter Preview</option>
</select><BR><BR>
<div id="oneshot" style="display: none;">Some fields here</div>
<div id="outtake" style="display: none;">Some different fields here</div>
<div id="multi" style="display: none;">Some other fields here</div>
<div id="chapter" style="display: none;">Some more fields here</div>
</form>
</body>
But when I go to add a second select (obj,id1,id2,id3,id4,id5,id6) with new "ifs" and id's, etc and so forth, neither work. Code: <head>
<script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3,id4,id5,id6) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
document.getElementById(id4).style.display = 'none';
document.getElementById(id5).style.display = 'none';
document.getElementById(id6).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
if ( txt.match(id4) ) {
document.getElementById(id4).style.display = 'block';
}
if ( txt.match(id5) ) {
document.getElementById(id5).style.display = 'block';
}
if ( txt.match(id6) ) {
document.getElementById(id6).style.display = 'block';
}
}
// ]]>
</script>
</head><body>
<form action="#">
<select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');">
<option>Please select:</option>
<option value="oneshot">Oneshot</option>
<option value="outtake">Outtake</option>
<option value="multi">Original Multi-Chapter</option>
<option value="drabbles">Drabbles</option>
<option value="outline">Outline Preview</option>
<option value="chapter">Chapter Preview</option>
</select><BR><BR>
<div id="oneshot" style="display: none;">Some fields here</div>
<div id="outtake" style="display: none;">Some different fields here</div>
<div id="multi" style="display: none;">Some other fields here</div>
<div id="chapter" style="display: none;">Some more fields here</div> <BR><BR><BR>
<select name="Atype" onchange="display(this,'romance','adventure');">
<option>Please select:</option>
<option value="romance">Romance</option>
<option value="adventure">Adventure</option>
</select><BR><BR>
<div id="romance" style="display: none;">Some new fields here</div>
<div id="adventure" style="display: none;">Some even newer fields here</div>
</form>
</body>
Is there any way to fuse them and get a second select to work the same? Thanks in advance for the help! Hello to all and thank you for any help beforehand. I have an issue with the script below, Select the top dropdown and the second gets populated, this is a nice piece of script, the only problem is that when the information is posted and presented on the process page I click page back to the form to rectify some other field but the ajax resets so I have to select Country & City each time even if thease fields are correct. I know that back button as well as bookmark is a problem with ajax but i think there is a solution the only thing is I don't know how to apply it to this script. Source of the script: http://www.dhtmlgoodies.com/index.ht...chained_select Ajax file: http://www.dhtmlgoodies.com/AJAX/ajax.js test.html 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>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
var ajax = new Array();
function getCityList(sel)
{
var countryCode = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_city').options.length = 0; // Empty city select box
if(countryCode.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'getCities.php?countryCode='+countryCode; // Specifying which file to get
ajax[index].onCompletion = function(){ createCities(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}
function createCities(index)
{
var obj = document.getElementById('dhtmlgoodies_city');
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}
function getSubCategoryList(sel)
{
var category = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_subcategory').options.length = 0; // Empty city select box
if(category.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'getSubCategories.php?category='+category; // Specifying which file to get
ajax[index].onCompletion = function(){ createSubCategories(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}
function createSubCategories(index)
{
var obj = document.getElementById('dhtmlgoodies_subcategory');
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}
</script>
</head>
<body>
<form action="" method="post">
<table>
<tr>
<td>Country: </td>
<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
<option value="">Select a country</option>
<option value="dk">Denmark</option>
<option value="no">Norway</option>
<option value="us">US</option>
</select>
</td>
</tr>
<tr>
<td>City: </td>
<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Here's the content of getCities.php Code: <?php
if(isset($_GET['countryCode'])){
switch($_GET['countryCode']){
case "no":
echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";
break;
case "dk":
echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
echo "obj.options[obj.options.length] = new Option('Odense','13');\n";
break;
case "us":
echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
echo "obj.options[obj.options.length] = new Option('New York','25');\n";
echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";
break;
}
}
?>
Hello, I'm working on a project that involves extracting values from a series of select boxes and then working out the result. The select boxes contain the following: Code: <select name="select_Col1_Row1"> <option value="blue">Blue</option> <option value="green">Green</option> <option value="red>Red</option> </select> <select name="select_Col1_Row2"> <option value="blue" selected="selected">Blue</option> <option value="green">Green</option> <option value="red>Red</option> </select> <input type="text" name="RedSum"> <input type="text" name="BlueSum"> <input type="text" name="GreenSum"> </select> As you can see by my code, I'm early days at this and guessing the steps on the way. I tried using getElementsByTagName on the select and then on the option but had no luck with that. The code below does a wonderful job of returning blue for both select statements... Code: <script type="text/javascript">
function getElements()
{
var table = document.getElementById("x");
var x = table.getElementsByTagName("option");
for (var i = 0; i < x.length; i++) {
var status = x[i].getAttribute("selected");
alert(status);
if (status == "selected") {
var statushcap = x[i].getAttribute("id");
var statusvalue =x[i].getAttribute("value");
if (statusvalue == "blue") {
alert(statusvalue);
}
}
}
alert(x.length);
}
</script>
If someone could suggest some way to map the select tag and then extract its option value to being the user selected value, I'd most appreciate it. I can probably do the rest of it. Can you extract additional information from the id of the option that is selected as I'd like to sum additional information from the user's choice. Best, John I have a script which allows me to select random users from one select field to another and works like a charm, but... I want to be able to get random users from one select field to multiple (lets say 2) other select fields... So lets say that I have 5 users in the first field (select1): James Bill Jennifer Bob Karen Now when I press a button: <input value="" type="button" onClick="randomusers();" /> 2 users should be moved to select2 and other 2 users moved to select3. My current script is as follows: Code: function randomusers(){
var given = 2, used = {}, randnum, opts = $('#select1 option'), olen = opts.length, hiddiv = $('#hiddendiv');
function ran() { // generate a unique random number
randnum = Math.floor(Math.random() * olen);
return used['u'+randnum] ? ran() : randnum;
}
for (var i = 0; i < given; i++) { // get the correct quantity of randoms
used['u'+ran()] = true;
}
var players = opts.filter(function(index) { // remove all options that are not one of the randoms
return !!used['u'+index];
}).appendTo('#select2');
}
Hoping for help... Thanks in advance :-) Hello, I have some code to open 1 dialog box. Could someone please help me manipulate this code to open multiple boxes with different contents. I would like to do this with out duplicating the existing code, maybe setting a variable. The least amount of code the better. Thanks in advance. 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">
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
</head><body>
<div id="dialog" title="Example dialog">
<p>Some text that you want to display to the user.</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({
bgiframe: true, autoOpen: false, height: 100, modal: true
});
});
</script>
<a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Click here to see the popup</a>
</body>
</html>
I'm trying to use this code to create 6 sets of (each set 2 Dynamic List boxes). However I have the problem that Category 1-6 selection does not select the correct (adjacent) subcateory list box and instead populates the last selection in subcategory list box 1. How can I set the Java/HTML code so that for example Category #3, populates the selection/case into SubCategory#3 list box? Form Code (only with 2 Category, SubCategory) this when working will be expanded to 6. Code: <table border="0" width="560">
<tbody>
<tr>
<td align="center"><strong>Item#</strong></td>
<td align="center">Paint Type</td>
<td align="center">Colour</td>
<td align="center">Litres</td>
</tr>
<tr>
<td width="56%" align="left" valign="middle">1.<select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Range</option>
<option value="New Paint">New Paint</option>
<option value="Recycled Paint">Recycled Paint</option>
</select></td><td name="cell1">
<script type="text/javascript" language="JavaScript" >
document.write('<select name="subcategory1" id="subcategory1" name="cell1" ><option value="" name="subcategory1">Select Product</option></select>')
</script>
<noscript><select name="subcategory1" id="subcategory1" >
<option value="">Select Product</option>
</select>
</noscript>
</td><td>
<input class="formbox" size="20" name="01_colour" /></td><td>
<input class="formbox" size="5" name="01_litres" /></td>
</tr><br>
<tr>
<td width="56%" align="left" valign="middle">2.<select name="category2" id="category2" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Range</option>
<option value="New Paint2">New Paint</option>
<option value="Recycled Paint2">Recycled Paint</option>
</select></td><td name="cell2">
<script type="text/javascript" language="JavaScript">
document.write('<select name="subcategory" id="subcategory"><option value="" name="subcategory">Select Product</option></select>')
</script>
<noscript><select name="subcategory" id="subcategory" >
<option value="">Select Product</option>
</select>
</noscript>
</td><td>
<input class="formbox" size="20" name="02_colour" /></td><td>
<input class="formbox" size="5" name="02_litres" /></td>
</tr>
</table>
Java Script which I think is the problem, I cant work out how to name the relevant cell the selection should display in. Code: <script language="javascript" type="text/javascript">
function dropdownlist(indexlist)
{
document.SampleForm.subcategory1.options.length = 0;
switch(indexlist)
{
case "New Paint" :
document.SampleForm.subcategory1.options[0]=new Option("Select Product","");
document.SampleForm.subcategory1.options[1]=new Option("Air-Conditioners/Coolers","Air-Conditioners/Coolers");
document.SampleForm.subcategory1.options[2]=new Option("Audio/Video","Audio/Video");
document.SampleForm.subcategory1.options[3]=new Option("Beddings","Beddings");
document.SampleForm.subcategory1.options[4]=new Option("Camera","Camera");
document.SampleForm.subcategory1.options[5]=new Option("Cell Phones","Cell Phones");
break;
case "Recycled Paint" :
document.SampleForm.subcategory1.options[0]=new Option("Select Product","");
document.SampleForm.subcategory1.options[1]=new Option("Interior, Flat/Matt","Interior, Flat/Matt");
document.SampleForm.subcategory1.options[2]=new Option("Interior, Low Sheen","Interior, Low Sheen");
document.SampleForm.subcategory1.options[3]=new Option("Interior, Semi Gloss, Acrylic","Interior, Semi Gloss, Acrylic");
document.SampleForm.subcategory1.options[4]=new Option("Interior, Gloss, Acrylic","Interior, Gloss, Acrylic");
document.SampleForm.subcategory1.options[5]=new Option("Interior, High Gloss, Acrylic","Interior, High Gloss, Acrylic");
document.SampleForm.subcategory1.options[6]=new Option("Interior, Suede","Interior, Suede");
document.SampleForm.subcategory1.options[7]=new Option("Exterior, Flat/Matt","Exterior, Flat/Matt");
document.SampleForm.subcategory1.options[8]=new Option("Exterior, Low Sheen","Exterior, Low Sheen");
document.SampleForm.subcategory1.options[9]=new Option("Exterior, Semi Gloss, Acrylic","Exterior, Semi Gloss, Acrylic");
document.SampleForm.subcategory1.options[10]=new Option("Exterior, Gloss, Acrylic","Exterior, Gloss, Acrylic");
document.SampleForm.subcategory1.options[11]=new Option("Exterior, High Gloss, Acrylic","Exterior, High Gloss, Acrylic");
document.SampleForm.subcategory1.options[12]=new Option("Paving/Concrete","Paving/Concrete");
document.SampleForm.subcategory1.options[13]=new Option("Dulux Acratex","Dulux Acratex");
break;
}
return true;
}
</script>
Thanks Daniel Hi everybody. I'm new to both Javascript and this site, so apologies if this isn't the right way to be asking this question. Here's what I'm trying to do. I've got two dropdown boxes ('language' and 'word'). When the submit button is pressed, I want a div to show with the right word in it. I can do this fine with one dropdown box, but two has got me stumped. Any ideas would be much appreciated. S |
|||||||