populate text box based in selection from drop down

Hello,
I have a form with a place to add/edit address information. I'm trying to add a quickname type selection at the top of that form. When the user selects a saved address from this list I would like to populate the form with the address properties without reloading the page.

What I tried to do was write out some javascript arrays inside of a function containing the values for the different saved address in the users account, corresponding to the id's from the database. Then activate that function with an on onchange event for the select box which would pass in the id that was selected. My hopes was that the function could set the value of the corresponding text box. It's not working. Code I was using below..

<script language="javascript">
function doPostBack(){
var a_422347=new Array(11)
a_422347[0]="422347"
a_422347[1]=""
a_422347[2]="Fmaous Person"
a_422347[3]=""
a_422347[4]="1 Hollywood Blvd"
a_422347[5]=""
a_422347[6]="Los Angeles"
a_422347[7]="CA"
a_422347[8]="12345"
a_422347[9]=""
a_422347[10]="testingnumber2@fakeaddress.com"
a_422347[11]="saved address 2"
var a_422348=new Array(11)
a_422348[0]="422348"
a_422348[1]=""
a_422348[2]="My Address"
a_422348[3]=""
a_422348[4]="Fake Street"
a_422348[5]=""
a_422348[6]="New York"
a_422348[7]="NY"
a_422348[8]="11111"
a_422348[9]=""
a_422348[10]="test@fakeaddress.com"
a_422348[11]="saved address 2"

this.form.ShipToName.Value='a_' + document.newform.address_quickname.value + '[0]';
}
</script>

Bascially the form:
<form name="newform" method="post" action="">
<input type="hidden" name="AddressMode" value="Submit">
<select name="address_quickname" onChange="doPostBack();">
<option value="">Address Book</option>
<option value="">-------------------------</option>
<option value="422347">saved address 2</option>
<option value="422348">saved address 1</option>
</select>
<br>
*Name<br>
<input type="text" name="ShipToName" value="">
Company<br>
<input type="text" name="ShipToCompany" Value="">
Address 1 *<br>
<input type="text" name="ShipToAddress1" value="">
Address 2<br>
<input type="text" name="ShipToAddress2" value="">
City *<br>
<input type="text" name="ShipToCity" Value="">
Zip Code *<br>
<input type="text" name="ShipToZip" value="">
Phone<br>
<input type="text" value="">
Email Address<br>
<input type="text" value="">
<input name="create" type="image" src="button.gif" border="0">
</form>

How do I do this? Thanks in advance!!
animated405Asked:
Who is Participating?
 
lil_puffballConnect With a Mentor Commented:
How about this:

function doPostBack(n,obj){
document.creditcard.ShipToName.value=eval('a_'+n+'[2]');
}
0
 
lil_puffballCommented:
Here's an example:

<script language="javascript">
var a_422347=new Array();
a_422347[0]="422347"
a_422347[1]="something"
a_422347[2]="Fmaous Person"
a_422347[3]="address 4"
a_422347[4]="1 Hollywood Blvd"
a_422347[5]=""
a_422347[6]="Los Angeles"
a_422347[7]="CA"
a_422347[8]="12345"
a_422347[9]=""
a_422347[10]="testingnumber2@fakeaddress.com"
a_422347[11]="saved address 2"

function doPostBack(n,obj){
obj.value=a_422347[n];
}
</script>

Bascially the form:
<form name="newform" method="post" action="">
<input type="hidden" name="AddressMode" value="Submit">

<select onchange="doPostBack(this.options.selectedIndex-1,this.form.ShipToAddress1);">
<option>--Please Select--</option>
<option>Name 1</option>
<option>Name 2</option>
<option>Name 3</option>
<option>Name 4</option>
</select>

*Name<br>
<input type="text" name="ShipToName" value="">
Company<br>
<input type="text" name="ShipToCompany" Value="">
Address 1 *<br>
<input type="text" name="ShipToAddress1" value="">
Address 2<br>
<input type="text" name="ShipToAddress2" value="">
City *<br>
<input type="text" name="ShipToCity" Value="">
Zip Code *<br>
<input type="text" name="ShipToZip" value="">
Phone<br>
<input type="text" value="">
Email Address<br>
<input type="text" value="">
<input name="create" type="image" src="button.gif" border="0">
</form>
0
 
animated405Author Commented:

Thanks, that's a good start...however I have been trying to modify it so that it will use whichever id value is selected from the list, but to no avail. Did that make sense?

0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
bobbit31Commented:
here's how i'd do it:

<script language="javascript">

