Avatar of diecasthft01
diecasthft01 asked on

JavaScript with drop down selection

Good morning all, I was hoping to get some help with some JavaScript I have. As its put together it works fine, but I need to do something else and not sure how to get there. I have a standard form that has two drop downs. On the first drop down, if a user picks a certain selection, then two text form fields will automatically fill in. That works as I need it to. However, what I would like to do is have the capability to have the user pick a selection from the second list and fill in those same text form fields. My idea here is that the first drop down would have a list of the most common selections, but then if the required selection is not in the first drop down, the user can pick it from the second drop down and fill in the same form fields as if picking a selection from the first. I tried just duplicating the code and calling it ChoiceA but that didn't work. I'm missing something.....Thanks!!

<html>
  <head>
    <style type="text/css">

    </style>
<script type="text/javascript">
var ids = new Array();
var use = new Array();
var ful = new Array();

ids[0] = "";
use[0] = "";
ful[0] = "";

ids[1] = 1;
use[1] = "a1";
ful[1] = "Arron";

ids[2] = 2;
use[2] = "b1";
ful[2] = "Bill";

ids[3] = 3;
use[3] = "c1";
ful[3] = "Charlie";
	
ids[4] = "";
use[4] = "";
ful[4] = "";

function Choice() {
            
              y = document.getElementById("selectUsers");

              document.getElementById("ids").value = ids[y.selectedIndex];
              document.getElementById("use").value = use[y.selectedIndex];
              document.getElementById("ful").value = ful[y.selectedIndex];
         }
    </script> 
  </head>

  <body>
<form name="form1" method="post" action="">
<select id="selectUsers" name="users" onChange='Choice();'>
<option value="">Select</option>
<option value="1">a1</option>
<option value="2">b1</option>
<option value="3">c1</option>
<option value="4">More</option>
</select>
		
<select id="selectUsersAdd" name="usersNew" onChange='Choice();'>
<option value="">Select</option>
<option value="1">a2</option>
<option value="2">b2</option>
<option value="3">c2</option>
</select>	
		
<p>ids <input type="text" id="ids" name="id" ></p>
<p>use <input type="text" id="use" name="username" ></p>
<p>ful <input type="text" id="ful" name="full_name" ></p>
</form>
  </body>
</html>

Open in new window

HTMLJavaScript

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
Julian Hansen

Let's look at what you are doing
Select 1
<select id="selectUsers" name="users" onChange='Choice();'>

Open in new window

Select 2
<select id="selectUsersAdd" name="usersNew" onChange='Choice();'>

Open in new window

Both call Choice(), but in Choice ... you have this
function Choice() 
{
  y = document.getElementById("selectUsers");

Open in new window

y is now select 1 irrespective of which select triggered the event.
Let's change this. Lets make it that Choice() gets passed the relevant select
function Choice(y) 
{
...
// Leave the rest as is for now
}

Open in new window

Now all we need to do is pass in the correct select for each changeSelect 1
<select id="selectUsers" name="users" onChange='Choice(this);'>

Open in new window

Select 2
<select id="selectUsersAdd" name="usersNew" onChange='Choice(this);'>

Open in new window


That should work for now - but if you change your id's so that a select has more options than are in the array you will have to do some bounds checking to make sure you don't reference an array item that does not exist.
ASKER
diecasthft01

I'm sorry....that didn't change anything for me, and I may have not have explained very well what I was looking for. So lets say 'selectUsers' has a list of names, and if a user selects ids2 from 'selectUsers' he will get the name "Bill" loaded in the form field box.

But on 'selectUsersAdd' that dropdown may have a name, lets say Fred. I want to have Freds info populate the form field. But I don't know how to have Freds info listed as a variable since it comes from a different select form.
Julian Hansen

Then I still don't understand.

I'm sorry....that didn't change anything for me
Do you mean
a) You are getting the same result
OR
b) You are getting a different result but not the result you wanted

Based on what you were attempting to do - your code - I adapted to make that approach work. In other words. If you do a select from select1 it populates the form with values based on that selection.
If you select from select2 it does the same thing but using the value from the second select.

