|
JavaScript - Display Img Based On Drop Down Selection
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?
Similar TutorialsI apologize for all the text I'm about to type, but I just want to make sure I explain my problem in detail. So I have created a simple Weather Forecast algorithm containing the JavaScript code that uses a prompt to allow a user to enter a temperature in degrees Celsius, and based on the degrees entered (temperature scale is below), the program will display one of the following messages based on the selection structure I have created: (Kindly find attached .txt file of my entire code, I wasn't able to upload an HTML file.) -18 degrees Celsius: "Bundle up! It's freezing out there!" -18 - 0 degrees Celsius: "Pretty cold with a chance of snow!" 15 degrees Celsius: "Don't forget your jacket. It's still chilly out!" 16 - 27 degrees Celsius: "Perfect, lovely weather... unless it rains." 28 - 35 degrees Celsius: "Nice and warn. Go for a swim." 35 degrees Celsius: "Really hot! Best to stay in air conditioning." HELP Now i want improve on the same program and let the user enter the degrees in either unit using a prompt to ask the user whether the entry is Celsius(C) or Fahrenheit (F) (F scale is below) and use the correct degree breakdown to display the same messages: Less than 0 degrees Fahrenheit: "Bundle up! It's freezing out there!" 0 - 32 degrees Fahrenheit: "Pretty cold with a chance of snow!" 33 - 59 degrees Fahrenheit: "Don't forget your jacket. It's still chilly out!" 60 - 80 degrees Fahrenheit: "Perfect, lovely weather... unless it rains." 81 - 95 degrees Fahrenheit: " Nice and warn. Go for a swim." Greater than 95 degrees Fahrenheit: " Really hot! Best to stay in air conditioning." I'd appreciate if anyone can help me with this. Again, I've attached my original file where the user can only enter in degrees Celsius and gets the corresponding messages. I have tested it and it works perfectly. Attached Files hourlyForecast1.txt (954 Bytes, 24 views) 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> Hi Guys, I'm a new member, so hello all! I'm ok at html/xhtml, but i know nothing about javascript, so hoping someone here can help! Basically, I have a contact form on my website that offers 2 different types of contact: RSVP and Other. these two types are available in a selection box. What I want to happen is when the "RSVP" option is selected, the following options are displayed: "Yes/No" radio buttons "additional info" textarea And when the "Other" option is selected, the following option is displayed: "Message" text area How can i make this happen?! i've tried searching the internet but I can't get anything i find to work. I can't even get the elements to hide! At the moment, my form looks like this: - Code: <form method="POST" action="contact.php"> <table class="contact"> <tr> <td>Name:</td> <td><input type="text" name="name" size="20"></td> </tr> <tr> <td>Email:</td> <td><input type="text" name="email" size="20"></td> </tr> <tr> <td>Contact Type:</td> <td><select size="1" name="type"> <option value="rsvp" >RSVP</option> <option value="other">Other</option></td> </tr> <tr> <td colspan=2> </td> </tr> <div id="rsvp" style="display:none;"> <tr> <td colspan=2><input type="radio" name="response" value="y"> Yes Please!</td> </tr> <tr> <td colspan=2><input type="radio" name="response" value="n"> Sorry, but No. </td> </tr> <tr> <td colspan=2>Additional Comments (Please include any special dietary requirements): </td> </tr> <tr> <td colspan=2><textarea rows="5" name="rsvpmsg" cols="30"></textarea></td> </tr> </div> <div id="other" style="display:none;"> <tr> <td colspan=2>Message:</td> </tr> <tr> <td colspan=2><textarea rows="9" name="othermsg" cols="30"></textarea></td> </tr> </div> <tr> <td> </td> <td><input type="submit" value="Submit" name="submit"> <input type="reset" value="Reset" name="reset"></td> </tr> </table> </form> Please note, the style="display:none;" parts aren't even working I appreciate any help you can give! thanks! I want to insert text to a textarea based on the selected text. It should insert tags like the buttons for posting on this form work. Ie: If 'bar' is selected, and I click 'b', then I get: Code: Foo bar frog becomes: Code: Foo <b>bar</b> frog I found some code that works for firefox, but I need it to work in explorer as well. Do you have any ideas or examples how to do this? Here's the code I'm currently using. ( Works right in ff3. In IE7 it appends the tags at the end of the text. I want it to insert based on my selection. ) Usage: Code: <a onclick="insertTags('<b>', '</b>', document.forms.formpost.text);return false;" href="javascript:void(0);">[ Bold ]</a>
insert function: Code: <script type="text/javascript">
// Surrounds the selected text with text1 and text2.
function insertTags(text1, text2, textarea)
{
// Can a text range be created?
if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
{
var caretPos = textarea.caretPos, temp_length = caretPos.text.length;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;
if (temp_length == 0)
{
caretPos.moveStart("character", -text2.length);
caretPos.moveEnd("character", -text2.length);
caretPos.select();
}
else
textarea.focus(caretPos);
}
// Mozilla text range wrap.
else if (typeof(textarea.selectionStart) != "undefined")
{
var begin = textarea.value.substr(0, textarea.selectionStart);
var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
var end = textarea.value.substr(textarea.selectionEnd);
var newCursorPos = textarea.selectionStart;
var scrollPos = textarea.scrollTop;
textarea.value = begin + text1 + selection + text2 + end;
if (textarea.setSelectionRange)
{
if (selection.length == 0)
textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
else
textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
textarea.focus();
}
textarea.scrollTop = scrollPos;
}
// Just put them on the end, then.
else
{
textarea.value += text1 + text2;
textarea.focus(textarea.value.length - 1);
}
}
</script>
Hi, i am building a website form which I would like the user to select a product of interest. Some products are three tiered and some are two tiered. 1. Example of three tier (3 dropdowns required only): Scooters (dropdown 1) Three Wheel Scooters (dropdown 2) Delux 503S Bird Scooter (dropdown 3) 2. Example of two tier (2 dropdowns required only): Standing Bikes (dropdown 1) Children 300 Series (dropdown 2) If the user wants to submit their interest for one of the products, I need to have at most 3 dropdown menus. So in Example 1, I would have 3 dropdowns in my form. Dropdown 1: Scooters Dropdown 2: Three Wheel Scooters Dropdown 3: Delux 503S Bird Scooter In Example 2, I would only need to use the first 2 dropdown menus. (Obviously the first dropdown would contain 'Scooters' and 'Standing Bikes' in the menu list) The below code is perfect except, I would like to alter the code so that the second and third dropdowns are hidden until a selection from the first drop down is made. Once for example, 'Standing Bikes' is selected from the first dropdown menu, the second dropdown menu appears and the third remains hidden due to the fact that it is not required. If I selected Scooters from the first dropdown menu, the second dropdown would appear listing all items associated with this and at this point the third dropdown menu is hidden. If i select 'Three Wheel Scooter' from the second dropdown the third dropdown menu now appears listing all Three wheel Scooters such as 'Delux 503S Bird Scooter'. I hope this makes sense. Let me know if you require clarrification. Here is the code: Code: <script language="JavaScript" type="text/javascript">
<!--
/*
*** Multiple dynamic combo boxes
*** by Mirko Elviro, 9 Mar 2005
*** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)
***
***Please do not remove this comment
*/
// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected
// first combo box
data_1 = new Option("1", "$");
data_2 = new Option("2", "$$");
// second combo box
data_1_1 = new Option("11", "-");
data_1_2 = new Option("12", "-");
data_2_1 = new Option("21", "--");
data_2_2 = new Option("22", "--");
data_2_3 = new Option("23", "--");
data_2_4 = new Option("24", "--");
data_2_5 = new Option("25", "--");
// third combo box
data_1_1_1 = new Option("111", "*");
data_1_1_2 = new Option("112", "*");
data_1_1_3 = new Option("113", "*");
data_1_2_1 = new Option("121", "*");
data_1_2_2 = new Option("122", "*");
data_1_2_3 = new Option("123", "*");
data_1_2_4 = new Option("124", "*");
data_2_1_1 = new Option("211", "**");
data_2_1_2 = new Option("212", "**");
data_2_2_1 = new Option("221", "**");
data_2_2_2 = new Option("222", "**");
data_2_3_1 = new Option("231", "***");
data_2_3_2 = new Option("232", "***");
// fourth combo box
data_2_2_1_1 = new Option("2211","%")
data_2_2_1_2 = new Option("2212","%%")
// other parameters
displaywhenempty=""
valuewhenempty=-1
displaywhennotempty="-select-"
valuewhennotempty=0
function change(currentbox) {
numb = currentbox.id.split("_");
currentbox = numb[1];
i=parseInt(currentbox)+1
// I empty all combo boxes following the current one
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
son = document.getElementById("combo_"+i);
// I empty all options except the first one (it isn't allowed)
for (m=son.options.length-1;m>0;m--) son.options[m]=null;
// I reset the first option
son.options[0]=new Option(displaywhenempty,valuewhenempty)
i=i+1
}
// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill
stringa='data'
i=0
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
if (i==currentbox) break;
i=i+1
}
// filling the "son" combo (if exists)
following=parseInt(currentbox)+1
if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
(document.getElementById("combo_"+following)!=null)) {
son = document.getElementById("combo_"+following);
stringa=stringa+"_"
i=0
while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {
// if there are no options, I empty the first option of the "son" combo
// otherwise I put "-select-" in it
if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
if (eval("typeof("+stringa+"1)=='undefined'"))
eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
else
eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
else
eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
i=i+1
}
//son.focus()
i=1
combostatus=''
cstatus=stringa.split("_")
while (cstatus[i]!=null) {
combostatus=combostatus+cstatus[i]
i=i+1
}
return combostatus;
}
}
//-->
</script>
<form>
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
<option value="value1">-select-</option>
<option value="value2">1</option>
<option value="value3">2</option>
</select>
<BR><BR>
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
<option value="value1"> </option>
</select>
<BR><BR>
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
<option value="value1"> </option>
</select>
<BR><BR>
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
<option value="value1"> </option>
</select>
</form>
<p align="center">This free script provided by<br />
<a href="http://javascriptkit.com">JavaScript
Kit</a></p>
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 Ok I am very very new to java to the point where I only know how to use pre-made javascripts in my php code so be gentle. First, here is part of a form I have: Code: <select name = "pulmonologist" >
<option selected="" value="">---Select---
<option value="none">None</option>
<?php
while ($row2 = mysql_fetch_assoc ($results2)) {
?><option value = "<?php echo $row2['staff_name'];?>"><?php echo $row2['staff_name'];?></option>
<?php }
?>
</select>
Ok now I want to echo the value that the user selects on the SAME page (i.e. before the submit button is pressed) (so I can't do it with php, I need javascript) like this: Code: <input type="submit" value = "Contact <?php echo $pulmonologist;?>" /> Can you tell me how to do this? Thanks! form is .asp scenario: I have 3 radio buttons above number of boxes (dropdown). I want the dropdown selection box greyed out on selecting Electronic (radio button) Physical (radio button) Image (radio button) Electronic (radio button) Number of Boxes [dropdown box] Thanks for your help I am new to coding. 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! Dear all, background information: I did code a timesheet management system for my company with PHP where the user has to submit time entries and has an online form with several start and end times. The start and end times are all simple HTML select option dropdowns. I want that the first End time selection will be the next start time selection. Basically a simple dependency of the dropdown. My approach was that I want to solve this with JavaScript. In my php code I am echoing the following (in this select the end times are the values): echo "<select class='normal' name='$field_id' onChange=set_time_hour(this.value,'$field_id_js')>"; When the user changes then the end time dropdown the next field (next start time entry) should be changed accordingly. The javascript looks like this function set_time_hour(hour_value,next_field){ alert (hour_value); alert (next_field); document.getElementById(next_field).value = hour_value; } The alert calls are giving me the right values. but the document.getElementById(next_field).value = hour_value; is not working. What is wrong there? Do you have an idea? How can I change the value of a select box with Javascript? The select box values are already popoluated with PHP so I just want to select the right value. How can I hide/disable the submit button if the name Todd is selected? Code: <html> <head> </head> <body> <form name="people"> <select name="group"> <option value="Pick Your Name">Choose</option> <option value="Tom">Tom</option> <option value="Freddy">Freddy</option> <option value="Todd">Todd</option> <option value="Fred">Fred</option> <option value="William">William</option> <option value="Johnson">Johnson</option> </select> <INPUT TYPE=submit VALUE="submit"> </form> </body> </html> Codes for Dropdown menu based on radio buttons selection needed!? I need urgent help with this: I need codes for a dropdown menu that is altered by radio buttons. I want to insert the value selected from the dropdown menu into a table. I am very inexperienced with javasciprt. I am designing a form in coldfusion, and want some dynamic action to take place. My users will be offered 2 selections via radio buttons. Depending on which radio button they select, they will get a few more radio buttons to choose from. I have been told that this can be handled in javascript. So I am appealing to the javascript programmer nation for some assistance in this endeavor. Any help would be greatly appreciated, Thanks. Hi, I have a page with a drop down and there are external js file that are included in the page which define handlers and other actions for onchange of this drop down. So if the selection in the drop down changes, we display a different color map (based on the selection). Now I have to pre-select an option on a specific page (which has been completed) and the drop down shows the correct selection, but the event is not fired (that changes the map color). Any idea what I need to do? Thanks Hey all, I was just wondering if you could help me out with the following, I've done a bit of google searching but haven't come up with anything. Basically, there will be 3 drop down boxes (Option a, Option b, Option c) In each drop down box there will be 3 options (One, Two, Three) Whats a script I can use that will write on page :Yellow If they select: Option a - One Option b - One Option c - Three Of the script will write blue if they selection Option a - Two Option b - One Option c - One hello, i am more a designer than a developer so i need your help. i want to create a form containing : 1. drop down list of countries (that i managed to create) 2. action on selection (redirect to a link on country selection) 3. post the selected option into a text box below and remeber (if possible) The remeber part is optional . I want a form where user will select country , based on the selection to be redirected to a link and message display , you selected : [textarea]Option[/textarea] can it be done? How can I open a selection from this drop down list in a new window? Code:
<html>
<!-- Stop Underline script available from http://www.themssforum.com/FontpageProgramming/Hyperlink-underline/ -->
<style type="text/css">
a { text-decoration: none;color: #003366; } /*makes the underline disappear for
all links*/
a:visited { color: #003366; }
a:hover { color: red; text-decoration: underline; } /*underlines links
when hovered over */
a:active { color: #003366; }
</style>
<head>
<TITLE>Travel</TITLE>
<META name="description" content="Premier online guide to leisurely travel">
<META name="keywords" content="English Lake District">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<SCRIPT LANGUAGE="JavaScript">
<!--
v=false;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
if (typeof(Option)+"" != "undefined") v=true;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: webreference.com -->
<!-- Web Site: http://webreference.com -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
if(v){a=new Array();aln=0;}
function getFormNum (formName) {
formNum =-1;
for (i=0;i<document.forms.length;i++){
tempForm = document.forms[i];
if (formName == tempForm) {
formNum = i;
correctForm = tempForm;
break;
}
}
return formNum;
}
function jmp(formName,elementNum) {
getFormNum(formName);
if (formNum>=0) {
with (document.forms[formNum].elements[elementNum]) {
i=selectedIndex;
if (i>=0) location=options[i].value;
}
}
}
function O(txt,url) {
a[k]=new Option(txt,url);k++;
}
function relate(formName,elementNum,j) {
if(v) {
k=1;
if(j==0) { // default category item
a=new Array();
O(">","");
}
<!-- Alston -->
if(j==1) { // 1st category items
a=new Array();
O("Local Directory : ->","");
O("South Tynedale Railway","http://www.lakesandcumbria.com/view/travel/index.htm#South Tynedale Railway");
}
<!-- Ambleside -->
if(j==2) { // 2nd category items
a=new Array();
O("Local Directory : ->","");
O("Lakeland Safari Tours","http://www.lakesandcumbria.com/view/travel/p2.htm#Lakeland Safari Tours");
}
<!-- Bowness-on-Windermere -->
if(j==3) { // 3rd category items
a=new Array();
O("Local Directory : ->","");
O("Adaptours","http://www.lakesandcumbria.com/view/travel/p2.htm#Adaptours");
O("Windermere Lake Cruises","http://www.lakesandcumbria.com/view/travel/index.htm#Windermere Lake Cruises");
}
<!-- Carlisle -->
if(j==4) { // 4th category items
a=new Array();
O("Local Directory : ->","");
O("Settle-Carlisle Railway","http://www.lakesandcumbria.com/view/travel/index.htm#Settle-Carlisle Railway");
}
<!-- Coniston -->
if(j==5) { // 5th category items
a=new Array();
O("Local Directory : ->","");
O("Coniston Launch","http://www.lakesandcumbria.com/view/travel/index.htm#Coniston Launch");
O("Steam Yacht Gondola","http://www.lakesandcumbria.com/view/travel/index.htm#Steam Yacht Gondola");
}
<!-- Glenridding -->
if(j==6) { // 6th category items
a=new Array();
O("Local Directory : ->","");
O("Ullswater Steamers","http://www.lakesandcumbria.com/view/travel/index.htm#Ullswater Steamers");
}
<!-- Keswick -->
if(j==7) { // 7th category items
a=new Array();
O("Local Directory : ->","");
O("Keswick launch","http://www.lakesandcumbria.com/view/travel/index.htm#Keswick Launch");
O("Landscape Minibus Tours","http://www.lakesandcumbria.com/view/travel/p2.htm#Landscape Minibus Tours");
}
<!-- Lakeside -->
if(j==8) { // 8th category items
a=new Array();
O("Local Directory : ->","");
O("Lakeside & Haverthwaite Railway","http://www.lakesandcumbria.com/view/travel/index.htm#Lakeside & Haverthwaite Railway");
}
<!-- Penrith -->
if(j==9) { // 9th category items
a=new Array();
O("Local Directory : ->","");
O("Cumbrian Discoveries","http://www.lakesandcumbria.com/view/travel/index.htm#Cumbrian Discoveries");
}
<!-- Ravenglass -->
if(j==10) { // 10th category items
a=new Array();
O("Local Directory : ->","");
O("Ravenglass & Eskdale Railway","http://www.lakesandcumbria.com/view/travel/index.htm#Ravenglass & Eskdale Railway");
}
<!-- Windermere -->
if(j==11) { // 11th category items
a=new Array();
O("Local Directory : ->","");
O("Alistairs of Windermere","http://www.lakesandcumbria.com/view/travel/p2.htm#Alistairs of Windermere");
O("Lakes Supertours","http://www.lakesandcumbria.com/view/travel/p2.htm#Lakes Supertours");
O("Mountain Goat","http://www.lakesandcumbria.com/view/travel/p2.htm#Mountain Goat");
O("Park Tours and Travel","http://www.lakesandcumbria.com/view/travel/p2.htm#Park Tours and Travel");
}
aln2=a.length;
getFormNum(formName);
if (formNum>=0) {
formNum = formNum + 1;
with (document.forms[formNum].elements[elementNum]) {
for (var i=options.length-1;i>0;i--) options[i]=null;
for (var i=1;i<aln2;i++) options[i-1]=a[i];
options[0].selected=true;
}
}
} else {
jmp(formName,elementNum);
}
}
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
// End -->
</SCRIPT>
<meta name="Microsoft Border" content="none">
</head>
<body link="#003366" onload="FP_preloadImgs(/*url*/'file:///C:/Documents%20and%20Settings/Mike/My%20Documents/MAI/My%20Webs/L%26C_COM/navigation/utils/about/about_h.jpg', /*url*/'file:///C:/Documents%20and%20Settings/Mike/My%20Documents/MAI/My%20Webs/L%26C_COM/navigation/utils/a-z/a-z_h.jpg', /*url*/'file:///C:/Documents%20and%20Settings/Mike/My%20Documents/MAI/My%20Webs/L%26C_COM/navigation/utils/join/join_h.jpg', /*url*/'file:///C:/Documents%20and%20Settings/Mike/My%20Documents/MAI/My%20Webs/L%26C_COM/navigation/utils/privacy/privacy_h.jpg', /*url*/'file:///C:/Documents%20and%20Settings/Mike/My%20Documents/MAI/My%20Webs/L%26C_COM/navigation/utils/terms/terms_h.jpg', /*url*/'navigation/utils/contact/contact_h.jpg', /*url*/'navigation/utils/copyright/copyright_h.jpg', /*url*/'navigation/utils/sitemap/sitemap_h.jpg', /*url*/'navigation/utils/suggest/suggest_h.jpg')">
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="975">
<tr>
<td width="25%" align="center" rowspan="2" valign="top">
</td>
<td height="25">
<p align="center"><font face="Comic Sans MS" color="#FF0000"><b>TRAVEL</b></font>
</td>
<td width="25%" align="center" rowspan="2" valign="top">
<p> </p>
<p> </p>
<p> </td>
</tr>
<tr>
</center>
<td valign="top" align="center">
<table border=0 cellspacing="0" cellpadding="0">
<tr valign=top>
<TD align=center bgcolor="#FFFFFF"><form name=f1 method=post action="" onSubmit="return false;">
<select name=m1 onChange="relate(this.form,0,this.selectedIndex); document.f2.m2.focus();" style="background-color: #FFE0C1" size="1">
<option value="/">Location...
<option value="/">Alston,
<option value="/">Ambleside,
<option value="/">Bowness-on-Windermere,
<option value="/">Carlisle,
<option value="/">Coniston,
<option value="/">Glenridding,
<option value="/">Keswick,
<option value="/">Lakeside,
<option value="/">Penrith,
<option value="/">Ravenglass,
<option value="/">Windermere,
</select><br>
<br>
<br>
</form></td>
<td align=center valign="top"> </td>
<td bgcolor="#FFFFFF" valign="top"><form name=f2 method=post action="" onsubmit="return false;">
<select name="m2" onchange="jmp(this.form,0)" style="background-color: #FFE0C1" size="1">
<option value="/">>
<option value="/">
</select></form></td>
</tr>
</table>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="50%" valign="top" align="center">
</td>
<td width="50%" valign="top" align="center">
</td>
</tr>
</center>
</table>
</div>
</td>
</tr>
</table>
</div>
<p></p>
</body>
</html>
Hi all.This is part of my code which I am using to edit the record from database.Initially the input boxes show the values from database and if any one of the value is changed, I want to reflect the change according to the changes made in the fields.The code works fine but if I change values in qty,rate or amount, the other values are not changing.Can experts over here tell me why?Here is my code: Code:
<html>
<head>
<script type="text/javascript">
function tot() {
var d=document.getElementById("total").value;
var st=Number(d);
var e=document.getElementById("vat_amt").value;
var tx=Number(e);
var f=document.getElementById("cash_discount").value;
var ad=Number(f);
var g=document.getElementById("vat").value;
var vat=Number(g);
var h=(st+tx)-ad;
document.getElementById("amount").value = Math.ceil(h);
var z=vat+100;
var y=(st*100)/z;
var i=st-y;
var result=Math.round(i*100)/100; //returns 28.45
document.getElementById("vat_amt").value =result;
}
var total = 0;
function getValues() {
var qty = 0;
var rate = 0;
var obj = document.getElementsByTagName("input");
for(var i=0; i<obj.length; i++){
if(obj[i].name == "qty[]"){var qty = obj[i].value;}
if(obj[i].name == "rate[]"){var rate = obj[i].value;}
if(obj[i].name == "amt[]"){
if(qty > 0 && rate > 0){obj[i].value = qty*rate;total+=(obj[i].value*1);}
else{obj[i].value = 0;total+=(obj[i].value*1);}
}
}
document.getElementById("total").value = total*1;
total=0;
}
</script>
</head>
<body>
<table width="23%" cellpadding="0" cellspacing="0" class="normal-text" border="0" style="margin-top:0px; padding-top:0px; margin-bottom:0px; padding-bottom:0px;">
<tr>
<td>Qty</td>
<td>Rate</td>
<td>Amount</td>
</tr>
<tr>
<td class="forhead"><input type="text" name="qty[]" onkeyup="getValues()" style="width:120px;" value="<?PHP echo "$row3[qty]" ?>" class="text medium"></td>
<td class="forhead"><input type="text" name="rate[]" onKeyUp="getValues()" style="width:120px;" value="<?PHP echo "$row3[rate]" ?>" class="text medium"></td>
<td class="forhead"><input type="text" name="amt[]" style="width:120px;"
onKeyUp="getValues()" class="text medium" value="<?PHP echo "$row3[amt]" ?>"></td>
</tr>
<tr>
<td class="dt" colspan="2">Sub Total:</td>
<td class="forhead"><input type="text" id="total" name="total" style="width:120px;" value="<?PHP echo "$row[total]" ?>" class="text medium"></td>
</tr>
<tr>
<td class="dt" colspan="2">Vat:</td>
<td class="forhead"><?PHP
$query5=mysql_query("SELECT * FROM vat");
echo "<select name='vat' id='vat' style='width:120px; border: 1px solid #BFBFBF;' onChange='tot()'>";
echo "<option value='0'>
Select</option>";
while($row5=mysql_fetch_array($query5))
{?>
<option value= <?PHP echo $row5[vat]; ?> <?PHP echo($row5[vat]==$row[vat])?'selected':''?>> <?PHP echo $row5[vat]; ?> </option>
<?PHP }
echo "</select>";
?></td>
</tr>
<tr>
<td class="dt" colspan="2">Vat Amt :</td>
<td class="forhead"><input type="text" id="vat_amt" name="vat_amt" style="width:120px;" value="<?PHP echo "$row[vat_amt]" ?>" class="text medium" onKeyUp="tot()"></td>
</tr>
<tr>
<td class="dt" colspan="2">Cash Discount :</td>
<td class="forhead"><input type="text" id="cash_discount" name="cash_discount" style="width:120px;" value="<?PHP echo "$row[cash_discount]" ?>" class="text medium" onKeyUp="tot()"></td>
</tr>
<tr>
<td class="dt" colspan="2">Total :</td>
<td class="forhead"><input type="text" name="amount" id="amount" style="width:120px;" class="text medium" onKeyUp="tot()" value="<?PHP echo "$row[amount]" ?>"></td>
</tr>
</table>
</body>
</html>
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. 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 |
|||||||