Updating multiple input fields using one select box.

I'm trying to automatically populate three input fields by using one select (combo box) field.  The select field contains names, when a name is selected, their home, cell, and work phone numbers need to be populated into the three input fields.

Does anyone have any ideas about how to do this?

Here's the code for the select and input fields:

<select size="1" name="em_name1" class="input_shadowless">
<option>Select</option>
<option>User 1</option>
<option>User 2</option>
<option>User 3</option>
</select>
<input class="input_shadowless" size=19 maxlength="50" type="text" name="em_work_phone1">
<input class="input_shadowless" size=19 maxlength="50" type="text" name="em_cell_phone1">
<input class="input_shadowless" size=19 maxlength="50" type="text" name="em_home_phone1">

My knowledge of JavaScript is extremely small, so spelling it out plainly would greatly help!!

Thanks,
Steve
scross1276Asked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
<script>

function user(p1,p2,p3) {
  this.p1=p1;
  this.p2=p2;
  this.p3=p3;
}

users = new Array(
new user('','',''),
new user('123123','31123123','234234'),
new user('223123','41123123','634234'),
new user('323123','51123123','734234')
)
function fill(sel) {
  frm = sel.form; // get the form the sel is in
  frm.em_work_phone1.value = users[sel.selectedIndex].p1
  frm.em_cell_phone1.value= users[sel.selectedIndex].p2
  frm.em_home_phone1.value= users[sel.selectedIndex].p3
}
</script>
<form>

<select size="1" name="em_name1" class="input_shadowless"
onCHange="fill(this)">
<option>Select</option>
<option>User 1</option>
<option>User 2</option>
<option>User 3</option>
</select>
<input class="input_shadowless" size=19 maxlength="50" type="text" name="em_work_phone1">
<input class="input_shadowless" size=19 maxlength="50" type="text" name="em_cell_phone1">
<input class="input_shadowless" size=19 maxlength="50" type="text" name="em_home_phone1">
</form>
0
 
Michel PlungjanIT ExpertCommented:
So the "user" function is used to create a user object that has 3 attributes, p1, p2, p3 (could be changed in the script to workphone cellphone, homephone
We then create a users array (list) of 4 times a user
the first has empty values to clear the fields when the 0th option (Select) is chosen

The keyword (this) is used to pass the actual select to the function fill

Michel
0
 
scross1276Author Commented:
What can I say mplungjan, you're awesome!
0
 
ZvonkoSystems architectCommented:
Like this:


<html>
<head>
<script>
var nameTab = [
["", "", ""],
["work+U1", "cell+U1", "home+U1"],
["work+U2", "cell+U2", "home+U2"],
["work+U3", "cell+U3", "home+U3"]];
function setFields(theSel){
  theUser = nameTab[theSel.selectedIndex];
  theForm = theSel.form;
  theForm.em_work_phone1.value = theUser[0];
  theForm.em_cell_phone1.value = theUser[1];
  theForm.em_home_phone1.value = theUser[2];
}
</script>
</head>
<body>
<form>
<select size="1" name="em_name1" class="input_shadowless" onChange="setFields(this)">
<option>Select</option>
<option>User 1</option>
<option>User 2</option>
<option>User 3</option>
</select>
<input class="input_shadowless" size=19 maxlength="50" type="text" name="em_work_phone1">
<input class="input_shadowless" size=19 maxlength="50" type="text" name="em_cell_phone1">
<input class="input_shadowless" size=19 maxlength="50" type="text" name="em_home_phone1">
</form>
</body>
</html>


0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.