The code I suggested does show a different result.

Going through your post
So lets say 'selectUsers' has a list of names, and if a user selects ids2 from 'selectUsers' he will get the name "Bill" loaded in the form field box.
I think I get this - it is what it is currently doing right?
But on 'selectUsersAdd' that dropdown may have a name, lets say Fred. I want to have Freds info populate the form field. But I don't know how to have Freds info listed as a variable since it comes from a different select form.
This is not clear at all.
...that dropdown may have a name, lets say Fred
Except it doesn't, it as a2, b2, c2 - if you can keep your descriptions tied to your actual code it might help. Remember this is clear to you because you have all the pieces of the puzzle - don't confuse the issue by introducing things that have not been clarified. Fred is not an option anywhere so don't let's use it.

If I understand you correctly - lets call Fred => b2 - if you select b2 from the dropdown you want the details for b2 to populate the list - however if we use the same input data then b2 is id 2 so we right back at Bill's data - see how it is not clear what it is you are wanting?

The code changes I suggested will do exactly the above - but it seems that is not correct - which means something is missing from the picture.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
ASKER
diecasthft01

The changes didn't make any difference in the action of the existing code. So let me this....I think I know what omitted. I ultimately want two drop down lists...lets call them customers. We have a few customers that we use all of the time, and I want them to appear in list one. So when a user is fulfilling an order for one of those customers, they will select the customer from list one, and when they do, all of the additional info will be filled in the text boxes, like first name, last name, email, ect. What I have works in the scenario. However, we have several customers that we don't use very often. I wanted those customers to appear in the second list, not the first. So if a user was going to select one of those customers from the second list, they would first select 'More' from the fist list, the second drop down list would appear, which I also have working now and then they would select the customer from the second list. But when they do, that customers info would then fill in the text boxes as the first list does now.
Julian Hansen

Here is my version of your code
http://www.marcorpsa.com/ee/t3531.html

Select a1 from list 1 (left)
Results
ids: 1
use: a1
ful: Aaron

Open in new window

Select c2 from list 2 (right)
ids: 3
use: c1
ful: Charlie

Open in new window


As far as I can tell this is what you were asking for. If it is not working for you then I suspect it is implementation - in which case post your code so we can see where you went wrong.

My code (as far as I can tell) is working as expected.
ASKER
diecasthft01

I really can't seem to get this to work as I thought it would, unless I'm overlooking something. Code is below:

<script type="text/javascript">
var ids = new Array();
var use = new Array();
var ful = new Array();

ids[0] = "";
use[0] = "";
ful[0] = "";

ids[1] = 1;
use[1] = "a1";
ful[1] = "Arron";

ids[2] = 2;
use[2] = "b1";
ful[2] = "Bill";

ids[3] = 3;
use[3] = "c1";
ful[3] = "Charlie";
      
ids[4] = "";
use[4] = "";
ful[4] = "";
      


function Choice(y) {
           
              y = document.getElementById("selectUsers");

              document.getElementById("ids").value = ids[y.selectedIndex];
              document.getElementById("use").value = use[y.selectedIndex];
              document.getElementById("ful").value = ful[y.selectedIndex];
         }
    </script>

      
  </head>
  <body>
<form name="form1" method="post" action="">
<select id="selectUsers" name="users" onChange='Choice(this);'>
<option value="">Select</option>
<option value="1">a1</option>
<option value="2">b1</option>
<option value="3">c1</option>
<option value="4">More</option>
</select>
      
      
<select id="selectUsersAdd" name="usersNew" onChange='Choice(this);'>
<option value="">Select</option>
<option value="1">a2</option>
<option value="2">b2</option>
<option value="3">c2</option>

</select>      
      
      
<p>ids <input type="text" id="ids" name="id" ></p>
<p>use <input type="text" id="use" name="username" ></p>
<p>ful <input type="text" id="ful" name="full_name" ></p>
</form>
  </body>
</html>
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER CERTIFIED SOLUTION
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question