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".
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>