We help IT Professionals succeed at work.

JavaScript with drop down selection

diecasthft01
diecasthft01 asked
on
70 Views
Last Modified: 2019-03-21
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

Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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.

Author

Commented:
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.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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.

Author

Commented:
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.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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.

Author

Commented:
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>
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.