Populating a select box based off of previous selection

Question

Basically this is what i want to happen.
1. Choose name from datalist
2. randomly populates "standard" or "Sensitive"
3. Based on whats populated in step 2 the "VIP" select box will display Yes or No (if step 2 = standard then VIP = No, if step 2 = Sensitive then VIP = Yes)

Here is my code right now:

<html>
<head>
<title>Countdown</title>
<input name="customer" list = "customer" id="customerI" onchange="getNumber()"> <!--Datalist populated with the customer[Array] below-->
</input>
<datalist id = "customer"></datalist>

<br>
<br>

<select id = "phone" name ="phone" type = "text" placeholder = "Phone Number" value = ""> <!--Drop Down menu that should autopopulate based on the value of the datalist-->
</select>

VIP
<select id = "VIP" name = "VIP" type = "text" value = ""></select> <!--Populated with VIP array below-->

<script type="text/javascript">
  var customer = ['david.a.onezine', 'jimmy.a.jams', 'larry.a.beatrice', 'janet.a.jackson', 'biggie.j.smalls', 'bob.marley', 'james.a.tribeca', 'veronica.a.mars', 'kassy.b.jones', 'victoria.a.langley'];
  var phone = ['Standard', 'Sensitive'];
  var VIP = ['Yes', 'No'];
  var arraylength = customer.length; //Arrays for the two drop downs are above, customer.length = 10, phone length = 10
  var arraylength2 = phone.length;
  var arraylength3 = VIP.length;
  var i; //i for loops
  var options = ''; //blank value so that it can fill the option value with the values from the respective array
  var options2 = '';
  var options3 = '';
 
  options += '<option value="defualt">Choose a Name</option>'; //Same as above only for the <datalist id = customer>
  for(i = 0; i < arraylength; i++)
    options += '<option value="'+customer[i]+'">'+customer[i]+'</option>';
 
 options2 += '<option value="defualt"></option>'; //Populates the <select id = phone> by looping through the array and populating the drop down
  for(i = 0; i < arraylength2; i++)
    options2 += '<option value="'+phone[i]+'">'+phone[i]+'</option>';
 
 options3 += '<option value = "default"></option>'; //populates <select id = VIP>
 for(i=0; i < arraylength3; i++)
 options3 += '<option value = "'+VIP[i]+'">'+VIP[i]+'</option>';
  
  document.getElementById('customer').innerHTML = options.toString(); //converts array values to strings so that it will display the options in the drop down for <datalist id = customer>
  
  document.getElementById('phone').innerHTML = options2.toString(); //converts array values to strings so that it will display the options in the drop down for <select id = phone>
  
  document.getElementById('VIP').innerHTML = options3.toString(); //displays <options> in the <select id = VIP> drop down
  getNumber();
 function getNumber(){ //This is the autopopulate function
   var customervalue = document.getElementById('customerI').value; //Identifies the input field that comes with a datalist. If input value is the same as datalist value then...
   var i;
   var match = false;
   getVIP();
   for(i = 0; i < arraylength; i++){
     if(customervalue == customer[i]){ //loops through customer array and checks if any array item is identical to what has been put in the input field
       match = true; //if the match is true the loop stops running
       break;
     }
   }

    if(match == true){ //If someone chooses datalist option then <select id = phone> will have either standard/sensitive populated (this is completely at random)
      document.getElementById('phone').value = phone[Math.floor(Math.random() * arraylength2)]; //Chooses randomly between standard and sensitive
 
    } 
 else {
      document.getElementById('phone').value = "";
   document.getElementById('VIP').value = "";
    }

  }
  
function getVIP(){ //trying to make it so whatever the random value is the VIP select box populates with specific value. So if phone = standard then VIP = no(if phone[0] then VIP[1]
  var phoneValue = document.getElementById('phone').value;
  if (phoneValue == 0){
 document.getElementById('VIP').value = VIP[1];
 }
 else if (phoneValue == 1){
 document.getElementById('VIP').value = VIP[0];
 }
 }
 </script>

</body>
</html>

When I run the code the following happens:
1. Name is chosen from
2. populates random value of (standard, sensitive)
3. VIP Displays "No" based off selection from step 2

The issue is that VIP is only displaying "No" I would like it to display the following.

If step 2(above) = Standard then VIP = No if step2(above) = Sensitive then VIP = Yes

Right now I am only getting the value of "No".

