Solved

populate text box based in selection from drop down

Posted on 2004-03-25
17
830 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!!
0
Comment
Question by:animated405
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 4
  • +1
17 Comments
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10683544
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
 

Author Comment

by:animated405
ID: 10683621

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

Expert Comment

by:bobbit31
ID: 10683657
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:animated405
ID: 10683773

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

Accepted Solution

by:
lil_puffball earned 500 total points
ID: 10683790
How about this:

function doPostBack(n,obj){
document.creditcard.ShipToName.value=eval('a_'+n+'[2]');
}
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10683802
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
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10683814
Wait, I think I'm still misunderstanding something here...
0
 
LVL 30

Expert Comment

by:third
ID: 10684035
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
 

Author Comment

by:animated405
ID: 10684262

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

0
 
LVL 30

Expert Comment

by:third
ID: 10684331
but why give him a grade of "B" then?
0
 

Author Comment

by:animated405
ID: 10689164

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

Expert Comment

by:lil_puffball
ID: 10690978
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
 
LVL 30

Expert Comment

by:third
ID: 10700540
"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
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10700557
Thanks. :) I just love doing stuff on the computer, my parents are always saying I spend WAY too much time on here... :P
0
 
LVL 30

Expert Comment

by:third
ID: 10700635
but i'm so sure,  spending your time here is well worth it.  i'm proud of you. ;-)
0
 

Author Comment

by:animated405
ID: 10701093

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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question