input box numbers change dropdown

Forum Moderators: open

Message Too Old, No Replies

input box numbers change dropdown

how can this be done?

ezyid

1:25 am on Aug 23, 2006 (gmt 0)

Hello all,

I’ve been looking around and cant really find the solution.
Pretty much I have a text field that I want to change a variable on a dropdown box.

Basically what I have is a programme that I enter the weight of letters and parcels. all letters are under 200g therefore all parcels are over 200g.

To choose between the parcels and letter sizes there is a dropdown. What I want to happen is, when someone puts say 201g into the text field it automatically switches the dropdown from letter to parcel.

Is there any code that you guys would think could help me out? I’m really lost and would appreciate your help.

Cheers,
Steven.

Arno_Adams

5:40 pm on Aug 25, 2006 (gmt 0)

Hi,

Try this:
<script type="text/javascript">
function getType(weight) {
a = parseInt(weight);
if(a>200) {
document.getElementById('type').selectedIndex = 2;
}
else {
document.getElementById('type').selectedIndex = 1;
}
}
</script>

<form name="form1" id="form1" >
<input type="text" name="weight" id="weight" value="" onblur="getType(this.value)">
<select name="type" id="type">
<option value="0">Select type</option>
<option value="1">letters</option>
<option value="2">parcels</option>
</select>
</form>

HTH, AA

rocknbil

8:39 pm on Aug 25, 2006 (gmt 0)

You should probably do some cross-checking. Either that, or make onFocus=blur(); on the select list, which is bad for accessibility reasons.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Changing DropDown</title> 
 <script type="text/javascript"> 
 function getType(weight) { 
   if (isNaN(weight)) { alert('Please enter integer numbers for the weight.'); return; } 
   weight = parseInt(weight); 
   letter_type = document.getElementById('letter_type'); 
   letter_type.selectedIndex = (weight > 200)?2:1; 
 } 
 function setWeight(v) { 
   var msg = ''; 
   wt = document.getElementById('weight'); 
   if (v==0) { wt.value = ''; } 
   else { 
   if ((v==1) && (wt.value > 200)) {  
    msg = 'You have selected parcels,\n'+ 
    'but the weight you entered is over 200 grams.\n'+ 
    'Please make the necessary corrections.';  
   } 
   if ((v==2) && (wt.value < 201)) { 
    msg = 'You have selected letters,\n'+ 
    'but the weight you entered is 200 grams or less.\n'+ 
    'Please make the necessary corrections.';  
   } 
   if (msg!= '') { alert(msg); } 
   } 
 } 
 </script> 
 </head> 
<body> 
<form name="weight_frm" id="weight_frm"> 
<input type="text" name="weight" id="weight" value="" onChange="getType(this.value)"> 
<select name="letter_type" id="letter_type" onChange="setWeight(this.options[this.selectedIndex].value);"> 
<option value="0">Select type</option> 
<option value="1">letters</option> 
<option value="2">parcels</option> 
</select> 
</form>  
</body> 
</html>