|
JavaScript - Display Specific Input Fields Depending On Combobox Selection
Hi
Within a classic asp webform (using vbscript) I would like part of the form (input boxes within table structure) to be specific/displayed depending on the users selection from the combo box in the row above. I think the best solution would be using Javascript can anyone suggest a solution or example code? Many thanks Sarah Similar TutorialsHi I'm new to javascript, so this is probably very simple. I've created a form with combobox with different values (this is for my website). What I want is when the user clicks 'submit' that it goes to a different page on the website depending on the value the person has selected in the combobox. Values are numerical, for example 1000, 2000, 5000 etc. I've been trying this for a couple of days now without success! Thanks in advance I have a registration form that I am working on in which I need to assign a price to each option in a selection box then write that price in the document. Then I have a radio button that will add (different amounts based on selection) to that price before it is written. Then I have another radio button that just needs to write a price based on its selection. Both of these values will be written and then totaled. (See below for a less confusing explanation) On HTML form: >drop down list (name courseName, value of selections 1,2,3,4) > radio button (name returnStudent, value of selections 1,2) > radio button (name bookNeeded, value of selections 1,2) Table (name totalprice) at the bottom of the form: price1: price of courseName plus returnStudent (td with name tuitionprice) price2: price of bookNeeded (td with name bookprice) Total of the above (td with name totalprice) This is what I am trying to make work... Code: var selectedCourse = document.onsiteRegistration.courseName.value;
var selectedStudent = document.onsiteRegistration.returnStudent.value;
function setTuition()
{
if (selectedCourse == "1" && selectedStudent =="1")
{
document.write("12345");
}
if (selectedCourse == "1" && selectedStudent =="2")
{
document.write("54321");
}
}
Then in my HTML I have simply put this to call the function and write it where I need it to be placed. <script>setTuition()</script> I am trying to find some examples of something like this but all I am coming up with is shopping carts and that is not what I need here. I am fairly confident that I can program the second part (totaling) if I can only get the selections to populate the different prices for me. If someone could point me in the right direction I would be very grateful! I am thinking this should be fairly easy but yet I am not getting far. I want to have a form with a single text imput field for a zip code. Depending on which zip code the user enters will determine which url they will be sent to. If they enter a zip code which is not in the script, they would be sent to a default url. I am also assuming this can be accomplished with javascript. Any help is greatly appreciated. Hi guys, Let me explain simply what I do and what I'm trying to achieve: I got a couple of comboboxes were the user selects a series of numbers. Once a selection is made, the value is appended to an input box. The idea is that the appended values form a telephone number, or at least part of one, that will then be used to search trough a database to look for a matching number. The code below is what I have done so far: Code: <script type="text/javascript">
function displayIndicatif(){
var sel = document.getElementById("indicatif");
var text = sel.options[sel.selectedIndex].value;
var out = document.getElementById("blabla");
out.value += text+"\n";
}
function displayBloc(){
var sel1 = document.getElementById("bloc");
var text1 = sel1.options[sel1.selectedIndex].value;
var out1 = document.getElementById("blabla");
out1.value += text1+"\n";
}
</script>
[...]
<input type="text" id="blabla"/>
[..]
<select id="indicatif" onChange="displayIndicatif();">
<option value="021">021</option>
<option value="022">022</option>
<option value="031">031</option>
</select>
<select id="bloc" onChange="displayBloc();">
<option value="555" class="021">555</option>
<option value="666" class="021">666</option>
<option value="777" class="021">777</option>
</select>
Basically what happens now is this: combobox indicatif: 021 | 022 | 031 combobox bloc: 555 | 666 | 777 If I select "021" from indicatif, the script will append 021 to the input "blabla". The problem is, if I now select "022", the input will show "021022" instead of replacing the 021 with 022. What I would like is that, for each combobox, the script replaces the selected value with the new one instead of simply appending it, like instead of say 021022555666 it would show 021555 or 022666 or 021666 depending on what is selected...you get the idea? Is this doable? Needless to say I'm a total noob at javascript...I adapted the code I got now from some other guy who was trying to achieve almost the same thing and adapted it to my needs, or least, tried to, but now I'm stuck. Any help is appreciated! Thanks Hello Folks, Here is my dropdown menu: Code: <select name="peeps"> <option value="Frank Tompson">Frank Tompson</option> <option value="Henry Wilson">Henry Wilson</option> <option value="Bill Kent">Bill Kent</option> <option value="Jessi McDonald"> Jessi McDonald</option> <option value="John Hays">John Hays</option> How can i make it so if i click on John Hays a JavaScript pop up will say Hello John Hays, and if i click on Bill Kent a popup will say hello Bill Kent and if i click on any other name nothing happens? Hi coders, I need to achieve two things upon making a selection from a drop down field: 1) Changing the background picture of a cell. 2) Changing the size of a uploaded foreground picture within the same cell. Code: <select name=ADDITIONALINFO> <option value="25 x 25">25 x 25</option> <option value="35 x 35">35 x 35</option> <option value="45 x 45">45 x 45</option> <option value="55 x 55">55 x 55</option> </select> Any guidance how to achieve this is appreciated. Hello. The code below lets a user select a drop down option and a picture changes depending on the selection. I am trying to make it so when you select an option on the dropdown the picture shows up in the center of the screen and in the background behind the text. Here is the code. Code: <html>
<head>
<style type='text/css'>
#txt {background-repeat:no-repeat;width:200px;height:200px;}
</style>
<script type='text/javascript'>
function div_bg(team){
document.getElementById('txt').style.backgroundImage="url(images/" + team + ".jpg)";
}
</script>
</head>
<body>
<select name='team' onChange='div_bg(this.value);'>
<option name='arsenal' value='arsenal'>Arsenal</option>
<option name='liverpool' value='liverpool'>Liverpool</option>
</select>
<div id='txt'></div>
</body>
Thanks in advance!! Dear Javascript programmers, Do you have an example of a Javascript something like this: A dropdownlist with values "one" and "two". The radio button is not visible (as a start). - If you have selected "one" from the dropdown list, then a radio button will appear. - If you have selected "two" from the dropdown list, then a radio button will NOT appear. Thanks, Cornelis Gouda - The Netherlands <html> <script language="javascript"> function foo() { var mainDiv = document.getElementById("my"); var div = document.createElement("div"); for(j=0;j<5;j++) { var select = document.createElement("select"); for(i=0;i<5;i++) { var option = document.createElement("option"); option.text = "hmm"; select.appendChild(option); } div.appendChild(select); } mainDiv.appendChild(div); } </script> <body> <select onchange="foo()"> <option>a</option> <option>b</option> <option>c</option> <option>d</option> <option>e</option> <option selected>-----Select------</option> </select> <div id="my"></div> </body> </html> I stuck ... but I got the solution now I want to reset on every selection ? Hy everyone! It's a simple question. I need to create a drodbox menu in a way that when the thrid option is selected, it opens up a check box in the same form. How can that be done? Txs a lot! Hello I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page: http://www.watphotos.com/introductio...otography.html And here is the code in question: Code: <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var initial = 0
var total = 0;
var services = 0;
function addServices()
{
initial = 150
total = initial
services = 0;
$("input:checked").each(function(){
value = $(this).attr("value");
services += parseInt(value);
});
}
$(function()
{
addServices();
total += services;
$("form").before('<p class="price"></p>')
$("p.price").text("Total Price: US$" + total);
});
$("input:radio, input:checkbox").click(function () {
addServices();
total += services
$("p.price").text("Total Price: US$" + total);
});
});
</script>
I have two questions... Question 1 How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky. I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this? Question 2 The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document? Thanks in advance! Hi, On a registration form I have 4 fields that are all dropdown select fields. NAME, CLASS-1, CLASS-2, CODE 1) I would like to activate the CLASS-1, CLASS-2, CODE fields only if the NAME IS Selected from the dropdown. 2) Also would like to make the CLASS-1, CLASS-2 as required fields if the NAME is selected from the dropdown. How can I achieve this? Can I use some kind of a server event to activate / deactivate the fields on the form? Please advice Thanks Vinny The Script works in Firefox, BUT not in Internet Explorer. What am I missing? I need Drop Down menu Boxes to appear when User clicks on a certian Menu option. The way it appears now on the website is all the boxes appear. They should stay "hidden" until a User clicks on the drop down menu selection. Thanks! <head> <script type="text/javascript" language="javascript"> function showInfo() { var typeOne = document.getElementById('bmp'); var typeTwo = document.getElementById('junction'); var typeThree = document.getElementById('mile'); if(document.basicform01.Location_Type.value == "BMP to EMP") { typeOne.style.display="inline"; typeTwo.style.display="none"; typeThree.style.display="none"; } else if(document.basicform01.Location_Type.value == "Junction to Junction") { typeOne.style.display="none"; typeTwo.style.display="inline"; typeThree.style.display="none"; } else if(document.basicform01.Location_Type.value == "Milepost") { typeOne.style.display="none"; typeTwo.style.display="none"; typeThree.style.display="inline"; } else { typeOne.style.display="none"; typeTwo.style.display="none"; typeThree.style.display="none"; } } </script> <style>*[style] {outline:none}</style> </head> <body> <fieldset> <dl> <dt><label for="Location_Type">Location Type *</label></dt> <dd><select class="inputselect" name="Location_Type" id="Location_Type" onchange="showInfo()"> <option value="" selected="selected">Select One...</option> <option value="BMP to EMP">BMP to EMP</option> <option value="Junction to Junction">Junction to Junction</option> <option value="Milepost">Milepost</option> </select></dd> <div id="bmp" style="display:none;"> <dt><label for="bmpDetails">BMP</label></dt> <dd><input class="inputtext" type="text" name="bmpDetails" id="bmpDetails" /></dd> <dt><label for="empDetails">EMP</label></dt> <dd><input class="inputtext" type="text" name="empDetails" id="empDetails" /></dd> </div> <div id="junction" style="display:none;"> <dt><label for="fromJunction">From Junction:</label></dt> <dd><input class="inputtext" type="text" name="fromJunction" id="fromJunction" /></dd> <dt><label for="toJunction">To Junction:</label></dt> <dd><input class="inputtext" type="text" name="toJunction" id="toJunction" /></dd> </div> <div id="mile" style="display:none;"> <dt><label for="milepostNum">Milepost</label></dt> <dd><input class="inputtext" type="text" name="milepostNum" id="milepostNum" /></dd> </div> <p> </dl> <p> </fieldset> </body> Hello everyone, I just stumbled across this forum and thought maybe someone here could help me with a few coding alterations. I would like to position the rss feed selection fields on this feed output so I can scroll the feed with the selection fields remaining stationary. Code: <link rel="icon" type="image/png" href="rss_include/feed-icon-red.png">
<style language='text/css'>
@import url('rss_include/style.css');
</style>
<script language="javascript">
var XMLHttpRequestObject = false;
var img = new Image();
img.src = "rss_include/loading.gif";
if ( window.XMLHttpRequest )
XMLHttpRequestObject = new XMLHttpRequest();
else if (window.ActiveXObject)
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
function changeOptions()
{
LoadFeed();
}
function LoadFeed(value, initial)
{
if ( XMLHttpRequestObject )
{
var dsource = "rss_include/ajax.php?loadfeed";
if (value)
dsource += "=" + value;
else
{
var val = document.getElementById("rss_feed").value;
if ( val == "" )
document.getElementById("rss_feed").selectedIndex += 1;
dsource += "=" + document.getElementById("rss_feed").value;
}
dsource += "&fulltext=" + document.getElementById("showtext").checked;
dsource += "&showimages=" + document.getElementById("showimages").checked;
XMLHttpRequestObject.open("GET",dsource);
XMLHttpRequestObject.onreadystatechange = function()
{
if ( XMLHttpRequestObject.readyState != 4 )
{
document.getElementById("rss_div").innerHTML = "<center><img class=\"loading\" src=\"" + img.src + "\"></center>";
}
if ( XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200 )
{
document.getElementById("rss_div").innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
<?php
require_once("rss_include/config.php");
function LoadFile($xml_file)
{
$xml = null;
if ( !file_exists($xml_file) || !($xml = simplexml_load_file($xml_file)) )
{
echo '</select>';
echo "Error opening XML feeds file: $xml_file<br>";
return;
}
return $xml;
}
function ShowFeedOptions($xml_file)
{
echo '<select id="rss_feed" onChange="LoadFeed(this.value)" title="GuyWMustang.com RSS Reader">';
$xml = LoadFile($xml_file);
if ( $xml == null )
return;
$url = array();
foreach($xml->feeds->category as $category)
{
echo "<option value=\"\">" . $category['name'] . "</option>";
foreach($category->feed as $feed)
{
if ( $feed['name'] != "" )
{
// Add a spacing to the feeds
$name = " " . $feed['name'];
$url = str_replace("&", "%26", $feed['url']);
$url = str_replace("http://", "", htmlspecialchars($url));
echo "<option value=\"$url\">" . $name . "</option>";
}
}
}
echo '</select>';
$options = array();
$rss = $xml->options[0];
if ( strcasecmp($rss['fulltext'],"true") == 0 )
array_push($options, "true");
else
array_push($options, "false");
if ( strcasecmp($rss['images'],"true") == 0 )
array_push($options, "true");
else
array_push($options, "false");
return $options;
}
function SetOptions($options)
{
if ( sizeOf($options) == 2 )
{
echo "<script>document.getElementById(\"showtext\").checked = " . $options[0] . ";</script>";
echo "<script>document.getElementById(\"showimages\").checked = " . $options[1] . ";</script>";
}
}
if ( isset($_GET['links']) )
{
$xml = LoadFile($xml_file);
if ( $xml == null )
return;
// end the link editing
return;
}
?>
<div class="container" id="container_div">
<a name="top"></a>
<div class="header_div">
<div style="display:run-in;float:left;">
<font class="graytext">RSS Feed:</font>
<?php $options = ShowFeedOptions($feeds_xml); ?>
<input type="checkbox" id="showtext" onChange="changeOptions(this)" checked><font class="graytext">Show Full Article Text</font>
<input type="checkbox" id="showimages" onChange="changeOptions(this)" checked><font class="graytext">Show Images</font>
</div>
<?php SetOptions($options); ?>
</div>
<div class="rss" id="rss_div">
<script>LoadFeed(document.getElementById('rss_feed').value, true);</script>
</div>
<!-- <p style="padding:0px;margin-right:2px;margin:0px;" align="center"><a class="top" href="#top">Top</a></p> -->
</div>
<-- CSS BELOW --> Code:
body
{
overflow: auto;
font-family: arial;
}
div.header_div
{
position: relative;
/*background-color: #EFEFEF;*/
width: 100%;
overflow: auto;
margin: auto;
}
div.container
{
/*border: 1px solid black;
background-color: #EFEFEF;*/
position: relative;
margin: auto;
display: block;
overflow: auto;
/* SPECIFY HEIGHT & WIDTH AS DESIRED */
height: 90%;
width: 80%;
}
div.rss
{
width: 99%;
margin: 2px;
background-color: tan;
position: relative;
/*border: 1px solid black;*/
}
img.loading
{
position: relative;
margin-top: 50px;
}
a.rss_link,a.rss_link:active
{
display: inline;
color: blue;
}
a.rss_link:hover
{
color: #BBBBFF;
}
a.rss_link:visited
{
color: black;
}
a.top,a.top:active {
text-decoration: none;
font-size: 10pt;
display: inline;
color: black;
}
a.top:hover {
text-decoration: underline;
color: brown;
display: inline;
}
font.graytext
{
font-size: 10pt;
color: #444444;
}
font.rss_title
{
font-size: 12pt;
font-weight: bold;
text-decoration: underline;
}
font.rss_date
{
font-size: 9pt;
font-weight: normal;
color: black;
display: block;
}
font.rss_description
{
font-size: 12pt;
color: blue;
}
select
{
color: black;
font-size: 10pt;
background-color: #EAEAEA;
}
any help would be greatly appreciated.....thanks Hi there, I need help in form validation! I want this to be validated upon selection of the drop down list (not when it comes to submit button) I have 2 drop down lists: Starting date (June 5th, 6th 7th) Ending date (June 5th, 6th 7th) I want to write a script that would NOT ALLOW one to choose: - Starting date June 6th and Ending date June 5th - Starting date June 7th and Ending date June 6th - Starting date June 7th and Ending date June 5th I appreciate your help What I want to do, is that, when the user select one option out of many from the dropdown box some new fields appears. I was so close to make it , using this example: Code: <script type="text/javascript">
function showInfo()
{
var elem = document.getElementById('verify');
if(document.forms[0].menu.value == "verify"){
elem.style.display="inline";}
else{
elem.style.display="none";}
}
</script>
</head>
<body>
<form action="#" method="post">
<select name="menu" onchange="showInfo()">
<option value="none">Select an option</option>
<option value="email">Email</option>
<option value="verify">Verify</option>
</select>
<div id="verify" style="display:none;">
<input type="text" value="Username" >
<input type="password" value="password" >
</div>
</form>
But what I do want, is that two differen things appear on the page and in the different location of the page. And this script does not read the second <div>. So the result is, that the only first <div> appears. Here are some images of what I want to do. Befo http://img82.imageshack.us/img82/7093/beforens9.jpg After http://img246.imageshack.us/img246/2759/afterzh2.jpg (what has to be changed is on the red circules). So can someone help me with this script?? Please! I am pritty noob to the javascript. I'm wanting to put a piece of code on my website that will display when our next meeting will be. We have 2 meetings per month. I'm thinking what I need to do is create a code that gets the current month, day of month, and year then combines it together somehow, and if that combination is in a certain range a particular statement, "Next meeting is MM, DD YY." or "Next meeting is today." is displayed. If date is equal to or between 01012012 and 01112012, "Next meeting is January, 12 2012" is displayed. If date is equal to 01122012, "Next meeting is today" is displayed. If date is equal to or between 01132012 and 01252012, "Next meeting is January, 26 2012" is displayed. If date is equal to 01262012, "Next meeting is today" is displayed. ...that kind of thing. How would I combine the month, day of month, and year? Would 48 if statements be what I need to do? Sorry, I'm pretty new to javascript. If there's a better way to do this, please let me know. Thanks, CJ Ok, here is the scenario... We have a commercial shopping cart software installed on our website and since it is proprietary, we do not have access to source code. But they do allow you to include custom javascript on the web pages that they generate. What I want to do is add some text after a specifc INPUT tag that appears on the page within a TD tag. The problem is, that they do not have any specifc ID assigned to the INPUT or TD tag, and although the INPUT tag has a name assigned to it, the name is used in other tags as well and is not unique. Below is the code that I used to solve the problem, but I want to know if there is a more efficient way to do it... Basically my code grabs every TD tag on the page, and then loops thru all of them looking for the specifc INPUT tag characteristics and then inserts the text afterwards (it needs to work in both Firefox and IE so you cannot use innerHTML). Thanks in advance for any suggestions! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<script type="text/javascript">
function myLoad()
{
var _match = false;
var _tdcells = document.getElementsByTagName('td');
var _len = _tdcells.length;
for (var _i=0; _i<_len; _i++) {
_child = _tdcells[_i].childNodes;
_child_len = _child.length;
for (_j=0; _j<_child_len; _j++) {
if ( (_child[_j].nodeType == 1) && (_child[_j].attributes.getNamedItem('name').value == 'zip_code') && (_child[_j].attributes.getNamedItem('onchange').value == 'zip_changed();') && (_child[_j].attributes.getNamedItem('type').value == 'text') && (_child[_j].attributes.getNamedItem('size').value == '10'))
{
_cell = _i + 1;
alert('Found a match in cell number '+_cell);
_match = true;
var old_node = _child[_j];
var new_node = document.createTextNode(' New Text!');
//Insert Before usually inserts before the element, but using targetElement.nextSibling inserts it after instead!!
_tdcells[_i].insertBefore(new_node, old_node.nextSibling);
}
}
}
if (_match !== true)
{
alert('no match found');
}
}
</script>
</head>
<body onLoad="myLoad();">
<table class="zipncountry" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<br>
<table border="3">
<tr>
<td>4</td>
<td>5</td>
<td><input type="text" name="zip_code" value="123" size=10 maxlength=20 onChange="zip_changed();"><input type="hidden" name=zip_code value="321" size=10 maxlength=20 ></td>
</tr>
</table>
<br>
<table class="zipncountry" border="5">
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
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?
Hello, I would like to create a form that calculates the area of a floor or wall. The user will input the length/height and width dimensions into two input fields and then click calculate. I simply need a script that multiplies the two fields together and puts the answer in a third read-only field. Any help much appriciated Kind regards, Mike |
|||||||