|
JavaScript - Select 2 Images To Display, W/o Drop Down
Hello;
New to Javascripting, new to forum. I searched the forum, and tried to adapt, to no avail. I am building a store and want users to be able to see how two items look together. I have it working, but it uses a drop down. I would like to display many items and have the user click on one "image", from the display of "top" images, to display it on top, and from another section of "bottom" images, click another image to display it on bottom. For instance to see what one plant would look like in different vases. If I could be picky, is there a way to make it all happen in the BODY of the page? I use DW and a template. Code:
<html>
<head>
<script language="javascript">
function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
document.images.pictures2.src=
document.mygallery2.picture2.options[document.mygallery2.picture2.selectedIndex].value
}
//-->
</script>
</head>
<body>
<p class="style1">Try a few selections for your gift.</p>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><form name="mygallery"><select
name="picture" size="1" onChange="showimage()">
<option selected value="images/bear1.jpg">Bear 1</option>
<option value="images/bear2.jpg">Bear 2</option>
<option value="images/plant1.jpg">Plant 1</option>
<option value="images/plant2.jpg">Plant 2</option>
<option value="images/plant3.jpg">Plant 3</option>
</select>
</form>
</td>
<td><a href="javascript:linkrotate(document.mygallery.picture.selectedIndex)" onMouseover="window.status='';return true"><img src="images/bear1.jpg" name="pictures" width="150" border=0></a></td>
</tr>
<tr>
<td><form name="mygallery2"><select
name="picture2" size="1" onChange="showimage()">
<option selected value="images/cup1.jpg">Mug 1</option>
<option value="images/cup2.jpg">Mug 2</option>
</select>
</form>
</td>
<td><a href="javascript:linkrotate(document.mygallery2.picture2.selectedIndex)" onMouseover="window.status='';return true"><img src="images/cup1.jpg" name="pictures2" width="150" border=0></a></td>
</tr>
</table>
</body>
</html>
Similar TutorialsI've got some directory list boxes on the site I'm working on. I made them big and fixed rather than drop-down so they're easier to use in this context. But I had to enable the "multiple" attribute to make that work. The site has no provision for multiple selections so it's a tad annoying when the search function selects more than one name in the list. It doesn't really affect the site's operation but it could be confusing to some people. Is there a way to make the listbox show multiple selections without allowing multiple selections? Thanks for any help. <select onchange="display.apply(this, this.value.split(','))" multiple="multiple" id="People" name="People" style="border-style: none; height:244px; width:220px; margin-bottom: 15px;"> <option>Loading</option> </select> Hi, is there a way, when one select is clicked, all change to the value of the one that was chosen? (ie: "b" is clicked and all change to b.) Code: <select> <option>a</option> <option>b</option> <option>c</option> </select> <br> <select> <option>a</option> <option>b</option> <option>c</option> </select> <br> <select> <option>a</option> <option>b</option> <option>c</option> </select> Thanks I want to use a <select> drop-down in a form to let my user select a date from a list. The problem is how to easily update the list. Easiest would be to have a list of dates in a separate file, and have code that would read the dates and write them into the <option> statements of the <select> control. Then when the page with the <select> control opens, the code will open the other file, get the dates, and update the <option>s. And all I have to do is periodically FTP a new date file. I'm stuck in Visual Basic and FileSystemObject, where I can open a file, read line by line into an array, concatenate a string, and write it into a doc. I can't seem to find similar methods in JavaScript - no duh, because this isn't VB! So _is_ there a way to do this? Maybe a certain way to create the date file so the code can easily find the values? (Like putting the dates into a table with each <TD> having a unique ID?) And assuming I manage to get the dates, I need to write them into the source HTML, vice in the document body. What objects, methods, properties do I look at? Are there any samples floating around out there? A drop-kick in a good direction is greatly appreciated! Ed Hello everyone! I have a select (combo box) element that gets filled with items when selected item changed in another one (master combo box). It works in Chrome, FireFox but not in IE (all latest browser versions). How do I populate the items in the child combo box: - ajax call of a PHP script - that returns items for the combo box: echo '<option value="' . $id . '">' . $name . '</option>'; - setting innerHTML attribute of the child combo box to a value that gets returned by the ajax call: document.forms['parametersForm'].elements['stationId'].innerHTML = html; Do I need to return JSON object (or XML) by the PHP script and programically add items (in JavaScript) in the ajax callback or is there an alternative? Obviously building DOM with echoing PHP result doesn't work well in IE. Thanks for your future help! Regards Dear All, This code is displaying English and French in the select list. If we onchange the value in the jsp then its value is reflected properly in the java file. But my requirement is if you have onchange its coresspoging selected value should be reflected in java file else the default selected value let say English should refelected in the java class. But unless we cannot change the select dropdown value the the default data is not reflected in java class using bean. Please help me what piece of code i change so that deafult selected drop down value data also reflect in java class also. Code: function fnChange()
{
alert("Hello Inside the fnChange");
alert("The crudUserForm is"+document.crudUserForm.prefLangaugeSB.value);
document.crudUserForm.prefLangauge.value = document.crudUserForm.prefLangaugeSB.value;
alert("The crudUserForm is"+document.crudUserForm.prefLangauge.value);
}
// Added By Rohini for CR 5385 End
</script>
<tr>
<td>
<bean:message key="admin.chooseDefaultLan"/>
</td>
<td>
<%
UserManagerBean uma = new UserManagerBean();
ArrayList prefLan = (ArrayList)uma.getAllLanguages();
Iterator itrt = null;
itrt = prefLan.iterator();
%>
<SELECT name="prefLangaugeSB" class="textContent" onchange="fnChange()">
<% while (itrt.hasNext()) {
OptionLabelValue languageList = (OptionLabelValue) itrt.next();
System.out.println("The languageList label is"+languageList.getLabel());
System.out.println("The languageList label is"+languageList.getValue());
%>
<option value="<%= languageList.getLabel() %>"><%= languageList.getValue() %></option>
<% } %>
</SELECT>
<html:hidden property="prefLangauge"/>
<script>
var selObj = document.getElementById('prefLangaugeSB');
var selIndex = selObj.selectedIndex;
for (var i=0; i<selObj.length;i++){
if(selObj.options[i].value==document.crudUserForm.prefLangauge.value){
selObj.options[i].selected = true;
}
}
></script>
Please let me know incase you need more information. Please me for the above needful. Thanks for your time. Regards, Sumanta If i have a drop down list on my website, and i want to use javascript to change its selected value, however, i do not have the id/name attribute of the option i want to select, only have the "value" attribute of the option, can it be done? <select name="category"> <option value="">No Preference</option> <option value="Apples">Apples</option> <option value="Oranges">Oranges</option> <option value="Pears">Pears</option> <option value="Banana">Banana</option> </select> I imagine somehow.. selecting the options and looping through them and match the value. Really new to javascript, can anyone advise? Thanks in advance! all i have to do is the image to change automatically based on the option you selected from the drop down list. here is the code, any help is appreciable. thanks in advance. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> img{ height:95px; width:95px; display:block; margin-top:10px; } #caption{ font-family:Verdana,tahoma,arial; font-size:8pt; text-align:left; display:block; width:250px; } </style> <script type="text/javascript"> window.onload=function() { var caption=['Default Image Caption', 'begonia', 'daffodils', 'mixture', 'natural', 'purple', 'red flower', 'sunflower', 'tulip', 'two flowers'], // This will be your images caption bp='..\images', //base url of your images imgnum=9, //Number of your images. This should match on your comboboxes options. thumb=document.getElementById('thumb'), //id of your image that will be changing description=document.getElementById('caption'), //id of your caption combobox=document.getElementById('selection'); // id of your combobox. combobox.onchange=function() { thumb.src=bp+'Picture'+this.value+'.jpg'; description.innerHTML=caption[this.value]; } } </script> </head> <body> <label>Please Change the pictu </label> <select id="selection"> <option>Change Picture</option> <option value="1">begonia</option> <option value="2">daffodils</option> <option value="3">mixture</option> <option value="4">natural</option> <option value="5">purple</option> <option value="6">red flower</option> <option value="7">sunflower</option> <option value="8">tulip</option> <option value="9">two flowers</option> </select> <br> <img src="..\images" alt="mypic" id="thumb"> <span id="caption">Caption for the default Image</span> </body> </html> thanks again ok so i need help.... I need to create a page containing five image tags, two buttons, a <select> and a <textarea>. The images tags will each contain a picture of one of six possible outcomes for the dice portraying the numbers one through six.. The first button: When the user clicks on the button, all dice are rolled once. For each die when rolled, the src of its image tag is replaced with a random one of six possible pictures -- each picture being chosen with equal probability (1/6).... I HAVE THIS DONE The select: The user may select any of the numbers one through six. Whenever a picture is clicked upon, then that die takes on the value shown inside the <select>..... THIS IS WHAT I NEED HELP WITH The textarea: Results of the dice rolls should be kept as a running log (a cumulative history) in a textarea at the bottom of the page. With each roll (initiated by the click of the button), we should be able to see the complete history of all current and previous dice rolls. You need not consider changes brought about clicks on individual dice in conjunction with the <select>....I HAVE THIS DONE The second button: A button below the textarea, should allow the user to obtain a report (overwriting the current contents of the log in the textarea) which tabulates the frequency of each of the six outcomes plotted separately for each of the dice. The frequency tabulation should show how often each die was rolled, as consistent with the data stored in the log.... I HAVENT EVEN GOTTEN AROUND TO WORRYING ABOUT THIS YET This is what i have so far and have so far exhausted everything that i know to try to get it to work but this is just the code with out any of my failed attempts dragged into it <head> <style> input{background-color:#B0D0BC;text-align:center} </style> <script> order=["c_01.jpg"] function roll(){ {r=Math.ceil(Math.random()*5) document.images[0].src="c_0"+r+".jpg" t.value=t.value+"\n"+r} {r=Math.ceil(Math.random()*5) document.images[1].src="c_0"+r+".jpg" t.value=t.value+" "+r} {r=Math.ceil(Math.random()*5) document.images[2].src="c_0"+r+".jpg" t.value=t.value+" "+r} {r=Math.ceil(Math.random()*5) document.images[3].src="c_0"+r+".jpg" t.value=t.value+" "+r} {r=Math.ceil(Math.random()*5) document.images[4].src="c_0"+r+".jpg" t.value=t.value+" "+r} } function swap(n){ remember=document.images[n].src= document.images[n].src="c_01.jpg" remember=order[n] } </script> <div align="center"><center><table border="4" cellpadding="5" bgcolor="#E0E0DC"> <tr> <td> <img src="c_01.jpg" alt="100" onclick="swap(0)"></td> <td> <img src="c_02.jpg" alt="100" onclick="swap(1)"></td> <td> <img src="c_03.jpg" alt="100" onclick="swap(2)"></td> <td> <img src="c_04.jpg" alt="100" onclick="swap(3)"></td> <td> <img src="c_05.jpg" alt="100" onclick="swap(4)"></td> </tr> <tr> <td colspan="5" align="center"> Select A Value: <select name="hi"> <option value="hi1" onchange="swap(0)">1</option> <option value="hi2" onchange="swap(1)">2</option> <option value="hi3" onchange="swap(2)">3</option> <option value="hi4" onchange="swap(3)">4</option> <option value="hi5" onchange="swap(4)">5</option> </select> </td> </tr> <tr> <td colspan="5" align="center"> <input type="button" onclick="roll()" value="roll them"> <br> <textarea name="t" cols="40" rows="12" >History Of Roles</textarea> Hi all, I think I have posted in the right place, if not appologies. Anyhow, I am currently creating a website for my canvas printing business and run into a few javascripting issues. I am trying to create a small navigation form whereby a customer can select from a dropdown the required width of canvas, this selection will then populate a second dropdown with a choice of canvas heights. Ok, so trawling many sites I came across some javascript that I was able to chop about and have this part sorted. The problem now is that I would like to include a submit button that when clicked takes the customer to a webpage based on their two dropdown choices, and being a complete newby when it comes to javascript I am stuck trying to include the script to enable this. eg: if they select '20" (51cm)' from the first dropdown and '16" (41cm)' from the second dropdown, they will navigate to "http: / / 20x16.co.uk" canvas print page. I have not currently created the canvas print pages so am unable to give the URLs of the pages. However if somebody can lend a hand to get me started and indicate where the desitnation URLs need to be added, I can drop these in later. The way that the script is currently written, the linked url could be based soley on the choice made in the second dropdown. I have a draft page with the working dropdowns he http://merchant.auctivacommerce.com/...iewtheme=32189 And the code that I currently have is: Code: <script type="text/javascript">
var SELECT_WIDTH_FIRST = []; var WIDTH08 = []; var WIDTH10 = []; var WIDTH12 = []; var WIDTH14 = []; var WIDTH16 = []; var WIDTH18 = []; var WIDTH20 = []; var WIDTH24 = []; var WIDTH30 = []; var WIDTH36 = []; var WIDTH42 = []; var WIDTH48 = []; var WIDTH60 = []; var WIDTH72 = [];
SELECT_WIDTH_FIRST[0] = new Option("Please Select Width First", "SelWidFir");
WIDTH08[0] = new Option("8'' (20cm)", "0808"); WIDTH08[1] = new Option("10'' (25cm)", "0810"); WIDTH08[2] = new Option("12'' (30cm)", "0812"); WIDTH08[3] = new Option("14'' (35cm)", "0814"); WIDTH08[4] = new Option("16'' (41cm)", "8016"); WIDTH08[5] = new Option("18'' (46cm)", "0818"); WIDTH08[6] = new Option("20'' (51cm)", "0820"); WIDTH08[7] = new Option("24'' (61cm)", "0824");
WIDTH10[0] = new Option("8'' (20cm)", "1008"); WIDTH10[1] = new Option("10'' (25cm)", "1010"); WIDTH10[2] = new Option("12'' (30cm)", "1012"); WIDTH10[3] = new Option("14'' (35cm)", "1014"); WIDTH10[4] = new Option("16'' (41cm)", "1016"); WIDTH10[5] = new Option("18'' (45cm)", "1018"); WIDTH10[6] = new Option("20'' (51cm)", "1020"); WIDTH10[7] = new Option("24'' (61cm)", "1024"); WIDTH10[8] = new Option("30'' (76cm)", "1030");
WIDTH12[0] = new Option("8'' (20cm)", "1208"); WIDTH12[1] = new Option("10'' (25cm)", "1210"); WIDTH12[2] = new Option("12'' (30cm)", "1212"); WIDTH12[3] = new Option("14'' (35cm)", "1214"); WIDTH12[4] = new Option("16'' (41cm)", "1216"); WIDTH12[5] = new Option("18'' (45cm)", "1218"); WIDTH12[6] = new Option("20'' (51cm)", "1220"); WIDTH12[7] = new Option("24'' (61cm)", "1224"); WIDTH12[8] = new Option("30'' (76cm)", "1230"); WIDTH12[9] = new Option("36'' (91cm)", "1236");
WIDTH14[0] = new Option("8'' (20cm)", "1408"); WIDTH14[1] = new Option("10'' (25cm)", "1410"); WIDTH14[2] = new Option("12'' (30cm)", "1412"); WIDTH14[3] = new Option("14'' (35cm)", "1414"); WIDTH14[4] = new Option("16'' (41cm)", "1416"); WIDTH14[5] = new Option("18'' (45cm)", "1418"); WIDTH14[6] = new Option("20'' (51cm)", "1420"); WIDTH14[7] = new Option("24'' (61cm)", "1424"); WIDTH14[8] = new Option("30'' (76cm)", "1430"); WIDTH14[9] = new Option("36'' (91cm)", "1436"); WIDTH14[10] = new Option("42'' (107cm)", "1442");
WIDTH16[0] = new Option("8'' (20cm)", "1608"); WIDTH16[1] = new Option("10'' (25cm)", "1610"); WIDTH16[2] = new Option("12'' (30cm)", "1612"); WIDTH16[3] = new Option("14'' (35cm)", "1614"); WIDTH16[4] = new Option("16'' (41cm)", "1616"); WIDTH16[5] = new Option("18'' (45cm)", "1618"); WIDTH16[6] = new Option("20'' (51cm)", "1620"); WIDTH16[7] = new Option("24'' (61cm)", "1624"); WIDTH16[8] = new Option("30'' (76cm)", "1630"); WIDTH16[9] = new Option("36'' (91cm)", "1636"); WIDTH16[10] = new Option("42'' (107cm)", "1642"); WIDTH16[11] = new Option("48'' (122cm)", "1648");
WIDTH18[0] = new Option("8'' (20cm)", "1808"); WIDTH18[1] = new Option("10'' (25cm)", "1810"); WIDTH18[2] = new Option("12'' (30cm)", "1812"); WIDTH18[3] = new Option("14'' (35cm)", "1814"); WIDTH18[4] = new Option("16'' (41cm)", "1816"); WIDTH18[5] = new Option("18'' (45cm)", "1818"); WIDTH18[6] = new Option("20'' (51cm)", "1820"); WIDTH18[7] = new Option("24'' (61cm)", "1824"); WIDTH18[8] = new Option("30'' (76cm)", "1830"); WIDTH18[9] = new Option("36'' (91cm)", "1836"); WIDTH18[10] = new Option("42'' (107cm)", "1842"); WIDTH18[11] = new Option("48'' (122cm)", "1848"); WIDTH18[12] = new Option("60'' (152cm)", "1860"); WIDTH18[13] = new Option("72'' (183cm)", "1872");
WIDTH20[0] = new Option("8'' (20cm)", "2008"); WIDTH20[1] = new Option("10'' (25cm)", "2010"); WIDTH20[2] = new Option("12'' (30cm)", "2012"); WIDTH20[3] = new Option("14'' (35cm)", "2014"); WIDTH20[4] = new Option("16'' (41cm)", "2016"); WIDTH20[5] = new Option("18'' (45cm)", "2018"); WIDTH20[6] = new Option("20'' (51cm)", "2020"); WIDTH20[7] = new Option("24'' (61cm)", "2024"); WIDTH20[8] = new Option("30'' (76cm)", "2030"); WIDTH20[9] = new Option("36'' (91cm)", "2036"); WIDTH20[10] = new Option("42'' (107cm)", "2042"); WIDTH20[11] = new Option("48'' (122cm)", "2048"); WIDTH20[12] = new Option("60'' (152cm)", "2060"); WIDTH20[13] = new Option("72'' (183cm)", "2072");
WIDTH24[0] = new Option("8'' (20cm)", "2408"); WIDTH24[1] = new Option("10'' (25cm)", "2410"); WIDTH24[2] = new Option("12'' (30cm)", "2412"); WIDTH24[3] = new Option("14'' (35cm)", "2414"); WIDTH24[4] = new Option("16'' (41cm)", "2416"); WIDTH24[5] = new Option("18'' (45cm)", "2418"); WIDTH24[6] = new Option("20'' (51cm)", "2420");
WIDTH30[0] = new Option("10'' (25cm)", "3010"); WIDTH30[1] = new Option("12'' (30cm)", "3012"); WIDTH30[2] = new Option("14'' (35cm)", "3014"); WIDTH30[3] = new Option("16'' (41cm)", "3016"); WIDTH30[4] = new Option("18'' (45cm)", "3018"); WIDTH30[5] = new Option("20'' (51cm)", "3020");
WIDTH36[0] = new Option("12'' (30cm)", "3612"); WIDTH36[1] = new Option("14'' (35cm)", "3614"); WIDTH36[2] = new Option("16'' (41cm)", "3616"); WIDTH36[3] = new Option("18'' (45cm)", "3618"); WIDTH36[4] = new Option("20'' (51cm)", "3620");
WIDTH42[0] = new Option("14'' (35cm)", "3614"); WIDTH42[1] = new Option("16'' (41cm)", "3616"); WIDTH42[2] = new Option("18'' (45cm)", "3618"); WIDTH42[3] = new Option("20'' (51cm)", "3620");
WIDTH48[0] = new Option("16'' (41cm)", "4816"); WIDTH48[1] = new Option("18'' (45cm)", "4818"); WIDTH48[2] = new Option("20'' (51cm)", "4820");
WIDTH60[0] = new Option("18'' (45cm)", "6018"); WIDTH60[1] = new Option("20'' (51cm)", "6020");
WIDTH72[0] = new Option("18'' (45cm)", "7218"); WIDTH72[1] = new Option("20'' (51cm)", "7220");
function populateSub(mainSel, subSel){ var mainMenu = mainSel; var subMenu = subSel; var subMenuItems; subMenu.options.length = 1;
switch (mainMenu.selectedIndex) {
case 0: subMenuItems = SELECT_WIDTH_FIRST; break;
case 1: subMenuItems = WIDTH08; break;
case 2: subMenuItems = WIDTH10; break;
case 3: subMenuItems = WIDTH12; break;
case 4: subMenuItems = WIDTH14; break;
case 5: subMenuItems = WIDTH16; break;
case 6: subMenuItems = WIDTH18; break;
case 7: subMenuItems = WIDTH20; break;
case 8: subMenuItems = WIDTH24; break;
case 9: subMenuItems = WIDTH30; break;
case 10: subMenuItems = WIDTH36; break;
case 11: subMenuItems = WIDTH42; break;
case 12: subMenuItems = WIDTH48; break;
case 13: subMenuItems = WIDTH60; break;
case 14: subMenuItems = WIDTH72; break;
}
for (var i = 0; i < subMenuItems.length; i++) { subMenu.options[i] = subMenuItems[i];
}
}
</script>
<div style="width:320px; text-align:right;">
<form name="Menus">
<label style="font-size:14px; font-variant:small-caps;">Width</label>
<select style="width:250px; margin-bottom:10px;" name="Width" onchange="populateSub(this, this.form.Height);">
<option>Please Select</option>
<option value="W08">8'' (20cm)</option>
<option value="W10">10'' (25cm)</option>
<option value="W12">12'' (30cm)</option>
<option value="W14">14'' (35cm)</option>
<option value="W16">16'' (41cm)</option>
<option value="W18">18'' (46cm)</option>
<option value="W20">20'' (51cm)</option>
<option value="W24">24'' (61cm)</option>
<option value="W30">30'' (61cm)</option>
<option value="W36">36'' (61cm)</option>
<option value="W42">42'' (61cm)</option>
<option value="W48">48'' (61cm)</option>
<option value="W60">60'' (61cm)</option>
<option value="W72">72'' (61cm)</option>
</select>
<label style="font-size:14px; font-variant:small-caps;">Height</label>
<select style="width:250px; margin-bottom:10px;" name="Height">
<option>Please Select Width First</option>
</select>
<input type="button" value="View Canvas!">
</form>
</div>
As mentioned, Javascript is completely new to me but I am attempting to learn. Any help would be greatly appreciated. Wayne All, I'm trying to create a calendar application that users can upload pictures and then put them on a calendar. I'd like to display all of the images and then drag them from one pane to the calendar. I'd like it to be something similar to the following link: http://www.vistaprint.com/studio/cal...id=button&rd=2 Does anyone have any scripts that can do the drag and drop or could you possibly give me an idea on where to start with something like this? I really appreciate the help in advance! Thanks! I'm currently looking to revamp the Link Exchange section on my website. Rather than clutter it with banners, I am going to put all the links into a drop down menu, with the banner for the selected site under it. The intention is that when you select a site from the list, the banner underneath changes. However, I can only get it to do this once, then it simply refuses to let you select anything else. This is the code I am using to change it: Code: function defineimage()
{
if (document.forms[0].gourl.value = "http://jeff.zhomg.com")
{
document.images.linkimage.src = '/images/exchange/jeff.gif'
}
else if (document.forms[0].gourl.value = "http://www.strangedrawingsartgallery.com")
{
document.images.linkimage.src = '/images/exchange/SCH.jpg'
}
}
And this is my drop down menu, and the image I'd like to change: Code: <p><select name="gourl" onChange="defineimage()"> <option value="http://www.strangedrawingsartgallery.com" selected>Strange City Heroes</option> <option value="http://jeff.zhomg.com">Invincible Jeff</option> </select> <input type="submit" name="Submit" value="Go to Site" onClick="dropdown()"></p><p><img src="/images/exchange/SCH.jpg" alt="SCH" name="linkimage" width="468" height="60" border="0" id="linkimage"></p> If you are unsure what I mean by this, you can see for yourself by going to the page in question and selecting 'Invincible Jeff' from the list. The banner will change, but you won't be able to change the selection again. Many thanks (again) for the help. Another task please...I need to display the appropriate div when a radio button is selected... PHP Code: <body> <script type="text/javascript"> function checkjob(jobvalue){ if(jobvalue="type") { document.getElementById("type").style.display = "block"; }else if(jobvalue="select"){ document.getElementById("select").style.display = "block"; }else if(jobvalue="tag"){ document.getElementById("tag").style.display = "block"; } } </script><br /> <table width="200"> <tr> <td><label> <input type="radio" name="cat" value="type" id="cat_0" onchange="checkjob(this.value)" /> type</label></td><td><label> <input type="radio" name="cat" value="select" id="cat_1" onchange="checkjob(this.value)" /> select</label></td> <td><label> <input type="radio" name="cat" value="tag" id="cat_2" onchange="checkjob(this.value)" /> tag</label></td> </tr> </table> <div id="type" style="display:none"><input name="contact" type="text" /></div> <div id="tag" style="display:none">tag:<input name="contact" type="text" /></div> <div id="select" style="display:none"><select name=""> <option value="a" selected="selected">option 1</option> <option value="b">option 2</option> </select></div> </body> I have 9 select menus that are populated by a php for loop. Each has a numeric value that is displayed base on the selection (which I have working). I can not figure out how to sum all of these values and display them in a <div> tag. Any help will be greatly appreciated. what I have thus far: PHP Code: // Part of a function that creates drop down boxes <select name="$name" onchange="document.getElementById('cost_$name').firstChild.nodeValue = this.options[this.selectedIndex].getAttribute('cost_$name')"> // option is generated in a for loop $i is a number and $cost is a different number <option value="$i" cost_$name="$cost">$i</option> // <div> tag for output of cost_$name where cost_$name is output <div align="center" id="cost_$name">0</div> /* the above is working fine.. it will display the correct output when an option is selected from the drop downs */ //At the bottom of the table I want to total the values of the cost_$name 's // So far I came up with this to do the addition, what I don't know is how to // get the values into the // getValues() function and output them in a <div> tag. <script language="javascript"> function getValues(){ var numVal1=parseInt(document.getElementById("cost_body").value); var numVal2=parseInt(document.getElementById("cost_agility").value); var numVal3=parseInt(document.getElementById("cost_reaction").value); var numVal4=parseInt(document.getElementById("cost_strength").value); var numVal5=parseInt(document.getElementById("cost_charisma").value); var numVal6=parseInt(document.getElementById("cost_intuition").value); var numVal7=parseInt(document.getElementById("cost_logic").value); var numVal8=parseInt(document.getElementById("cost_willpower").value); var numVal9=parseInt(document.getElementById("cost_edge").value); var totalValue = numVal1 + numVal2 + numVal3 + numVal4 + numVal5 + numVal6 + numVal7 + numVal8 + numVal9; document.getElementById("cost_total").value = totalValue; } </script> 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! I have a scenario where I show a drop-down-with-few-items in a JSP page, to the user. The length of few options in the drop down is greater than that of the drop down's, hence our requirement is to show the hovered (not selected) option as tooltip for user's convenience. I am not able to use title attribute for displaying tooltips in my browser. Now the code in http://dossett.org/11/No_onmouseover_for_options_in_IE/ implements a tooltip for multiple select drop down menu.Can you modify the code for single select I'm having a problem using javascript with a form. I'm using javascript to determine whether or not a person has selected "yes" or "no" from the select list. If "yes" is selected, the form is supposed to slide down and reveal two more fields. If "no" is selected, the form is supposed to slide back up hiding those two fields again. When "yes" is selected, the form displays the two new fields properly. In Safari, it does the slideDown animation, yet in Firefox, the new form fields just suddenly display. If I select "no" again, nothing happens. The slideUp animation doesn't play. So currently I am having to use $("#parent1").hide(); to get the "no" to trigger. So my two questions a 1. Is there any reason the slide animation plays smoothly in Safari but not in Firefox? 2. Why won't $("#parent1").slideUp("fast"); work when I select "no?" http://megandmatt.fernandwilbur.com/rsvp.php Any help would be greatly appreciated. Hey everyone, I have a simple html form that asks a user to select a state from a drop down list. Later, in the same form, there's a question that needs to display an image of the state they previously selected from the drop down menu. How can I accomplish this using javaScript?
Hi there, i've run into a bit of a problem, i've managed to get javascript to change an image when choosing an option from a dropdown menu, but when i try to get it to change multiple images it only ever changes one image... Code: <script type="text/javascript">
function changeWalls(what, whatimg)
{
if(what != "none")
{
document.images[whatimg].src = what;
}
}
</script>
<select name="Walls" onchange="changeWalls(this.value,'walls')">
<option value="images/white.gif" selected="selected">Please Select a Colour</option>
<option value="images/WALLCC.png">Classic Cream</option>
<option value="images/WALLSG.png">Shale Grey</option>
<option value="images/WALLDO.png">Deep Ocean</option>
<option value="images/WALLSM.png">Surfmist</option>
</select>
then the images i want are multiples so i want to change 2 of these Code: <img src="images/front_0002_front-wall-colour.png" alt="" name="walls" border="0" id="walls2" /> I've been running into a brick wall on this problem, and have gone over my html, css and PHP dozens of times, so I'm thinking it's a Javascript issue (where my skills are lacking). I'm using a drop-down menu script that I got he http://www.php-development.ru/javascripts/dropdown.php, which I have modified slightly to eliminate timeout and change styles on closing the menu (by clicking on it). It works fine everywhere except in IE 6 and 7. In IE 7, the menu appears where it should, but looks blank. If you leave the sub-menu open and hover over another link, the menu appears as it should. Both drop-down menus do this. In IE6, the problem is similar, except that only the bottom border of the menu items appear, not the whole link. The page can be found he http://www.georgekoury.com/index_test.php, and the only options with drop-down are "Individual Insurance" and "Group Insurance". I realize the code isn't entirely compliant, I inherited this code from another programmer and I'm trying to avoid having to rewrite the whole structure. I'm not sure what code you may need me to post, so if more information is needed, please let me know and I'll provide it. Hi there, I have a search function on my website. When a user types something, options (including his characters) are displayed in a box (layer) as hyperlinks using Ajax, a very common feature these days. My problem is that if the user clicks somewhere else in page the links display stays on screen. I tried to fix the issue by adding an onBlur event to the search box (different id that the "display" div): Code: document.getElementById('livesearch').style.display = 'none';
where livesearch is the id of the hyperlinks displaying div. Job done but...the hyperlink "box" dissapear and the problem now is that the links are not working (if you click on one, the div dissapear first (I SUPPOSE) and no redirection to link is made....) I tried a couple of if else tricks I could think of with no success. No need to say that I am not a javascript wizz....hope you like the js1 username Any help will be appreciated. Thank you in advance, Julian |
|||||||