|
JavaScript - Using Javascript To Hide An Option
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 Similar Tutorialsive 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>
I want to have several forms on one page that are not displayed until a selection is made from the category drop down box(select element). The form displayed will depend on the selection made. Here is the code I have so far. Please help. Code: <body> <label id="Label1">ADMINISTRATOR CONSOLE - ADD AND EDIT ASSETS<br /> </label> <form action="" method="post" style="border-style: ridge; width: 311px; height: 37px;" name="myform"> <table> <tr> <td>Select Category:</td><td> <select name="category" onchange="set_sub_category()" style="width: 157px"> <option selected="selected" value="select">Select an Option</option> <option value="add">Add Category</option> <option value="district">Council District</option> <option value="region">Region</option> <option value="pom">POM</option> <option value="proptype">Property Type</option> <option value="assetcat">Asset Category</option> <option value="assettype">Asset Type</option> <option value="property">Property</option> <option value="asset">Asset</option> </select> </td> </tr> </table> </form> <form style="display:none" action= "admin_console_new.html" onsubmit="return (validate_form(this)& validate_list(this))" method="post" style="border-style: ridge; border-width: medium; height: 154px; width: 346px;" name="district"> <table style="height: 86px"> <tr> <td>Select District Value:</td><td> <select name="district"> <option selected="selected">Select an Option</option> <option>Add Council District</option> </select> </td> </tr><tr> <td>Enter District Name:</td><td> <input name="name" type="text"/> </td> </tr><tr> <td>Enter Description:</td><td><textarea name="description"></textarea> </td> </tr><tr> <td><input type="submit" value="Submit" name="Submit3" /><input type="reset" value="Reset" /> </td> </tr> </table> </form> 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>
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");
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 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?
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> 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. Hi, I know very little about javascript, but it seems like what I need to do is simple, so I'm hoping someone here could help. In my online store.... I have a <div> called "prodprice" which houses a dynamically loaded price {tag_saleprice}. When the price is $0.00, I want the <div> to be hidden. When the price is anything other than $0.00, I want it to be visible. I have no idea how to code it, but it seems like the general logic would be something like this: <div id="prodprice" style="display:none">{tag_saleprice}</div> document.getElementById('prodprice') If prodprice="$0.00" .style.display = "block"; Am I totally off base? I just have no idea what to do and I have an impatient client! Thank you so much. 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. hey i need help of all u guys.Actually the problem is that when i am loading this html page i just want the sign in page to appear and on click of cancel button i want a page to appear and on click of login button i get log in page..but the problem is that whenever i load my html page i get the sign in page and the page that is present on the cancel page..i tried showing and hiding and tried but i dnt know what more to do...please help me out.. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="styling.css"/>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
window.onload = function() { document.getElementById('first_div').style.display = 'none';}
function toggle(link, div1id, div2id)
{
var div1 = document.getElementById(div1id);
var div2 = document.getElementById(div2id);
if (div1.style.display == 'none')
{
$('#third_div').hide();
div1.style.display = 'block';
div2.style.display = 'none';
link.innerHTML = 'Login';
} else {
$('#third_div').hide();
div1.style.display = 'none';
div2.style.display = 'block';
link.innerHTML = 'signin';
}
}
function toggleImg(divId)
{
$('#first_div').hide();
$('#second_div').hide();
$('#third_div').show();
}
</script>
</head>
<body>
<div id="first_div" class="container">
<label for="username">
<span>Username:*</span>
<input type="text" class="text" id="user" placeholder="Username" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label for="password">
<span>Password:*</span>
<input type="password" class="text" id="pass" placeholder="Password" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label>
<input type="checkbox" name="remember" id="remember" class="checkbox" value="1" tabindex="3" /> Remember Me?
</label>
<label>
<input type="submit" name="submit" class="button1" id="doLogin" value="Sign in" />
</label>
</div>
<div id="second_div" class="container1">
<label for="username">
<span>
Username:*</span>
<input type="text" id="username" class="text" placeholder="Username" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label for="password">
<span>Password:*</span>
<input type="password" id="password" class="text" placeholder="Password" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label for="repass">
<span>Re-Password:* </span><input type="password" id="repass" class="text" placeholder="Re-password" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label for="email_id">
<span>Email-Id:</span><input type="text" id="email_id" class="text" placeholder="Verify email-id" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label><input type="submit" name="submit" class="button1" value="Submit" /></label>
</div>
<div id="third_div" class="image">
<img src="https://gs1.wac.edgecastcdn.net/8019B6/data.tumblr.com/tumblr_m2rdcqQLrA1qcb6kno1_500.jpg" />
</div>
<div class="header">
<button class="button_cancel" onclick="toggleImg('third_div');">Cancel</button>
<button class="button_sign" id="sign" onclick="toggle(this,'first_div', 'second_div'); return false;">Sign_in</button>
</div>
</body>
</html>
I wanted it according to this website https://www.tumblr.com I do not understand javascript at all. For about eight years I've had a UDM javascript menu on each of about 200 pages. It consists of a bunch of files that live in the top of my website and are called to each page by four lines of script. I have had only to edit appearance and links in one file. Instructions were to leave the others alone. The present version of the UDM menu is not free, as the old one was, and if I did buy it I'm not at all sure I'd be able to cope with it. Unless the names of the new files matched those of the old ones, I'd have to go in and edit each page individually. My problem is that IE9 doesn't display the menu, but does display its background, so there's a big beige block on the top left of every page. It looks bad. Would I be able to add to one of the files something like a conditional comment such as "If IE9 display none"? I would be truly grateful for any ideas that would help me fix this. My site is http://fay.iniminimo.com/ Thank you so much for your interest. Fay so basically i have javascript code that i've been trying to write. When "Other" is selected in the form's drop down box, its supposed to show the textarea, otherwise its supposed to stay hidden. I made a seperate HTML page so whomever views this didn't have to scroll through my other javascript code / html / php lol... anyhow here it is Code: <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
<script type="text/javascript">
function update2(f,s,h) {
var first=$('#'+f).val();
var hidden=$('#'+h);
if(first=="other") {
hidden.css('display','block');
else {hidden.css('display','none');}
}
</script>
</head>
<body bgcolor="#002E2F">
<form name="Manager" method="post">
<table border="0" style="background-color:#f4fbee" width="651" height="25" cellpadding="3" cellspacing="3">
<tr>
<td width="651"><font face="verdana" size="2">Please tell us how you were referred to RSIC</font></td>
</tr>
<tr>
<td width="651">
<form action="">
<select name="referred" id="referred" onchange="update2('referred','othertextarea','otherp');">
<option value="select" selected="selected">Select...</option>
<option value="AttendRSIC">Attended RSIC Event</option>
<option value="AttendIndus">Attended Industry Event</option>
<option value="RefRSIC">Referred by RSIC Staff / Board</option>
<option value="CurrentRSIC">Current RSIC business partner</option>
<option value="RefThird">Referred by a third party that does business with RSIC</option>
<option value="other">Other</option>
</select>
</td
</tr>
<tr>
<td width="651"><font face="verdana" size="2">If you selected "Other" on the previous field, please describe below</font></td>
</tr>
<tr>
<td width="651">
<p id="otherp" style="display:none;">
<textarea name="othertextarea" id="othertextarea" rows="5" cols="78">
</textarea>
</p>
</td>
</tr>
</table>
Any help is appreciated, thanks everyone! I'm making a multiple choice test, it all must be on the same page but the user must not be able to see the next question until they finish the first and click continue. Is this possible in Javascript by manipulating form object or something else? Thanks for any suggestions. New assignment. This is the code i have below already supplied now. not exactly correct yet but want to just get something to work from i need to insert an embedded script element in head section of document, purpose os to hide htmlcode and csscode frames to provide more screen space to hide 2 frames i am to change value of rows attribute in demo frameset to "100,1,*" id of the frameset object is demo Code: <title>Web Design Demo Control Buttons</title>
<link href="title.css" rel="stylesheet" type="text/css" />
<script src="demo.htm" type="text/javascript"></script>
<script type="text/javascript">
function showPreview(id,x,y) {
object=document.getElementById(id);
object.style.visibility="hidden";
top.FrameName.rows = "100,1,*";
}
</script>
just for your reference here is the demo part Code: <html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 6
Case Problem 3
Web Design Demo
Filename: demo.htm
Supporting files: css.htm, html.htm, title.htm
-->
<title>HTML Demo</title>
</head>
<frameset rows="100,210,*" id="demo" name="demo">
<frame name="title" id="title" src="title.htm" scrolling="no" />
<frameset cols="*,*">
<frame name="code1" id="code1" src="html.htm" />
<frame name="code2" id="code2" src="css.htm" />
</frameset>
<frame name="output" id="output" />
</frameset>
</html>
how does this look so far just remember the top code is what i am working on what should i change and add? suggestions anyone? Hey, I wonder how I'm going to do when it comes to the function of "show/hide" with JavaScript. My question is: I'm working on a web form. The following question is on the form: "Was ITK used?", and you're supposed to be able to pick "Yes" or "No" (by radio buttons), and this I've already fixed with no issues. But what I CAN'T do, for some strange reason, is that when you've clicked "Yes" on that question, it should appear another question: "Does customer have ITK in their network?", and when that comes up you're supposed to choose between "Yes"/"No" with radio buttons there as well. BUT if you click "No" on the first question (Was ITK used?), the other question (Does customer have ITK in their network?) shouldn't appear... Do you understand what I mean? How do I do this? Thanks in advance! Hi to all, i have a javascript on my websute that i want to hide from all users , i want put it on a database mysql and recall it, in order to hide the code, how I can make? you have some idea? please help me. Hi I am trying to implement a hide/show div, such that when you mouse over a div, another div pop's up below it. Here's what I have so far, but for some reason, only the first div set is working. That is when I mouse over div 1, div 2 shows up. So why isnt it working for divs 3,4 and 5,6? Here's my code: Code:
HTML
<div >
<div id="showhide">
Line 1
</div>
<div id="visiblediv" style="display: none;">
Line 2
</div>
</div>
<div >
<div id="showhide">
Line 3
</div>
<div id="visiblediv" style="display: none;">
Line 4
</div>
</div>
<div >
<div id="showhide">
Line 5
</div>
<div id="visiblediv" style="display: none;">
Line 6
</div>
</div>
Javascript:
<script>
function mover(){
document.getElementById("visiblediv").style.display="block"
}
function mout() {
document.getElementById("visiblediv").style.display="none"
}
document.getElementById('showhide').onmouseover=mover;
document.getElementById('showhide').onmouseout=mout;
</script>
CSS:
#visiblediv {
visibility:visible;
border:1px dotted black;
}
Any ideas, as to why it's not working? Hello everyone. I am building a subscription directory website and I need help developing a code that will perform this function: I want to be able to hide certain spans when another span appears on the page. In other words, the page will normally display <span id="spanA"> and <span id="spanB">. However, when <span id="spanC"> appears on a page, I want to set display:none for spanA and spanB. I know how to toggle between display:none and display:block using a call to a javascript function like a link with an "onClick" Perhaps there a way I could code a span in CSS to toggle this javascript function when it appears on the page? Thank you for any help! HELP NEEDED URGENTLY... Hi all, previously i posted a thread on How to HIDE a link at a certain time using javascript but now i realize i actually need the codes such that it can be implement inside the sharepoint. http://codingforums.com/showthread.p...085#post894085 One problem i encounter is that the "getElementById" is not able to control the link that i'm trying to hide. Currently what i have is this sharepoint site whereby there is a particular link that i need to hide it at a certain time and the problem now is that in sharepoint i cannot obtain the 'div id' of the control (controls refers to the combo box, text etc) in the sharepoint site. Plz help..thanks! |
|||||||