|
JavaScript - User Selects From Dropdown Box, Then Store Separate Value In A Hidden Textbox
I have a form where users will be making a selection in a drop down box. I need, essentially, to store two values: the first value is the actual value assigned with each drop down item (their label, basically), and the second value being a completely separate value that will change based on what they chose from the drop down box to begin with.
Example: Drop down box contains selections A, B, C, D. User selects A, I need to keep the original dropdown box's A value in tact for the dropdown box's value, and then store a 1 in a hidden textbox. User selects B, a 2 is stored, etc. Both of these values will be e-mailed, hence the reason I chose a hidden textbox to store the second value. Additionally, I don't want the user to see the second value on the form itself. If there's a better way to accomplish this, please let me know. Similar TutorialsHello, I have this search box form with 2 select boxes : Code: <form action="search.php" method="get"> <select name="RingType"> <option value="Nose">Nose</option> <option value="Toe">Toe</option> <option value="Belly">Belly</option> </select> <select name="NecklaceType"> <option value="gold">Gold</option> <option value="diamond">diamond</option> <option value="pearl">pearl</option> </select> <input type="text" size="60" name="keywords" /> <input class="submit" type="submit" value="Search" /> </form> For example, when a visitor selects "Belly" RingType, I want "Belly Ring" to appear in the search box. and when the visitor selects "pearl" NecklaceType, I want "pearl necklace" to appear in the search box. if the visitor first selects "Belly" RingType, and then selects "pearl" NecklaceType, I want "Belly Ring pearl necklace" to appear in the search box. After making his selections in the search box, if he types something in the search box, it should add to what is already there in the search box. Or, if he first types something in the search box for example, "jewelry" and then selects "pearl" in the necklacetype select box, the search box should show : "jewelry pearl necklace" Can you please show how to do this ? Thanks a lot. Hi, I am trying to write a small javascript program where I can call the following two functions and store information which a user enters. The problem is if I call the function a second time to add more information the array gets overwritten. info () insert (name, surname, favouriteColour) function info () { name = prompt ("Please enter your name."); surname = prompt ("Please enter your surname."); favouriteColour = prompt ("Please enter your favourite colour."); } function insert (name, surname, favouriteColour) { var info = new Array (); info.name = name; info.surname = surname; info.favouriteColour = favouriteColour; return info }; Help is really appreciated.. Hey everyone - I am having some trouble with creating cookies and getting them to work for an onclick event. What I am trying to do is create a button to store cookies containing all user information with an alert message and set the expiration date one day after the visit. (This is just a project I am working on to help me understand how to create cookies.) Below is the cookies code I came up with but it doesn't seem to be functioning at all. Any help would be greatly appreciated. Thanks Code: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Brooks Rogalski
December 6, 2010 -->
<title>ABC Outdoor Sports</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />
<script type = "text/javascript">
/* <![CDATA[ */
//cookie button function
function cookieForm() {
var equipment = document.forms[0].equipment.value;
var pDate = document.forms[0].pickupDate.value;
var pHour = document.forms[0].pickupHours.value;
var pMin = document.forms[0].pickupMinutes.value;
var rDate = document.forms[0].returnDate.value;
var rHour = document.forms[0].returnHours.value;
var rMin = document.forms[0].returnMinutes.value;
var first = document.forms[0].firstName.value;
var last = document.forms[0].lastName.value;
var street = document.forms[0].street.value;
var city = document.forms[0].city.value;
var zip = document.forms[0].zip.value;
var DoBYear = document.forms[0].date.value;
var myDate = new Date();
myDate.setDay(myDate.getDay() +1) ;
document.cookie = "equipment" + encodeURIComponent(equipment) + "; expires=" + mydate.toUTCString();
document.cookie = "pDate" + encodeURIComponent(pDate) + "; expires=" + mydate.toUTCString();
document.cookie = "pHour" + encodeURIComponent(pHour) + "; expires=" + mydate.toUTCString();
document.cookie = "pMin" + encodeURIComponent(pMin) + "; expires=" + mydate.toUTCString();
document.cookie = "rDate" + encodeURIComponent(rDate) + "; expires=" + mydate.toUTCString();
document.cookie = "rHour" + encodeURIComponent(rHour) + "; expires=" + mydate.toUTCString();
document.cookie = "rMin" + encodeURIComponent(rMin) + "; expires=" + mydate.toUTCString();
document.cookie = "first" + encodeURIComponent(first) + "; expires=" + mydate.toUTCString();
document.cookie = "last" + encodeURIComponent(last) + "; expires=" + mydate.toUTCString();
document.cookie = "street" + encodeURIComponent(street) + "; expires=" + mydate.toUTCString();
document.cookie = "city" + encodeURIComponent(city) + "; expires=" + mydate.toUTCString();
document.cookie = "zip" + encodeURIComponent(zip) + "; expires=" + mydate.toUTCString();
document.cookie = "DoBYear" + encodeURIComponent(DoBYear) + "; expires=" + mydate.toUTCString();
/* ]] */
</script>
</head>
<body onload = "rotateImage('rImage')">
<h1> ABC Outdoor Sports Equipment </h1>
<img src="fishing.jpg" id="rImage" width="250" height="200" onmouseover = "pause=true;" onmouseout = "pause=false;">
<br/>
<br/>
<form onsubmit = "return validateForm();" action = "mailto:rogalskibf@gmail.com?subject=ABC Customer Reservation" method="post" enctype="text/plain">
<table border = "0">
<tr>
<td>
Equipment:<br/>
<select name = "equipment">
<option value="unselected">Select Equipment Type</option>
<option value = 20>Fishing Boat</option>
<option value = 15>Kayak</option>
<option value = 2>Mountain Bike</option>
<option value = 10>Scuba Gear</option>
</select>
</td>
</tr>
<tr>
<td>
Pick-up Date: <br/>
<input type = "text" name = "pickupDate" value = "(mm/dd/yyyy)"/>
</td>
<td>
Pick-up Time: <br/>
<select name = "pickupHours">
<option value="unselected">hr</option>
<option value = 7>07</option>
<option value = 8>08</option>
<option value = 9>09</option>
<option value = 10>10</option>
<option value = 11>11</option>
<option value = 12>12</option>
<option value = 13>13</option>
<option value = 14>14</option>
<option value = 15>15</option>
<option value = 16>16</option>
<option value = 17>17</option>
</select>
<select name = "pickupMinutes">
<option value="unselected">min</option>
<option value = 0>00</option>
<option value = .5>30</option>
</select>
</td>
</tr>
<tr>
<td>
Return Date: <br/>
<input type = "text" name = "returnDate" value = "(mm/dd/yyyy)"/>
</td>
<td>
Return Time: <br/>
<select name = "returnHours">
<option value="unselected">hr</option>
<option value = 7>07</option>
<option value = 8>08</option>
<option value = 9>09</option>
<option value = 10>10</option>
<option value = 11>11</option>
<option value = 12>12</option>
<option value = 13>13</option>
<option value = 14>14</option>
<option value = 15>15</option>
<option value = 16>16</option>
<option value = 17>17</option>
</select>
<select name = "returnMinutes">
<option value="unselected">min</option>
<option value = 0>00</option>
<option value = .5>30</option>
</select>
</td>
</tr>
<tr>
<td>
First Name: <br/>
<input type = "text" name = "firstName"/>
</td>
<td>
Last Name: <br/>
<input type = "text" name = "lastName"/>
</td>
</tr>
<tr>
<td>
Street: <br/>
<input type = "text" name = "street"/>
</td>
<td>
City: <br/>
<input type = "text" name = "city"/>
</td>
<td>
Zip:<br/>
<input type = "text" name = "zip" maxlength = "5"/>
</td>
</tr>
<tr>
<td>
Date of Birth: <br/>
<input type = "text" name = "date" value = "(mm/dd/yyyy)"/>
</td>
</tr>
<tr>
<td colspan = "3" align = "center">
<input type = "submit" name = "submit" value = "Submit Reservation"/>
<input type = "button" name = "cookies" value = "Store User Information"/>
</td>
</tr>
</table>
</form>
</body>
</html>
I have two select lists. Morning Code: <tr valign="top">
<td align="right">Morning:</td>
<td><select name="wcsave_09_msession" id="wcsave_09_msession" size="1" onblur="CheckField(this.form,this,'');" onchange="display1(this,'Mastery sesson 1','Concurrent sessons 1-6');">
<option value="" selected="selected">Choose one</option>
<option value="Mastery sesson 1">Mastery sesson #1</option>
<option value="Concurrent sessons 1-6">Concurrent sessons #1-#6</option>
</select>
</td>
</tr>
Afternoon: Code: <tr valign="top">
<td align="right">Afternoon:</td>
<td><select name="wcsave_09_asession" id="wcsave_09_asession" size="1" onblur="CheckField(this.form,this,'');" onchange="display2(this,'Mastery sesson 2','Concurrent sessons 7-12');"><!--showDiv(this.value)-->
<option value="" selected="selected">Choose one</option>
<option value="Mastery sesson 2">Mastery sesson #2</option>
<option value="Concurrent sessons 7-12">Concurrent sessons #7-#12</option>
</select>
</td>
</tr>
In each list depending on what option is chosen, a corresponding div will show with select lists. Morning div: Code: <div id="Mastery sesson 1" style="display: none;">
<table class="special">
<tr valign="top">
<td>(9:15 a.m. - 10:15 a.m.)<br /><select name="wcsave_10_session_mmastery" id="wcsave_10_session_mmastery">
<option value="" selected="selected">Choose one</option>
<option value="Mastery session #1 - Computer Lab: Searching Essentials"><strong>Mastery session #1</strong> - Computer Lab: Searching Essentials</option>
</select>
</td>
</tr>
</table>
</div>
<div id="Concurrent sessons 1-6" style="display: none;">
<table class="special">
<tr valign="top">
<td>Choose a session for each time slot.<br />
(9:15 a.m. - 10:15 a.m.)<br /><select name="wcsave_10_session_mconc1" id="wcsave_10_session_mconc1" onchange="toggleSelect();">
<option value="" selected="selected">Choose one</option>
<option value="Concurrent session #1 - IRB 101 for Research Nurses">Concurrent session #1 - IRB 101 for Research Nurses</option>
<option value="Concurrent session #2 - A Research Poster Contest as a Tool to Learn About Research/EBP">Concurrent session #2 - A Research Poster Contest as a Tool to Learn About Research/EBP</option>
<option value="Concurrent session #3 - Beginning the EBP Journey: Evaluating and Synthesizing the Literature">Concurrent session #3 - Beginning the EBP Journey: Evaluating and Synthesizing the Literature</option>
</select>
</td>
</tr>
<tr valign="top">
<td>(10:30 a.m. - 11:30 a.m.)<br /><select name="wcsave_10_session_mconc2" id="wcsave_10_session_mconc2" onchange="toggleSelect();">
<option value="" selected="selected">Choose one</option>
<option value="Concurrent session #4 - IRB 101 for Research Nurses">Concurrent session #4 - Making Sense of Statistics When Reading Research</option>
<option value="Concurrent session #5 - Original Research Presentations">Concurrent session #5 - <em>Original Research Presentations</em></option>
<option value="Concurrent session #6 - IRB Considerations with Vulnerable Populations">Concurrent session #6 - IRB Considerations with Vulnerable Populations</option>
</select>
</td>
</tr>
</table>
</div>
Afternoon div: Code: <div id="Mastery sesson 2" style="display: none;">
<table class="special">
<tr valign="top">
<td>(1:45 p.m. - 4:00 p.m.)<br /><select name="wcsave_10_session_mmastery" id="wcsave_10_session_mmastery">
<option value="" selected="selected">Choose one</option>
<option value="Mastery session #2 - Beyond the Basics of Searching!"><strong>Mastery session #2</strong> - Beyond the Basics of Searching!</option>
</select>
</td>
</tr>
</table>
</div>
<div id="Concurrent sessons 7-12" class="hiddenDiv">
<table class="special">
<tr valign="top">
<td>Choose a session for each time slot.<br />
(1:45 p.m. - 4:00 p.m.)<br /><select name="wcsave_10_session_aconc1" id="wcsave_10_session_aconc1" onchange="toggleSelect();">
<option value="" selected="selected">Choose one</option>
<option value="" selected="selected">Choose one</option>
<option value="Concurrent session #7 - EBP Protocols">Concurrent session #7 - EBP Protocols</option>
<option value="Concurrent session #8 - Writing for Publication">Concurrent session #8 - Writing for Publication</option>
<option value="Concurrent session #9 - Original Research Presentations">Concurrent session #9 - Original Research Presentations</option>
</select>
</td>
</tr>
<tr valign="top">
<td>(3:00 p.m. - 4:00 p.m.)<br /><select name="wcsave_10_session_aconc2" id="wcsave_10_session_aconc2" onchange="toggleSelect();">
<option value="" selected="selected">Choose one</option>
<option value="Concurrent session #10 - Writing a Research Question Using PICO">Concurrent session #10 - Writing a Research Question Using PICO</option>
<option value="Concurrent session #11 - EBP Project Presentations">Concurrent session #11 - EBP Project Presentations</option>
<option value="Concurrent session #12 - The Role of the Research Facilitator">Concurrent session #12 - The Role of the Research Facilitators</option>
</select>
</td>
</tr>
</table>
</div>
Once two options are chosen in the divs, the Afternoon or Morning becomes disabled. Code: function toggleSelect() {
var selBox0 = document.getElementById('wcsave_10_session_mconc1');
var selBox1 = document.getElementById('wcsave_10_session_mconc2');
var selBox2 = document.getElementById('wcsave_09_msession');
var selBox3 = document.getElementById('wcsave_10_session_aconc1');
var selBox4 = document.getElementById('wcsave_10_session_aconc2');
var selBox5 = document.getElementById('wcsave_09_asession');
if ((selBox0.selectedIndex !=0) && (selBox1.selectedIndex !=0)) {selBox5.disabled = true;} else {selBox5.disabled = false;}
if ((selBox3.selectedIndex !=0) && (selBox4.selectedIndex !=0)) {selBox2.disabled = true;} else {selBox2.disabled = false;}
}
Here is the code to show/hide the divs: Code: function display1(obj,id1,id2) {
var selBox0 = document.getElementById('wcsave_10_session_mconc1');
var selBox1 = document.getElementById('wcsave_10_session_mconc2');
var selBox2 = document.getElementById('wcsave_09_msession');
var selBox3 = document.getElementById('wcsave_10_session_aconc1');
var selBox4 = document.getElementById('wcsave_10_session_aconc2');
var selBox5 = document.getElementById('wcsave_09_asession');
var txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
if ( txt.match(id1) ) {document.getElementById(id1).style.display = 'block';}
if ( txt.match(id2) ) {document.getElementById(id2).style.display = 'block';}
}
function display2(obj,id1,id2) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
if ( txt.match(id1) ) {document.getElementById(id1).style.display = 'block';}
if ( txt.match(id2) ) {document.getElementById(id2).style.display = 'block';}
}
What I want to do is set the sub div dropdown selectedIndex == 0 when Morning or Afternoon is set to Choose one. In essence clearing the values when the div is hidden so the other fields are no longer disabled. Any ideas? Hi I have a form with some input tags, and when the user submit the form I which if a new hidden tag get submitted with the value the user did tip. I am thinking for doing that but not sure if it is the right thing : Code: <form method="POST"
<input type="text" name="{actionForm.Name}" id="username">
<input type="password" name="{actionForm.Passwd}" id="password">
<input type="hidden" name="usernameh" value="document.getElementById('username')">
<input type="hidden" name="passwordh" value="document.getElementById('password')">
</form>
Is it alright ? I mean when the user enter the username and password, the hidden tags should contain those two values that the user has made. I have a long list consisting of a name and associated number, like this: SITE01 2111 SITE02 4567 SITE03 5555 and so on. I would like to put two dropdown boxes where the user can select either the name or the number. Then based upon the users selection have both the name and number appear. I'm thinking of putting all the data in an array and using the dropdowns to query the array. That sounds good but I'm new to javascript and a detailed example of how to do this would be needed, if its even the right approach to take to accomplish this. 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 On various video sites you can click cinema mode and the page goes dark, whilst you watch the video. On my page I have a box which appears, where the user enters their name and email address. But I would like the box to remain active and in view. While the rest of the page goes darker and unusable, Like on the video player websites How do I do this? Hi.. I have form and i want to input data using barcode and it will display on textbox and after input on the first textbox the focus will go to next textbox untill it will go on the last textbox and on the last textbox it will automatically save the data's on the database. How is it possible? here is my sample code: Code: <?php
error_reporting(0);
date_default_timezone_set("Asia/Singapore"); //set the time zone
$con = mysql_connect('localhost', 'root','');
if (!$con) {
echo 'failed';
die();
}
mysql_select_db("mes", $con);
?>
<html>
<head>
<script type="text/javascript">
function ini()
{
// Retrieve the code
var code =document.getElementById ("code_read_box1").value;
var code =document.getElementById ("code_read_box2").value;
var code =document.getElementById ("code_read_box3").value;
var code =document.getElementById ("code_read_box4").value;
var code =document.getElementById ("code_read_box5").value;
var code =document.getElementById ("code_read_box6").value;
// Return false to prevent the form to submit
return false;
}
</script>
</head>
<body onLoad="document.barcode.code_read_box1.focus()">
<form name=barcode onsubmit = "return ini()">
<input type="text" id="code_read_box1" value="" /><br/>
<input type="text" id="code_read_box2" value="" /><br/>
<input type="text" id="code_read_box3" value="" /><br/>
<input type="text" id="code_read_box4" value="" /><br/>
<input type="text" id="code_read_box5" value="" /><br/>
<input type="text" id="code_read_box6" value="" /><br/>
</form>
</body>
</html>
Hello. I've been teaching myself HTML and CSS for a while, and now I've moved into the world of Javascript (but I'm still very much a beginner). For practice, I've been building a sample sign up form for a mock website, and I'm having problems with the birthdate section. The idea I had was to have MM, DD, and YYYY be the default values of my 3 textboxes (as an example for users), then set the value to nothing when the box gained focus. That all works fine, but I ran into problems when I tried to write an if statement to set the value back to MM, DD, or YYYY if the value was still nothing when the user clicked away. As it is now it just replaces the text inputted into the textbox (which of course is not good). Any ideas for what the problem might be? Code: <form name="signup" action="javascript:void(0);" method="post">
<table>
<tr>
<td>Date Of Birth:</td>
<td>
<input name="DOBmonth" type="text" value="MM" size="2" style="color: #555555;" onFocus="clearDOBmonth()" onBlur="restoreDOBmonth()" />
<input name="DOBday" type="text" value="DD" size="2" style="color: #555555;" onFocus="clearDOBday()" />
<input name="DOByear" type="text" value="YYYY" size="4" style="color: #555555;" onFocus="clearDOByear()" /></td>
</tr>
<tr>
<td></td>
<td><button name="Submit" type="submit" style="font-size: 1em;">Sign Up</button></td>
</tr>
</table>
</form>
<script type="text/javascript" language="javascript">
<!--
document.signup.DOBmonth.value="MM";
document.signup.DOBday.value="DD";
document.signup.DOByear.value="YYYY";
function clearDOBmonth() { document.signup.DOBmonth.value="";}
function clearDOBday() { document.signup.DOBday.value="";}
function clearDOByear() { document.signup.DOByear.value="";}
function restoreDOBmonth()
{
if ('document.signup.DOBmonth.value = ""')
{
document.signup.DOBmonth.value = "MM";
// alert(document.signup.DOBmonth.value);
}
}
//-->
</script>
Another side question, if I set a variable equal to the value of a textbox, then change the value of the variable, does that also change the value of the textbox? or is the variable no longer associated with the textbox. Example: Code: var a = document.form.textbox.value; a = blue; does document.form.textbox.value = blue? or is var a now completely independent of the textbox value? Thanks! Hi there, I am new to Java Script but had to delve into it to create the options for a form I wish to create. I downloaded chainedseletmenu from the following; http://www.dynamicdrive.com/dynamici...menu/index.htm I have the script working, so that you select a first option and a new box appears, then you select the next option and an aditional box appears and so on... This is fine, but I wish to only make additional selection boxes appear if certain options from the drop down lists are selected, but not for others. Also, I wish for users of my forms to be able to add options that are not yet available, I will give an example, lets say cars; if a user selects a make from the list, eg "Honda", a drop down selection list apears, the user then has the option to choose the "Type" of Honda, eg "Prelude", "Civic", "NSR" etc. I would like to be able to add an additional here; = "Not listed". When the "Not listed" is clicked, I would like to give my users the choice to enter the type (in this example, it could be "CRX") into an auto-appearing text box, after form submission, this could then be added the existing selection list for future users. I am aware that this requires use of a database and conection to tit, but for a start, can anyone guide me in the right direction, or does anyone have examples of such code that I can study and get an idea of what to do? This is for a non-profit educational site that I am trying to create for my learners! So would apprieciate any help I can get! Kind regards, Luke Hi all, im looking for some help with some javascript if thats ok. I am building a system for creating a booklet. I want the user to be able to select the quantity of booklets they require. (eg 50, 75, 100, 125) Then also select the number of pages each booklet will require. (eg. 4, 8, 12) both will be select drop down boxes. I would like the price to be calculated based on the selections and displayed on the page. It will be total price not price per booklet. This is how i have built up the prices in php. if($b_maxpages == '4' && $b_quantity == '50') { $amount = "95.00"; } elseif($b_maxpages == '4' && $b_quantity == '75') { $amount = "103.00"; } elseif($b_maxpages == '4' && $b_quantity == '100') { $amount = "115.00"; } elseif($b_maxpages == '4' && $b_quantity == '125') { $amount = "132.00"; } elseif($b_maxpages == '8' && $b_quantity == '50') { $amount = "147.00"; } elseif($b_maxpages == '8' && $b_quantity == '75') { $amount = "171.00"; } elseif($b_maxpages == '8' && $b_quantity == '100') { $amount = "194.00"; } elseif($b_maxpages == '8' && $b_quantity == '125') { $amount = "218.00"; } elseif($b_maxpages == '12' && $b_quantity == '50') { $amount = "190.00"; } elseif($b_maxpages == '12' && $b_quantity == '75') { $amount = "222.00"; } elseif($b_maxpages == '12' && $b_quantity == '100') { $amount = "255.00"; } elseif($b_maxpages == '12' && $b_quantity == '125') { $amount = "288.00"; } I will also need the selected data to be posted once the form is submitted. Cheers vince I have a script which allows me to select random users from one select field to another and works like a charm, but... I want to be able to get random users from one select field to multiple (lets say 2) other select fields... So lets say that I have 5 users in the first field (select1): James Bill Jennifer Bob Karen Now when I press a button: <input value="" type="button" onClick="randomusers();" /> 2 users should be moved to select2 and other 2 users moved to select3. My current script is as follows: Code: function randomusers(){
var given = 2, used = {}, randnum, opts = $('#select1 option'), olen = opts.length, hiddiv = $('#hiddendiv');
function ran() { // generate a unique random number
randnum = Math.floor(Math.random() * olen);
return used['u'+randnum] ? ran() : randnum;
}
for (var i = 0; i < given; i++) { // get the correct quantity of randoms
used['u'+ran()] = true;
}
var players = opts.filter(function(index) { // remove all options that are not one of the randoms
return !!used['u'+index];
}).appendTo('#select2');
}
Hoping for help... Thanks in advance :-) I currently have two html select list boxes side by side on a form, two buttons in between the boxes to move items from list box to the other, and a javascript function to control the movement of the items from one box to the other. Here is the javascript: Code:
function MoveSelected(from, to) {
var lstFrom = $(from);
var lstTo = $(to);
for (var i = 0; i<lstFrom.length;i++) {
if ( lstFrom[i].selected ) {
var elOptNew = document.createElement('option');
elOptNew.text = lstFrom[i].text;
elOptNew.value = lstFrom[i].value;
try {
lstTo.add(elOptNew, null); // standards compliant; doesn't work in IE
} catch(ex) {
lstTo.add(elOptNew); // IE only
}
}
}
for (var i = lstFrom.length-1; i>=0;i--) {
if ( lstFrom[i].selected ) {
lstFrom.options[i] = null;
}
}
}
Here are the two html form select list boxes (lstAvailProd is the starting list box that lists the initial data and lstSelectProd is the destination list box): Code:
<td width="10%" valign="center">
<a href="javascript: MoveSelected('lstAvailProd','lstSelectProd');"><IMG SRC="buttons/right_arrow.gif" style="padding-bottom: 2px;" /></a><br /><br />
<a href="javascript: MoveSelected('lstSelectProd','lstAvailProd');"><IMG SRC="buttons/left_arrow.gif" /></a>
</td>
I was wondering if anyone could tell me how I could modify my code to allow for the selection of all the data in the starting list box by only selecting and moving the first item in the list to the destination list box? The first item is called "All Products", so instead of actually selecting every product in the starting list and moving them to the destination list, I would like the code to see that if the "All Products" list item is moved to the destination list, move all the other list items in the destination list back to the starting list. Here's an example of what the code for each list box looks like: Starting List Box: Code:
<select name="lstAvailProd" id="lstAvailProd" multiple="true" size="8" style="width: 250px;">
<option value="-1">{All Products}</option>
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
<option value="4">Product 4</option>
<option value="5">Product 5</option>
</select>
Destination List Box: Code: <select name="lstSelectProd" id="lstSelectProd" multiple="true" size="8" style="width: 250px;"> </select> Any help would be appreciated, thanks!! Anyone have any issues with Safari in relation to javascript compatibility? I have a page that loads dynamically through user selections as follows: There is a set of three radio buttons. The user selects one and a div opens revealing a select box populated with entries related to the radio button selection. When the user makes a selection from the select box, one of two things happen. 1) If there are child records relating to their selection, a second div opens revealing another select box containing the child entries relating to the first select box choice. Or 2) if there are no child entries relating to the selection in the first select box, a div opens displaying a description relating to the selection they made in the first select box. The data is all coming from prepopulated javascript arrays. This works like a dream in IE and Chrome. Unfortunately, when we were in the final stages of testing before release to a live environment, we discovered it works in Safari only as far as the user makes a selection from the three radio buttons driving the opening of the first div layer containing the first select. At this point it stops working completely. On top of that, I can not find where in the latest release of Safari, that I can see any javascript errors (or if I even can). I am REALLY in need of help. Anything you can offer? Thanks!! Dmxsmith I have two drop down lists , list1, list 2. I want it to change according to the radio button selected by the user. If the user selects radio button1, lists1 should be displayed. If the user selects radio button2, lists2 should be displayed. How can i achieve this using javascript. Please somebody help me. Hi there, this is our first post, just stubmled across this awesome site. Need some help if anyone is able (and willing ). We are trying to make the best possible shopping experience for our customers. Objective: to give the customer a running total of what they're about to order, before they add to basket (kind of a quick quote). if you go to our test page: http://www.gatewrights.co.uk/page87.html we have got a form (boxed in red) which does indeed put the totals (of that form) in the totals box (on our form). As you should see if you test it. Now, I need to try and work out (but am really struggling) how to get it to work with the items on our form. Objective: to give the customer a running total of what they're about to order, before they add to basket (kind of a quick quote). I'll post the head js code and the body js code below. I have tried renaning the formID to 'frmOrder' (the same as the one boxed in red, and then moved that boxed one off page but it doesn't work. I suspect there is a little work to do (possibly in the value fields of our form). Hope it is clear, and I thank you for your time so far. -------------------------- js head code: Code: </script><script type="text/javascript" src="orderform04.js"></script> (plus) Code: <script type="text/javascript">
//<![CDATA[
window.onload = setupScripts;
function setupScripts()
{
var anOrder1 = new OrderForm();
}
//]]>
</script>
-------------------- js file uploaded to root directory (orderform04.js): Code: // mredkj.com
// OrderForm.js - v0.4
// v0.4 - 2007-02-01
// v0.3 - 2006-04-09
// v0.2 - 2006-04-08
// v0.1 - 2006-04-06
function OrderForm(prefix, precision, firstChoice) {
this.prefix = prefix ? prefix : '';
// ****************************
// Configure here
// ****************************
// names - Set these according to how the html ids are set
this.FORM_NAME = this.prefix + 'frmOrder';
this.BTN_TOTAL = this.prefix + 'btnTotal';
this.TXT_OUT = this.prefix + 'txtTotal';
// partial names - Set these according to how the html ids are set
this.CHK = this.prefix + 'chk';
this.SEL = this.prefix + 'sel';
this.PRICE = this.prefix + 'txtPrice';
// precision for the decimal places
// If not set, then no decimal adjustment is made
this.precision = precision ? precision : -1;
// if the drop down has the first choice after index 1
// this is used when checking or unchecking a checkbox
this.firstChoice = firstChoice ? firstChoice : 1;
// ****************************
// form
this.frm = document.getElementById(this.FORM_NAME);
// checkboxes
this.chkReg = new RegExp(this.CHK + '([0-9]+)');
this.getCheck = function(chkId) {
return document.getElementById(this.CHK + chkId);
};
// selects
this.selReg = new RegExp(this.SEL + '([0-9]+)');
this.getSelect = function(selId) {
return document.getElementById(this.SEL + selId);
};
// price spans
this.priceReg = new RegExp(this.PRICE + '([0-9]+)');
// text output
this.txtOut = document.getElementById(this.TXT_OUT);
// button
this.btnTotal = document.getElementById(this.BTN_TOTAL);
// price array
this.prices = new Array();
var o = this;
this.getCheckEvent = function() {
return function() {
o.checkRetotal(o, this);
};
};
this.getSelectEvent = function() {
return function() {
o.totalCost(o);
};
};
this.getBtnEvent = function() {
return function() {
o.totalCost(o);
};
};
/*
* Calculate the cost
*
* Required:
* Span tags around the prices with IDs formatted
* so each item's numbers correspond its select elements and input checkboxes.
*/
this.totalCost = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
var total = 0.0;
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
var price = orderObj.prices[itemNum];
var quantity = 0;
if (selObj) {
quantity = parseFloat(selObj.options[selObj.selectedIndex].text);
quantity = isNaN(quantity) ? 0 : quantity;
if (chkObj) chkObj.checked = quantity;
} else if (chkObj) {
quantity = chkObj.checked ? 1 : 0;
}
total += quantity * price;
}
}
if (this.precision == -1) {
orderObj.txtOut.value = total
} else {
orderObj.txtOut.value = total.toFixed(this.precision);
}
};
/*
* Handle clicks on the checkboxes
*
* Required:
* The corresponding select elements and input checkboxes need to be numbered the same
*
*/
this.checkRetotal = function(orderObj, obj) {
var regResult = orderObj.chkReg.exec(obj.id);
if (regResult) {
var optObj = orderObj.getSelect(regResult[1]);
if (optObj) {
if (obj.checked) {
optObj.selectedIndex = orderObj.firstChoice;
} else {
optObj.selectedIndex = 0;
}
}
orderObj.totalCost(orderObj);
}
};
/*
* Set up events
*/
this.setEvents = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
if (chkObj) {
chkObj.onclick = orderObj.getCheckEvent();
}
if (selObj) {
selObj.onchange = orderObj.getSelectEvent();
}
if (orderObj.btnTotal) {
orderObj.btnTotal.onclick = orderObj.getBtnEvent();
}
}
}
};
this.setEvents(this);
/*
*
* Grab the prices from the html
* Required:
* Prices should be wrapped in span tags, numbers only.
*/
this.grabPrices = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
if (orderObj.priceReg.test(spanObj.id)) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
orderObj.prices[regResult[1]] = parseFloat(spanObj.innerHTML);
}
}
}
};
this.grabPrices(this);
}
--- Now I hope this makes sense, and really appreciate any help you can offer. If anything is unclear, please let me know. ps is it something to do with "* Prices should be wrapped in span tags, numbers only."?? Hi, I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now. The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again? I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
//<![CDATA[
function store(element) {
// store values
var cl = element;
var text_list = new Array();
var value_list = new Array();
var length = cl.length;
for (var foo=0; foo<length; foo++) {
text_list[foo] = cl.options[foo].text;
value_list[foo] = cl.options[foo].value;
alert("text array " + foo + " " + text_list[foo]);
alert("value array " + foo + " " + value_list[foo]);
}
populate(cl, text_list, value_list);
}
function populate(element, text, value) {
// populate options with previously stored values
var cl = element;
var length = cl.length;
cl.options.length=0;
for (var bar=0; bar<length; bar++) {
cl.options[bar]= new Option(text[bar], value[bar], false, false);
}
}
function crafty_set_country(code) {
var cl = document.getElementById('select');
store(cl);
for (var i=0; i<cl.length; i++) {
if (cl.options[i].value == code) {
alert(cl.options[i].value + " found");
var value = cl.options[i].value;
var text = cl.options[i].text;
cl.options.length=0;
cl.options[0]=new Option(text, value, true, true);
/*
for (var j=0; j<cl.length; j++) {
alert("second loop " + cl.options[j].text);
if (cl.options[i].value != code) {
cl.options[j]
}
}
*/
} else {
alert(cl.options[i].value);
}
}
}
//]]>
</script>
</head>
<body>
<form>
<select id="select">
<option value="10">ten</option>
<option value="20">twenty</option>
<option value="30">thirty</option>
<option value="40">fourty</option>
<option value="50">fifty</option>
<option value="60">sixty</option>
</select>
<input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
<input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)">
</form>
</body>
</html>
Many thanks! Martin hey guys The first dropdown has some options as : abc(a) bcd(a) cde(b) def(b) efg(c) fgh(c) The second dropdown has : a b c On selecting abc(a) in first dropdown the 'a' must get selected in second dropdown,on selecting cde(b) second dropdown must have 'b' and so on,also the second dropdown value should be disabled(grayed out) for user.Need the code in javascript.ty in advance. |
|||||||