Dynamic field population in web forms revisited

[gauntletxg]

Hello all, this is my first post and I am in need of some assistance. I am relatively new to javascript and am struggling to figure out how to populate fields dynamically.

I currently have a basic form in HTML which is used to gather contact information from customers. There are six fields on the left side for the actual customer (name, email, phone, etc.), and there are the same six fields on the right side in case the customer has a different person that we should contact, such as a customer relations expert or a sales representative. On the right side, I would like to have a tickbox for 'same as left side', and when the user checks this box the fields are dynamically populated with the information entered in the left side. I would like to have these fields remain editable in case the user wants to input the same information but change one field, such as a phone number.

i am really stumped, and i think i've gone as far as i can with searching through google and various forums. any help would be greatly appreciated. thanks so much!!

 

[BillyRayPreachersSon]

I'd opt not to use a checkbox - after all, you don't need something with 2 states, given that you're still allowing the RHS boxes to be editable. A simple button wuld be better, IMHO.

So, attach an onclick to your button, something like this:

<input type="button" value="Copy details" onclick="copyDetails(this.form);" />

and then have a function in your script section called "copyDetails". This is passed one parameter - a reference to the form element itself, which you can then use to access the text fields:

<script type="text/javascript">

   function copyDetails(frm) {
      frm.elements['destinationFieldName'].value = frm.elements['sourceFieldName'].value
   }

</script>

Simply copy that one line as many times as you have form fields, and then change the source and destination names for the names of the relevant form fields.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Hmm - I missed off a semicolon at the end of the line inside the function. I'd put it in when you copy that line, personally.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[gauntletxg]

that worked great, i'm learning that the simplest solution is often the best solution...occam's razor at work again. i was getting really confused with putting in conditions for the checkbox, but your button idea is perfect. thanks!

 

[TBB07]

Why not pass the field names to the function?

<code>
function copyDetails(frm,src,dest) {
frm.elements[dest].value = frm.elements[src].value;
}
</code>

This way, you don't have to duplicate the code over and over...