you worded this kind of confusingly, but why dont you use a session variable? http://stackoverflow.com/questions/18076013/setting-session-variable-using-javascript — redress, May 20 '15 at 16:55
Sorry, if its confusing. Im still starting out with all of this. By session do you mean database stuff? Right now I've only been using javascript to get my program running. I was gonna try and use json/sql/php later on after I had a working product. Basically just trying to stick with what I know and keep it local. Hopefully this was what you were asking. — zombie dude 789, May 20 '15 at 17:16
you have added so much description about your code that I have no idea where your question actually resides. going off of your post title alone, I'd say that you need an event handler that sets a variable, which gets called when populating the 'select box'. try cleaning up your question a bit. you have described way too much via text as opposed to through code — redress, May 20 '15 at 17:25

score 0 · Accepted Answer · edited Dec 31 '22 at 16:22

Figured out the answer to the question.

If you want the VIP select box to populate based off of the value found in the previous select box use this code.

The code does the following

User chooses value from the datalist
<select id = phone> randomly assigns "sensitive" and "standard" value
VIP select references step 2 and assigns value to the box based on step 2.
(If step 2 = sensitive then VIP = YES, if step2 = standard then VIP = NO)

<html>
<head>
<title>Countdown</title>
<input name="customer" list = "customer" id="customerI" onchange="getNumber()"> <!--Datalist populated with the customer[Array] below-->
</input>
<datalist id = "customer"></datalist>

<br>
<br>

<select id = "phone" name ="phone" type = "text" placeholder = "Phone Number"  onchange = "getVIP()" value = ""> <!--Drop Down menu that should autopopulate based on the value of the datalist-->
</select>

VIP
<select id = "VIP" name = "VIP" type = "text" value = ""></select> <!--Populated with VIP array below-->

<script type="text/javascript">
  var customer = ['david.a.onezine', 'jimmy.a.jams', 'larry.a.beatrice', 'janet.a.jackson', 'biggie.j.smalls', 'bob.marley', 'james.a.tribeca', 'veronica.a.mars', 'kassy.b.jones', 'victoria.a.langley'];
  var phone = ['Standard', 'Sensitive'];
  var VIP = ['No', 'Yes'];
  var arraylength = customer.length; //Arrays for the two drop downs are above, customer.length = 10, phone length = 10
  var arraylength2 = phone.length;
  var arraylength3 = VIP.length;
  var i; //i for loops
  var options = ''; //blank value so that it can fill the option value with the values from the respective array
  var options2 = '';
  var options3 = '';

  options += '<option value="defualt">Choose a Name</option>'; //Same as above only for the <datalist id = customer>
  for(i = 0; i < arraylength; i++)
    options += '<option value="'+customer[i]+'">'+customer[i]+'</option>';
    
    options2 += '<option value="defualt"></option>'; //Populates the <select id = phone> by looping through the array and populating the drop down
  for(i = 0; i < arraylength2; i++)
    options2 += '<option value="'+phone[i]+'">'+phone[i]+'</option>';
    
    options3 += '<option value = "default"></option>'; //populates <select id = VIP>
    for(i=0; i < arraylength3; i++)
    options3 += '<option value = "'+VIP[i]+'">'+VIP[i]+'</option>';
  
  document.getElementById('customer').innerHTML = options.toString(); //converts array values to strings so that it will display the options in the drop down for <datalist id = customer>
  
  document.getElementById('phone').innerHTML = options2.toString(); //converts array values to strings so that it will display the options in the drop down for <select id = phone>
  
  document.getElementById('VIP').innerHTML = options3.toString(); //displays <options> in the <select id = VIP> drop down
  getNumber();
 function getNumber(){ //This is the autopopulate function
   var customervalue = document.getElementById('customerI').value; //Identifies the input field that comes with a datalist. If input value is the same as datalist value then...
   var i;
   var match = false;
   for(i = 0; i < arraylength; i++){
     if(customervalue == customer[i]){ //loops through customer array and checks if any array item is identical to what has been put in the input field
       match = true; //if the match is true the loop stops running
       break;
     }
   }

    if(match == true){ //If someone chooses datalist option then <select id = phone> will have either standard/sensitive populated (this is completely at random)
      document.getElementById('phone').value = phone[Math.floor(Math.random() * arraylength2)]; //Chooses randomly between standard and sensitive
    
    } 
    else {
      document.getElementById('phone').value = "";
      document.getElementById('VIP').value = "";
    }
    getVIP();
}
  
function getVIP(){ //trying to make it so whatever the random value is the VIP select box populates with specific value. So if phone = standard then VIP = no(if phone[0] then VIP[1]
  var phonevalue = document.getElementById('phone').value;
  if (phonevalue == phone[0]){
    document.getElementById('VIP').value = VIP[0];
    }
    else if (phonevalue == phone[1]){
    document.getElementById('VIP').value = VIP[1];
    }
 }
 </script>

</body>
</html>

Populating a select box based off of previous selection

1 Answers1