I wish to use a checkbox to populate form fields.

Example User Flow:
Visitor fills out shipping info fields like name, address, zip, city.
Visitor has option to checkbox to auto populate billing info fields.
If user checks "same as billing info" checkbox, the shipping info fields
with input data are copy / pasted into billing info fields.

Please visit:

Is J$ is best way to achive this?
Please tell me if there is a better solution.
Thanks for your attention good citizen!

I wish to use a checkbox to populate form fields.

Example User Flow:
Visitor fills out shipping info fields like name, address, zip, city.
Visitor has option to checkbox to auto populate billing info fields.
If user checks "same as billing info" checkbox, the shipping info fields
with input data are copy / pasted into billing info fields.

Please visit: http://staelements./register

Is J$ is best way to achive this?
Please tell me if there is a better solution.
Thanks for your attention good citizen!

• javascript
• forms
• checkbox
• populate
• auto-populate

Share Improve this question Follow edited Aug 15, 2014 at 4:59 Uncle Iroh asked Aug 15, 2014 at 4:47 Uncle IrohUncle Iroh 38666 silver badges1818 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

you can use Jquery to achive this .. first load the propery jquery library to your project or page ..

then if your checkbox is like this

<input type="checkbox" id="checkbox1" />

<!-- account form fields  -->
<input type="text" id="name" />
<input type="text" id="phone" />

<!-- billing form fields-->
<input type="text" id="name_billing" />
<input type="text" id="phone_billing" />

$(document).ready(function(){
 $("#checkbox1").change(function() {
  if(this.checked) {
   alert("checked ");
    //get the values of the filled fields
    $name = $("#name").val();
    $phone = $("#phone").val();
    console.log("name");
    // then add those values to your billing infor window feilds 

    $("#name_billing").val($name);
    $("#phone_billing").val($phone);

    // then form will be automatically filled .. 

  }
  else{
   $('#name_billing').val('');
   $("#phone_billing").val('');
  }
 });
});

check the js fiddle http://jsfiddle/2kt0usfx/

if you want to remove the values when uncheck , just

I did not test this , but hope this will work for you