Solved

populate text box based in selection from drop down

Posted on 2004-03-25
17
824 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
  • 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
 

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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now