function ShippingInfo(f1, f2, f3, f4, f5, f6, f7, f8, f9, f10, f11, f12) {
   this.f1 = f1;
   this.f2 = f2;
   this.f3 = f3;
   this.f4 = f4;
   this.f5 = f5;
   this.f6 = f6;
   this.f7 = f7;
   this.f8 = f8;
   this.f9 = f9;
   this.f10 = f10;
   this.f11 = f11;
   this.f12 = f12;
}

var arrShipping = new Array(2);
arrShipping[0] = new ShippingInfo("422347", "", "Famous Person", "", "1 Hollywood Blvd", "", "Los Angeles", "CA", "12345", "", "testingnumber2@fakeaddress.com", "saved address2");
arrShipping[1] = new ShippingInfo("422348", "", "My Address", "", "Fake Street", "", "New York", "NY", "11111", "", "testingnumber2@fakeaddress.com", "saved address2");

function loadSaved(sel) {
  sel.options[0] = new Option("Saved Shipping Addresses", "");
  sel.options[1] = new Option("422347", "422347");
  sel.options[2] = new Option("422348", "422348");
}

function doPostBack(frm, shp){

   if (shp != null) {
      for (i=0;i<arrShipping.length;i++) {
         if (arrShipping[i].f1 == shp) {
            frm.ShipToName.value = arrShipping[i].f3;
            frm.ShipToCompany.value = arrShipping[i].f5;
            frm.ShipToAddress1.value = arrShipping[i].f5;
            frm.ShipToAddress2.value = arrShipping[i].f6;
            frm.ShipToCity.value = arrShipping[i].f7;
            frm.ShipToZip.value = arrShipping[i].f9;
            break;
         }
      }
   }
}
</script>
<body onload="loadSaved(document.newform.selSaved);">
Bascially the form:


<form name="newform" method="post" action="">
<select name="selSaved" onchange="doPostBack(this.form, this.value);">
</select><br>
<input type="hidden" name="AddressMode" value="Submit">
*Name<br>
<input type="text" name="ShipToName" value="">
Company<br>
<input type="text" name="ShipToCompany" Value="">
Address 1 *<br>
<input type="text" name="ShipToAddress1" value="">
Address 2<br>
<input type="text" name="ShipToAddress2" value="">
City *<br>
<input type="text" name="ShipToCity" Value="">
Zip Code *<br>
<input type="text" name="ShipToZip" value="">
Phone<br>
<input type="text" name="ShipToEmail" value="">
Email Address<br>
<input type="text" value="">
<input name="create" type="image" src="button.gif" border="0">
</form>

</body>
</html>

obviously naming f1, f2, f3, f4, f5... more identifiable names.
0
 
animated405Author Commented:

Thanks for the comments. Actually I'm almost there after changing a bit of what was suggested from the first comment (sorry bobbit31 I don't understand that one). So, I have the arrays:

var a_422347=new Array();
a_422347[0]="422347"
a_422347[1]="something"
a_422347[2]="Fmaous Person"
a_422347[3]="address 4"
a_422347[4]="1 Hollywood Blvd"
a_422347[5]=""
a_422347[6]="Los Angeles"
a_422347[7]="CA"
a_422347[8]="12345"
a_422347[9]=""
a_422347[10]="testingnumber2@fakeaddress.com"
a_422347[11]="saved address 1"
var a_422348=new Array(11)
a_422348[0]="422348"
a_422348[1]=""
a_422348[2]="My Address"
a_422348[3]=""
a_422348[4]="Fake Street"
a_422348[5]=""
a_422348[6]="New York"
a_422348[7]="NY"
a_422348[8]="11111"
a_422348[9]=""
a_422348[10]="test@fakeaddress.com"
a_422348[11]="saved address 2"


and the function:
function doPostBack(n,obj){
document.creditcard.ShipToName.value='a_'+n+'[2]';
}

and the onchange event which is passing back the address id:
<select onchange="doPostBack(this.options.value,this.form);">
<option>--Please Select--</option>
<option value="422347">save address 1</option>
<option value="422348">save address 2</option>
</select>


This almost works, except for this line in the function, the only line:
document.creditcard.ShipToName.value='a_'+n+'[2]';

is actually spitting out a_422348[2] instead of the corresponding value from the array...what's up with that. How do I set the form element to a value from the array when I'm passing in a string to figure out which array it is?
0
 
lil_puffballCommented:
Although I think I understand your question better now, how about setting up the array like this:

var a_422348=new Array();
a_422348["Name 1"]="Address 1";
a_422348["Name 2"]="Address 2";
a_422348["Name 3"]="Address 3";
...

