|
JavaScript - Setting Up An Option Group In Javascript?
So this is how I setup an item in the list and it works fine but I can't fine the syntax for setting an option group in javascript.
Cheers Daniel. Code: Users[0] = new Option("Text to show in list", "Item Value");
Similar TutorialsHi I want a javascript code that replicates the function of SQL group by clause. I tried in several ways but couldnt find the right approach. It would be of great help if someone could guide/do the code for this process. Thanks in advance. Calvin Hi, I have an array in JavaScript. How can I GROUPBY Branch, then by Client and then by Referral Type and COUNT DISTINCT LPS # in JavaScript. Please note I need to do this client side using JavaScript. Array Data: Branch Client Referral Type LPS # 402036 402430 Psychological File Review 30 402049 402805 In-Home Assessment 10.87927 402050 402993 Chiropractic Assessment 100 402049 402805 Chiropractic File Review 10.88054 402049 402806 Chiropractic File Review 10.88055 402049 402806 Defense Medical 20 402049 402807 Chiropractic Assessment 10 402049 402807 In-Home Assessment + Form 1 10.88054 402049 402807 Physiotherapy Assessment 10 402049 402808 Attendant Care Assessment 10 402049 402808 Chiropractic Assessment 10.88041 402049 402808 In-Home Assessment 10 402049 402816 Chiropractic Assessment 10.85316 402049 402827 Neurological File Review 10.88047 402049 402827 Social Work File Review 10.88044 402050 402605 Psychological File Review 880434 402050 402661 Physician Assessment 878203 402050 402993 Physician Assessment 1000 402036 402575 Psychological File Review 50 Thanks Hello, I have a shopping cart that calculates shipping on products based on weight. What I'm wanting to do is use Javascript to scan the contents of the visitors shopping cart for a particular word, as well as scan the quantity of the product in the cart. The condition: If the product name = some string I want to compare AND if the quantity < some number I want to compare. If these two conditions are met, I wan't to hide a shipping option called 'Free Shipping' once the user clicks the Estimate Shipping & Tax button. Here is a link to the websites cart.php page: All Commercial Furniture.com - Shopping Cart The platform we use is a little limited, so they don't give us access to their PHP files. Having to find a workaround for right now. Please let me know if you need any info. Any point in the right direction would be great. Thanks Hey, how do I make the following accessible if JS is disabled? Code: <select onchange="if (this.selectedIndex > 0) location.href=this[this.selectedIndex].value;">
<option value="www.domain.com">Your Domain</option> </select>
On all my html 5 pages of http://www.countyfairgrounds.net I have a drop down javascript menu for selecting a state. The thing has worked for years fine. However in switching to html5 the validator will not validate it. The are saying the option tag is obsolete. First I don't java, I do html5 and css3 currently. Ca anyonepoint me to a script dropdown that I can cut and paste - that will validate?
Hi again all, back with another hopefully easy question to fix. Please check this out in Internet explorer: http://www.lindesigns.us/rma/rmaonline.html I googled for the answer, but could not come up with a good response in terms of my own script on how to make the return code fields EXPAND to full length when pressed like they do in firefox and chrome. Does anyone have a quick fix for this? It's all dynamically loaded except for the first 10 fields (Which i might as well take out anyway), so I'm thinking I have to put something in the javascript somewhere, just no idea what. Thanks a lot! -pcitech I really thought this would work, a user goes to a page, selects a value from a select box then clicks a link to run a report using that hidden variable as a parameter. I am attempting to place the value in the URL to pass it. I'm sure the javascript is working, and maybe it's the HTML I've messed up - not sure. Here is the javascript (the alert does return the correct value): Code: function OnChangeDay() {
//assign the day id to the hidden variable $day
x=eval(document.getElementById("day_loc_id_select").value)
if(x) {
document.getElementById("test_day_id").value=x;
} else {
document.getElementById("test_day_id").value=0;
}
// test
alert(document.getElementById("test_day_id").value)
}
Here is the calling HTML: Code: <input type="hidden" name="test_day" id="test_day_id" value="">
<select name="day_loc_id" id="day_loc_id_select"
onchange="OnChangeDay()">
<option></option>
<?= form_options($day_loc_options) ?>
</select>
And here is the HTML that should send the value, but I get day= (nothing) Code: <a href='/depts/edoptions/excel_extract.php?ex=2&day=<? echo $test_day ?>'>SLIP Data to Excel</a> Can anyone point out where I've messed up? Thanks Hi , I need your help in toggling the causes validation property of a link button depending upon the value selected from the radio button list...if i select "yes" from radio button then the linkbutton causes validation=true...if i select "no" from radio button then the linkbutton causes validation =false..help me out people Hello; I have been trying to find files referenced in Acrobat 9 Pro help regarding using javascript in PDF files. I am waiting or Adobe to send me a link I can use to change my password for their forums. Meanwhile, does anyone have good links to these references? Thanks so much JK Hi People, I've used the Concertina Menu from Stu Nicholls on one of my websites and am trying to get the Menu slider to slide up automatically after a certain time. Currently it only slides up on a mouseclick. The working link can be found at www.atomwhale.com/share/clients/branch/website/home.html Hope someone can help me in getting this to work. thanks, Jeriel. I have selectitem list which has name value pairs SelectItem(value, name), i need to iterate in JS and i need to populate in to option list, like below, but it dint work for me. Please any help function loadme(listVle){ // listVle is the List<SelectItem> var ele = document.getElementById('numadts'); for (var i=0;i<listVle.length;i++) { var elOpt = document.createElement('option'); var fldName = listVle.item(i).getAttribute('name'); // This line the problem is elOpt.text = fldName; elOpt.value = fldName; try { ele.add(elOpt, null); } catch(ex) { ele.add(elOpt); } } } and the HTML <BODY> <FORM> <select name="numadts" id="numadts" onclick="loadme()""> </select> </FORM> </BODY> Hello, I am having some trouble with this Javascript slide show. At the moment when you click on the thumbnails they link to a larger image in a seperate browser page. I would really like to customize it so that the images open up in a smaller window on the same page. I'm sure this is something really simple but as of yet haven't been able to solve this little problem. I'm quite new to webdesign and would really appreciate some help. Thanks Hazel <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Exclusive Ionian</title> <script type="text/javascript"> <!-- var timeout = 500; var closetimer = 0; var ddmenuitem = 0; // open hidden layer function mopen(id) { // cancel close timer mcancelclosetime(); // close old layer if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // get new layer and show it ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; } // close showed layer function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; } // go close timer function mclosetime() { closetimer = window.setTimeout(mclose, timeout); } // cancel close timer function mcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null; } } // close layer when click-out document.onclick = mclose; // --> </script> <script> function changeimage(towhat,url, toImg){ if (document.images){ document.getElementById(toImg).src=towhat.src gotolink=url } } function sshow(){ window.location=gotolink } </script> <script language="JavaScript1.1"> var myimages=new Array() var gotolink="#" function preloadimages(){ for (i=0;i<preloadimages.arguments.length;i++){ myimages[i]=new Image() myimages[i].src=preloadimages.arguments[i] } } preloadimages("i/allegra/1.jpg","i/allegra/2.jpg","i/allegra/3.jpg","i/allegra/4.jpg","i/allegra/5.jpg") </script> <style type="text/css"> <!-- #sddm { margin: 0; padding: 0; z-index: 30} #sddm li { margin: 0; padding: 0; list-style: none; float: left; font: 11pt Trebuchet MS} #sddm li a { display: block; margin: 0 1px 0 0; padding: 0px 1px; width: 78px; background: #EDEFED; color: #999999; text-align: center; text-decoration: none} #sddm li a:hover { background: #EDEFED} #sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #EDEFED; border: 0px solid #EDEFED} #sddm div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; background: #EDEFED; color: #999999; font: 11pt Trebuchet MS} #sddm div a:hover { background: #F7CB96; color: #999999} --> </style> <link href="file:///E|/c/rou.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- --> </style> </head> <body> <br /> <table width="900" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#EFEFED"> <tr> <td width="900" bgcolor="#EFEFED"> <div align="center"> <p><a href="javascript:sshow()"><img src="i/allegra/1.jpg" name="targetimage" width="900" height="425" hspace="0" vspace="15" border="0" id="targetimage"><br /> </a> <a href="file:///E|/i/allegra/1.jpg" onmouseover="changeimage(myimages[0],this.href, 'targetimage')"><img src="i/allegra/1s.jpg" width="180" height="85" hspace="0" vspace="0" border="0"></a><a href="file:///E|/i/allegra/2.jpg" onmouseover="changeimage(myimages[1],this.href, 'targetimage')"><img src="i/allegra/2s.jpg" width="180" height="85" hspace="0" vspace="0" border="0" /></a><a href="file:///E|/i/allegra/3.jpg" onmouseover="changeimage(myimages[2],this.href, 'targetimage')"><img src="i/allegra/3s.jpg" width="180" height="85" hspace="0" vspace="0" border="0" /></a><a href="file:///E|/i/allegra/5.jpg" onmouseover="changeimage(myimages[4],this.href, 'targetimage')"><img src="i/allegra/4s.jpg" width="180" height="85" hspace="0" vspace="0" border="0"></a><a href="file:///E|/i/allegra/4.jpg" onmouseover="changeimage(myimages[3],this.href, 'targetimage')"><img src="i/allegra/5s.jpg" width="180" height="85" hspace="0" vspace="0" border="0" /></a></p> </div></td></tr> <tr> <td valign="top" bgcolor="#EFEFED"><br /> <p align="left" class="style9"><br /> <br /> </p></td> </tr> </table> <p align="center"> </p> </body> </html> hi everyone im here again begging for your help im innocent in this field is there a javascript for setting up a limit in form submit attempts by which someone's attempts can be reset for given time? Shall we say you could try again after 10minutes or tommorow or whatsoever. for example in my form: <form blahblahblah...> <input value=""...blahblahblah/> (then here it goes my problem, if the input value above IS NOT EQUAL to "MYUSERNAME" then limit the form submission attempts to 10 tries, else a warning box will appear saying "You have reach the maximum tries per day") <input type="submit" value="Submit"/> </form> thank you so much and may the God Bless you for your kindness! Hello! I am playing with CSS3 transitions to show/hide a DIV element. The application will be for a newsletter which will allow a user to show and hide article content. There will be multiple articles. I have a <DIV id="article1" class="content"> and the default height is 0px. When someone clicks the "show/hide article" link I set the height to 250px. A CSS transition on the content class (height) adds a smooth change from 0px to 250px. I have rigged up a simple Javascript function so that when someone clicks the "show/hide article" link, it checks the height of the DIV. If the div is 0px, it should expand the content, if not, it should shrink it. It works when you click the link the first time (i.e. the content div height is set to 250px and the transition works). But when you click it again, it does not set the height to 0px in order to hide the content. I think there is something wrong with the validation of document.getElementById(articleID).style.height ? Any ideas? Thank you! Code: Code: <!DOCTYPE html>
<html land="en">
<head>
<script language="javascript" type="text/javascript">
function showhideContent(articleID) {
if(document.getElementById(articleID).style.offsetHeight = '0px'){
document.getElementById(articleID).style.height = '250px';
}
else{
document.getElementById(articleID).style.height = '0px';
}
}
</script>
<style type="text/css">
p {
margin:10px;
font-size:12px;
}
h1 {
margin:10px;
}
body {
background-color:lightgrey;
font-family:Arial;
font-size:12px;
}
#newsletter {
width:500px;
border:solid;
border-width:1px;
border-color:black;
background-color:white;
text-align:left;
font-size:11px;
}
#header {
height:125px;
}
#footer {
height:50px;
background-color:#330033;
}
#headerbar{
background-color:lightblue;
height:35px;
overflow:hidden;
font-size:12px;
-webkit-transition: background-color 1s;
}
#headerbar:hover{
background-color:#3399FF;
}
.content{
background-color:white;
height:0px;
overflow:hidden;
-webkit-transition: height 0.5s ease-in-out;
}
#expand{
background-color:red;
}
</style>
</head>
<meta charset="UTF-8">
<body>
<center>
<div id="newsletter">
<section id="header">
<img src="newsletter_header_test.jpg">
</section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis augue, nec cursus metus. Proin dictum,
velit vel vulputate vulputate, ante sem iaculis risus, at faucibus nibh tellus et ante. Vivamus quis enim nec arcu
dictum molestie non quis ipsum.
<br><br>
Proin vel mi eget sapien tincidunt pretium et non eros. Nullam vitae lacus at tortor volutpat feugiat. Vivamus
venenatis risus in urna aliquet laoreet tempus diam consequat. Praesent viverra placerat venenatis. Quisque arcu
nisl, congue sed blandit ut, suscipit eu velit. Nam quam massa, sollicitudin et elementum at, tempus nec eros.
Etiam eget tortor condimentum metus accumsan dignissim eu sed sem.
</p>
<article>
<section id="headerbar">
<div style="float:left;">
<h1>Introducing: the first article</h1>
</div>
<div style="float:right;">
<p>
<a id="expand" href="#" onClick="javascript:showhideContent
('article1');return false;">Show/Hide Article</a>
</p>
</div>
</section>
<div>
<section id="article1" class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis augue, nec cursus metus. Proin dictum,
velit vel vulputate vulputate, ante sem iaculis risus, at faucibus nibh tellus et ante. Vivamus quis enim nec arcu
dictum molestie non quis ipsum.
<br><br>
Proin vel mi eget sapien tincidunt pretium et non eros. Nullam vitae lacus at tortor volutpat feugiat. Vivamus
venenatis risus in urna aliquet laoreet tempus diam consequat. Praesent viverra placerat venenatis. Quisque arcu
nisl, congue sed blandit ut, suscipit eu velit. Nam quam massa, sollicitudin et elementum at, tempus nec eros.
Etiam eget tortor condimentum metus accumsan dignissim eu sed sem. Quisque ultricies volutpat mauris, nec cursus
<br><br>
sapien laoreet ut. Maecenas volutpat porta enim et tincidunt. Sed vel lectus eget dolor dictum ultrices in in
mauris. Praesent laoreet velit vitae est vulputate a varius lorem eleifend.
</p>
</section>
</div>
</article>
<br>
<br>
<section id="footer">
<p>footer</p>
</section>
</div>
</center>
</body>
</html>
i'm working with a city select option, a hotel select option & an iframe. the hotel select option is populated depending on the chosen city which then updates the iframe src. this is all working fine. the trouble im having is that when the page is refreshed, normal f5 way, the hotel option changes whereas the city option & the iframe src remains the same?? this problem does not occur on a force refresh via control + f5 as then both select options & iframe src revert to their original state. I don't want the city option to change upon a normal page refresh. how do I go about this? below are the city, hotel select options & iframe Code: <form name="hotelslist" id="hotelslist">
<select id="cities" name="cities" onChange="hotel_list(hotelslist.cities.selectedIndex);loadHotel();">
<option value="Baddeck">Baddeck</option>
<option value="Banff">Banff</option>
</select>
<select id="hotelnames" name="hotelnames" onChange="loadHotel();">
<option value="Inverary Resort, Baddeck">Inverary Resort, Baddeck</option>
</select>
</form>
<iframe name="hotelframe" id="hotelframe" src="http://www.google.com" scrolling="no" width="660" height="1000" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0"> <p>Your browser does not support iframes.</p> </iframe>
below is my javascript functions Code: function loadHotel() {
var destURL = document.hotelslist.hotelnames.options[document.hotelslist.hotelnames.selectedIndex].value;
window.frames["hotelframe"].location = destURL; }
var i;
function hotel_list(i){
var hotelslist = document.getElementById("hotelslist");
hotelslist.hotelnames.options.length=0;
switch(i)
{
case 0: //Baddeck
hotelslist.hotelnames.options[0] =new Option('Inverary Resort, Baddeck','http://www.test0.com');
break;
case 1: //Banff
hotelslist.hotelnames.options[0] =new Option('Banff Caribou Lodge & Spa','http://www.test1.com');
hotelslist.hotelnames.options[1] =new Option('Banff Ptarmigan Inn','http://www.test2.com');
hotelslist.hotelnames.options[2] =new Option('Banff Rocky Mountain Resort','http://www.test3.com');
hotelslist.hotelnames.options[3] =new Option('The Rimrock Resort','http://www.test4.com');
hotelslist.hotelnames.options[4] =new Option('Fairmont Banff Springs','http://www.test5.com/');
break;
}
}
can some one please advise on a cross browser solution? thanks in advance. Omar. Hi, I'm faced with a problem trying to set background color under IE7. I have the following Javascript: Code: function showLayer793BKColor(id)
{
var txtObj = document.all(id);
if (txtObj.style.display == 'none')
{
txtObj.style.display = ''
txtObj.style.backgroundColor = 'grey';
}
}
function hideLayer793BKColor(id)
{
var txtObj = document.all(id);
if ( txtObj.style.backgroundColor == 'grey' )
txtObj.style.display = 'none';
}
These functions are used to show or hide div blocks. These blocks are, for example, specified in the following way: Code: <div id="l_gct5tekst" style="display:none"> <b>GCT 5. Eerste verkenning problematiek</b> and, for example, Code: <div id="l_Keuze" style="display:none"> <br/> <b>GCT 5</b> <br/> </div> The whole configuration works smoothly when using IE8. However, when using IE7 I get an error msg like "Invalid value for property". When I use the Color propert iso the BackgroundColor property I get no error anymore but of course I don't have a background color anymore then. In what way can I specify the use of a background color under IE7 ? Or is just not possible in one way or the other. Furthermore, what more differences between JS under IE7 and IE8 do I have to take into account ? Do I also have to rewrite my div block in some way (using some attribs ?) to cope with IE7 ? Thanks in advance, Diederick van Elst 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 Having problems with IE not displaying the page correctly with I hide <li> I have commented out the lines that are messing up the display, can anyone tell me how I correctly hide the <li> tags ? Code: <div class="innerformboxes">
<!-- misc start -->
<ul>
<li class="<? if ($empty_Field == "paymentMethod") {?>emptyfield<? } else { ?>field<? } ?>"> Payment Method * </li>
<li class="value">
<select name="paymentMethod" onChange="if(this.value == 'Other') { document.getElementById('altpaymentMethodDiv').style.display='block'; } else { document.getElementById('altpaymentMethodDiv').style.display='none'; document.getElementById('altpaymentMethod').value=''; };">
<option value="">Select Payment Method</option>
<option <? if($paymentMethod == 'Cash') { echo 'selected'; } ?> value="Cash">Cash</option>
<option <? if($paymentMethod == 'Credit Card') { echo 'selected'; } ?> value="Credit Card">Credit Card</option>
<option <? if($paymentMethod == 'Account') { echo 'selected'; } ?> value="Account">Account</option>
<option <? if($paymentMethod == 'Other') { echo 'selected'; } ?> value="Other">Other</option>
</select>
</li>
<!--
<div < ? if($paymentMethod == 'Other') { echo 'style="display: block;"'; } else { echo 'style="display: none;"'; } ?> id="altpaymentMethodDiv">
-->
<li class="<? if ($empty_Field == "altpaymentMethod") {?>emptyfield<? } else { ?>field<? } ?>"> Other <input type="text" autocomplete="off" name="altpaymentMethod" id="altpaymentMethod" value="<?=$altpaymentMethod;?>" style="width: 200px;"> </li>
<!--
</div>
-->
<? if(!isSet($_SESSION['FM_user'])) { ?>
<li class="<? if ($empty_Field == "previousClient") {?>emptyfield<? } else { ?>field<? } ?>"> Are you a Previous Client * </li>
<li class="value">
<input type="radio" name="previousClient" value="Yes" <? if($previousClient == 'Yes') { echo 'checked'; } ?>> Yes <br>
<input type="radio" name="previousClient" value="No" <? if($previousClient != 'Yes') { echo 'checked'; } ?>> No
</li>
<? } ?>
</ul>
<!-- misc end -->
</div>
Hi, I'm hoping someone can help. I have this code which allows a user to check multiple checkboxes by clicking just one check box. However, when I post the form, I only get the value of one check box. Suppose, I don't check the 'select all' check box and want to check only 1 and 3 checkbox, I still get the value for only one check box. Any help will be much appreciated! Cheers! Code: <SCRIPT LANGUAGE="JavaScript">
<!--
<!-- Begin
function Check(chk)
{
if(document.myform.Check_ctr.checked==true){
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
}else{
for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
}
}
// End -->
</script>
Here is the code for body part .
<form name="myform" action="checkboxes.asp" method="post">
<b>Scripts for Web design and programming</b><br>
<input type="checkbox" name="check_list" value="1">ASP<br>
<input type="checkbox" name="check_list" value="2">PHP<br>
<input type="checkbox" name="check_list" value="3">JavaScript<br>
<input type="checkbox" name="check_list" value="4">HTML<br>
<input type="checkbox" name="check_list" value="5">MySQL<br>
<input type="checkbox" name="Check_ctr" value="yes"
onClick="Check(document.myform.check_list)"><b>Check Control</b>
</form>
If I have a radio button group called "RADIO1" how can I put focus on there? Is it like this? document.theForm.RADIO1[0].focus; |
|||||||