We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

populate text box based in selection from drop down

animated405
animated405 asked
on
Medium Priority
855 Views
Last Modified: 2012-08-13
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!!
Comment
Watch Question

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>

Author

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?

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

Author

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?
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
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>
Wait, I think I'm still misunderstanding something here...

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

Author

Commented:

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

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

Author

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

Commented:
"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! ;-)
Thanks. :) I just love doing stuff on the computer, my parents are always saying I spend WAY too much time on here... :P

Commented:
but i'm so sure,  spending your time here is well worth it.  i'm proud of you. ;-)

Author

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!!
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

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