And doing this for the function:

function doPostBack(arrayName,n){
document.creditcard.ShipToName.value=eval('a_'+arrayName+'['+n+']');
}

And this for the onchange:

<select onchange="doPostBack(this.options.value,this.options[selectedIndex].text);">
<option>--Please Select--</option>
<option value="422347">save address 1</option>
<option value="422348">save address 2</option>
</select>
0
 
lil_puffballCommented:
Wait, I think I'm still misunderstanding something here...
0
 
thirdCommented:
try this,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script language="javascript">
var a_422347=new Array(11);
a_422347[0]="422347"
a_422347[1]="something"
a_422347[2]="Fmaous Person"
a_422347[3]="address 4"
a_422347[4]="1 Hollywood Blvd"
a_422347[5]=""
a_422347[6]="Los Angeles"
a_422347[7]="CA"
a_422347[8]="12345"
a_422347[9]=""
a_422347[10]="testingnumber2@fakeaddress.com"
a_422347[11]="saved address 1"
var a_422348=new Array(11)
a_422348[0]="422348"
a_422348[1]=""
a_422348[2]="My Address"
a_422348[3]=""
a_422348[4]="Fake Street"
a_422348[5]=""
a_422348[6]="New York"
a_422348[7]="NY"
a_422348[8]="11111"
a_422348[9]=""
a_422348[10]="test@fakeaddress.com"
a_422348[11]="saved address 2"

function doPostBack(obj){
  obj.form.ShipToName.value = '';
  obj.form.ShipToCompany.value = '';
  obj.form.ShipToAddress1.value = '';
  obj.form.ShipToAddress2.value = '';
  obj.form.ShipToCity.value = '';
  obj.form.ShipToZip.value = '';
  obj.form.ShipToEmail.value = '';

  if(obj.selectedIndex > 1){
    var val = obj.options[obj.selectedIndex].value;
    obj.form.ShipToName.value = eval('a_' + val + '[0]');
      obj.form.ShipToCompany.value = eval('a_' + val + '[1]');
      obj.form.ShipToAddress1.value = eval('a_' + val + '[2]');
      obj.form.ShipToAddress2.value = eval('a_' + val + '[3]');
      obj.form.ShipToCity.value = eval('a_' + val + '[6]');
      obj.form.ShipToZip.value = eval('a_' + val + '[8]');
      obj.form.ShipToEmail.value = eval('a_' + val + '[10]');
  }
}
</script>

</head>
<body>
<form name="newform" method="post" action="">
<input type="hidden" name="AddressMode" value="Submit">
<select name="address_quickname" onChange="doPostBack(this);">
<option value="">Address Book</option>
<option value="">-------------------------</option>
<option value="422347">saved address 2</option>
<option value="422348">saved address 1</option>
</select>
<br>
*Name<br>
<input type="text" name="ShipToName" value="">
Company<br>
<input type="text" name="ShipToCompany" Value="">
Address 1 *<br>
<input type="text" name="ShipToAddress1" value="">
Address 2<br>
<input type="text" name="ShipToAddress2" value="">
City *<br>
<input type="text" name="ShipToCity" Value="">
Zip Code *<br>
<input type="text" name="ShipToZip" value="">
Phone<br>
<input type="text" name="ShipToEmail" value="">
Email Address<br>
<input type="text" value="">
<input name="create" type="image" src="button.gif" border="0">
</form>
</body>
</html>
0
 
animated405Author Commented:

Thanks everyone for the tips. I accepted lil_puffball because the initial comment from him/her lead to my figuring this out

0
 
thirdCommented:
but why give him a grade of "B" then?
0
 
animated405Author Commented:

I don't know because it was "good" and 4 in the morning. I learned from it more than it was an exact solution to my problem. I don't mind changing it if I can...do you know if I can?

thanks
0
 
lil_puffballCommented:
Thanks third for suggesting the grade change and animated405 for agreeing to it, you can change a grade by going to community support, I will post a question right now. :)

P.S. third, I'm a girl. :P
0
 
thirdCommented:
"P.S. third, I'm a girl. :P"

wow, i'm so surprised! you're a girl and only 15?!

keep up the good work! ;-)
0
 
lil_puffballCommented:
Thanks. :) I just love doing stuff on the computer, my parents are always saying I spend WAY too much time on here... :P
0
 
thirdCommented:
but i'm so sure,  spending your time here is well worth it.  i'm proud of you. ;-)
0
 
animated405Author Commented:

Thanks again everyone...looks like the support person changed the grade. I learned a lot and was able to do exactly what I wanted!!
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.