|
JavaScript - Adding An Onclick To A Dropdown Option.
On my site, when you select something from the first drop down box, javascript creates the options to appear in a second drop down box.
I have this code: Code: function addOption(selectbox, value, text)
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
and then this: Code: if(document.drop_list.Category.value == 'Assembly'){
addOption(document.drop_list.SubCat,"Electronic", "Electronic");
addOption(document.drop_list.SubCat,"Marketing", "Marketing");
addOption(document.drop_list.SubCat,"Retailing", "Retailing");
addOption(document.drop_list.SubCat,"Construction", "Construction");
}
Thats an example of how it works. What I want to now add, is an onclick to each subcategory. I want the onClick to execute the function changecolour1(). This function changes the class of a div, but ive got that sorted out so its probably irrelevent. I want to know if anyone call tell me how to make it create the OPTION with a text, value AND onclick attributes. And then I want to be able to specifiy the value of the Onclick. I'm pretty new at javascript, a lot of that code was written for me. Please shed some light for me. Thanks in advance Micomator. Similar TutorialsHello, I have some database widgets. I want the user to be able to mouseover the widget and see a popup window of a synopsis of the database. If the user would like to access the database, I would like them to have the onClick option. <head> [CODE] <script> function openPopUp(URL) { new_window = window.open(URL, 'window', 'toolbar=0,scrollbars=0,location=0, statusbar=0,menubar=0,resizable=0,width=650,height=300,left = 350,top = 280'); } function closePopUp() { new_window.close(); } </script> [CODE] <Body> [CODE] <a href="#" onMouseOver="openPopUp('http://jpl.coj.net/res/db/popups/abc-clio.html')" onMouseOut="closePopUp(''http://jpl.coj.net/res/db/popups/abc-clio.html')"><img src="http://jpl.coj.net/pics/logos/abc-clio.jpg" alt="ABC-CLIO Databases" width="164" height="42" border="0"/></a> <URL of database> http://databases.abc-clio.com/Multi/ Can this be done? Thank you for your help, Elbee I have some code for a dropdown where when the 'Other' option is selected a textbox appears and the user can put in their info. What I'm wondering is, how can i set it up so if the Other option isn't selected the dropdown info is sent to my database Name field, and if the Other option is selected it sends the info that's typed in to the Name field in my database and does nothing with the actual 'Other' label in the dropdown? here's the code i have so far Code: <script language="JavaScript" type="text/javascript">
<!--
function getOther(sel,fld){
fld.style.display = (sel.selectedIndex==sel.options.length-1)?"inline":"none";
}
//-->
</script>
<select name="Name" id="Name" onchange="getOther(this,this.form.oth);">
<option>Name 1
<option>Name 2
<option>Name 3
<option>Name 4
<option>Name 5
<option>Other
</select>
<br><input type="text" name="Other" style="display: none;">
I have a dropdown box with 2 options: Free or Upgraded I need to do 2 separate things depending on which one is chosen. If Free, then set the value in fourth text field to 9999 else, set value in Fourth field to 5555. Code: <head>
<script type="text/javascript">
function calculate()
{
var myLevel = eval(document.earningsform.level.value)
var memberType = eval(document.earningsform.type.value)
if(memberType==free){
document.earningsform.fourth.value = 9999;
}
else{
document.earningsform.fourth.value = 5555;
}
</script>
</head>
<body>
<table>
<form action="calculator.php" method="POST" name="earningsform">
<tr>
<td align="center">My Level: </td><td><input type="text" name="level" value="50" size="10"></td><td></td>
</tr>
<tr>
<td align="center">Member Type: </td><td>
<select name="type">
<option value="upgraded" name="upgraded" selected="selected">Upgraded</option>
<option value="free" name="free">Free</option>
</select></td>
<td></td>
</tr>
<tr>
<td align="center">4th Level: </td><td><input type="text" name="fourth" size="10" value="5"></td><td>7.5</td>
</tr>
</form>
</table>
</body>
I have a function that creates a Select dropdown on the fly: function makeForm() { mypara=document.getElementById("paraID"); myform=document.createElement("form"); myselect = document.createElement("select"); theOption=document.createElement("OPTION"); theText=document.createTextNode("Revenue"); theOption.appendChild(theText); myselect.appendChild(theOption); myform.appendChild(myselect); mypara.appendChild(myform); myselect.onchange=TitleOnChange; mybreak=document.createElement("p"); myform.appendChild(mybreak); } function makeForm() { mypara=document.getElementById("paraID"); myform=document.createElement("form"); myselect = document.createElement("select"); theOption=document.createElement("OPTION"); theText=document.createTextNode("Revenue"); theOption.appendChild(theText); myselect.appendChild(theOption); myform.appendChild(myselect); mypara.appendChild(myform); myselect.onchange=TitleOnChange; mybreak=document.createElement("p"); myform.appendChild(mybreak); } I would guess that I have to add something like: theOption.setAttribute("value","1"); I want to be able to call the following function and execute a code base on the selection of the Select Dropdown: <script type='text/javascript'> function TitleOnChange() { if (document.form.select.value == "1") { alert("Value selected on the Select dropdonw is 1"); } } </script> <script type='text/javascript'> function TitleOnChange() { if (document.form.select.value == "1") { alert("Value selected on the Select dropdonw is 1"); } } </script> I don't know why is not working. I assigned the value 1 to the select dropdown theOption.setAttribute("value","1"); I call the TitleOnChange function myselect.onchange=TitleOnChange; And Finally I indicate that if the value is equal to 1 do... view plaincopy to clipboardprint? if (document.form.select.value == "1") { alert("Value selected on the Select dropdonw is 1"); } if (document.form.select.value == "1") { alert("Value selected on the Select dropdonw is 1"); } Does anyone knows why this doesn't work and how could I fix it? Any helpt would be highly appreciate. Thanks ive been racking my brain looking for a code solution for this....im a html and css pro....and a javascript NOOB lol heres what im tryna do....i have a form...that has a Code: <option> in it for 6 dropdown options.... in one of those possible options.. when SELECTED...i want the div layer that i currently have under it...to appear and i cant seem to figure it out....heres my code in its entirety i want budget div...to appear when the option website design is selected Code: <label for="subject">What are you interested in?<em>•</em></label>
<select type="text" value="Choose a Service" name="subject" id="subject" />
<option selected> -- Select A Design Service --</option>
<option id="website"> Website Design </option>
<option> Twitter </option>
<option> Ning or Tumblr </option>
<option> Flyers </option>
<option> Business Card or Brochure</option>
<option>Other</option>
</select><br />
<div id="budget" style="display:none;"><label> Do you know your budget for this Project? </label> <input style="width:auto" type="radio" name="message" value="Not Sure"> Not sure
<input style="width:auto;margin-left:10px;" type="radio" name="budget" value="$400-$800"> $400-$800
<input style="width:auto;margin-left:10px;" type="radio" name="budget" value="$800-$1200"> $800-$1200
<input style="width:auto;margin-left:10px;" type="radio" name="budget" value="over $1200"> over $1200
</div>
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 cannot use the title attribute option as its not compatible with my web browser So I'm trying to get one particular number from a game's grand exchange database. Say I wanted to know the 'Market price' of this item and the item results would change on click of a drop down box. I don't know how I'd go about getting that one section of the entire page though. Any help is appreciated. Code: <html>
<head>
<title></title>
function doit()
{
var potion = calculate.potion.options[calculate.potion.selectedIndex].text;
if (potion=="Sara brew")
{
var potion = "Saradomin_brew_(3)";
}
if (potion=="Zammy brew")
{
var potion = "Zamorak_brew_(3)";
}
calculate.results.value=potion;
}
</head>
<body>
Item: <select name="potion" onChange="doit()" />
<option selected>--Potion--</option>
<option>Sara brew</option>
<option>Zammy brew</option>
<br />
<input type="text" name="results" />
</body>
</html>
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 Is it possible to add an onclick event to an iframe or perhaps a DIV that holds an iframe? In specific I am using the Facebook Open Graph like button: Code: <iframe src="http://www.facebook.com/plugins/like.php?layout=button_count&show_faces=true&width=450&action=like&colorscheme=light&href=http://urltoshare.com/" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:21px"></iframe> What I would like to do is add a simple onclick event to it so that I can run a process when the user clicks on it, at the moment I am just trying alert but cannot get it to work. By setting the iframe within a DIV with height/width specs set would an onclick event work within the DIV? Hi all, I can't seem to add an onclick event to an image. I'm sure I am doing something wrong as I am very new to Javascript. This is a part of my javascript code that is in the head and body of my HTML file: Code: <head>
<script language="JavaScript">
.....
.....
var redLocation0 = redArray[0]+".jpg";
....
....
function redClick( buttonLocation ) {
window.location = "http://www.yahoo.com/"
}
....
....
</script>
</head>
<body>
<table>
<tr>
<td>
<script language="javascript">document.write('<IMG SRC="'+ redLocation0 +'">'); onclick="redClick('0')";</script>
</td>
</tr>
</table>
</body>
The image that is displayed is not clickable, and therefore the function redClick cannot be called. Can someone please help me and tell me where I am going wrong here. I am kinda new to JavaScript. Thanks! Hello Everyone, I am in the process of creating a billboard script for our company front page which will switch between two images. I am using the following script as a base: http://tympanus.net/codrops/2009/12/...query-and-css/ I am eager to learn coding, but am still a novice at it so I was wondering if anyone could assist me with adding the following functionality: 1. Rather than (or perhaps in addition to) having the two images change based on a timer, I'd like to be able to insert a "next" arrow. Therefore I will need assistance in coding a button to change the images from "ad_1" to "ad_2" which is currently done automatically by the interval timer 2. I'd like to make the images clickable with unique destinations (so when you click on "ad_1" it will take you to "link 1", "ad_2" will take you to "link 2" Below is my current code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Rotating Billboard with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>
</head>
<body>
<div class="palmtrees"></div>
<div class="powerline"></div>
<div class="city"></div>
<div class="container">
<div class="ad">
<div id="ad_1" class="ad_1">
<img class="slice_1" src="ads/ad1_slice01.jpg"/>
<img class="slice_2" src="ads/ad1_slice02.jpg"/>
<img class="slice_3" src="ads/ad1_slice03.jpg"/>
</div>
<div id="ad_2" class="ad_2">
<img class="slice_1" src="ads/ad2_slice01.jpg"/>
<img class="slice_2" src="ads/ad2_slice02.jpg"/>
<img class="slice_3" src="ads/ad2_slice03.jpg"/>
</div>
</div>
</div>
<div class="billboard"></div>
<a class="back" href="http://tympanus.net/codrops/2009/12/16/creating-a-rotating-billboard-system-with-jquery-and-css/"><a>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script>
$(function() {
$('#ad_1 > img').each(function(i,e){
rotate($(this),500,10000,i);
});
function rotate(elem1,speed,timeout,i){
elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){
var other;
if(elem1.parent().attr('id') == 'ad_1')
other = $('#ad_2').children('img').eq(i);
else
other = $('#ad_1').children('img').eq(i);
other.animate({'marginLeft':'0px','width':'266px'},speed,function(){
var f = function() { rotate(other,speed,timeout,i) };
setTimeout(f,timeout);
});
});
}
});
</script>
</body>
</html>
And here is a working example: http://www.santamarinas.com/RS/Tests/Billboard/ Thank you in advance for your help!! Hello all, I am currently looking to create a JavaScript menu for a website I am working on. It currently expands and collapses on click. The code in question is pasted below:- menu_status = new Array(); function showHide(theid){ if (document.getElementById) { var switch_id = document.getElementById(theid); if(menu_status[theid] != 'show') { switch_id.className = 'show'; menu_status[theid] = 'show'; }else{ switch_id.className = 'hide'; menu_status[theid] = 'hide'; } } } As you can see, it basically shows and hides the menu (when clicked). I want it to open the menu when clicked and close when another menu is opened. I have looked and have not been able to find a solution into it. Ideally I donot want it to be a long piece of code as I do have a working menu but with many more lines of JavaScript than the one I have posted. I need a solution to it urgently, your help is appreciated. Thanks Hi, I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now. The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again? I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
//<![CDATA[
function store(element) {
// store values
var cl = element;
var text_list = new Array();
var value_list = new Array();
var length = cl.length;
for (var foo=0; foo<length; foo++) {
text_list[foo] = cl.options[foo].text;
value_list[foo] = cl.options[foo].value;
alert("text array " + foo + " " + text_list[foo]);
alert("value array " + foo + " " + value_list[foo]);
}
populate(cl, text_list, value_list);
}
function populate(element, text, value) {
// populate options with previously stored values
var cl = element;
var length = cl.length;
cl.options.length=0;
for (var bar=0; bar<length; bar++) {
cl.options[bar]= new Option(text[bar], value[bar], false, false);
}
}
function crafty_set_country(code) {
var cl = document.getElementById('select');
store(cl);
for (var i=0; i<cl.length; i++) {
if (cl.options[i].value == code) {
alert(cl.options[i].value + " found");
var value = cl.options[i].value;
var text = cl.options[i].text;
cl.options.length=0;
cl.options[0]=new Option(text, value, true, true);
/*
for (var j=0; j<cl.length; j++) {
alert("second loop " + cl.options[j].text);
if (cl.options[i].value != code) {
cl.options[j]
}
}
*/
} else {
alert(cl.options[i].value);
}
}
}
//]]>
</script>
</head>
<body>
<form>
<select id="select">
<option value="10">ten</option>
<option value="20">twenty</option>
<option value="30">thirty</option>
<option value="40">fourty</option>
<option value="50">fifty</option>
<option value="60">sixty</option>
</select>
<input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
<input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)">
</form>
</body>
</html>
Many thanks! Martin I'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. hey guys The first dropdown has some options as : abc(a) bcd(a) cde(b) def(b) efg(c) fgh(c) The second dropdown has : a b c On selecting abc(a) in first dropdown the 'a' must get selected in second dropdown,on selecting cde(b) second dropdown must have 'b' and so on,also the second dropdown value should be disabled(grayed out) for user.Need the code in javascript.ty in advance. Hello, I am completely new to HTML/JS/CSS, therefore I know very little. I have two drop-down prompt controls with month names. One has just one value (say "July") and the other has all the months of the year ("January".."December"). The first prompt control is hidden on the page. How do I set the default selection of the second prompt control to the value present in the first prompt control? So, when the page is run, the second prompt control should automatically show "July". I was reading up on the selectedIndex property (?), but I know that it won't work because I want Index 0 to be selected in the first control and Index 6 in the second, and I expect it to change every month (next month it will be index 7 that should be automatically selected). If it matters, I am using IE8. Thanks! Is it possible disable an onclick after clicking it and then enable it from another onclick by id Code: <img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;"> This code runs when it is clicked: Code: $("#one").click(function() {
runEffectB();
return false;
});
What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run. I am assuming I will be able to re-enable it from another onclick running a similar function. This is jquery and jquery ui if that helps. Any ideas much appreciated. Hi, I have two dropdown lists with the second one being dependent on the selection in the first. Options in list 1: 1,3 or 4 List two should be enabled when 3 or 4 is selected in list 1. So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form: Code: <select name="fw[$i]" id="fw[$i]"> <option value="1">FWH</option> <option value="3">links</option> <option value="4">rechts</option> <option value="0" selected></option> </select><br /> <select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);"> <option value="0" selected>---</option> <option value="1">gut</option> <option value="2">schlecht</option> <option value="3">Strafschlag</option> <option value="4">OB</option> </select> $i is my index generated by my PHP script and runs from 1 to 18. Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field. Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable. Code: function showBox(field,val) {
if (val > 1) {
var box = 'lie[' + field + ']';
document.form1.box.disabled == false;
}
else {
document.form1.box.disabled == true;
}
}
Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem. Thanks in advance! Joe |
|||||||