简体   繁体   English

复选框填充表单字段

[英]Checkbox Populate Form Fields

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.com/register 请访问: http//staelements.com/register

动态填充复选框自动表单复制粘贴字段

Is J$ is best way to achive this? J $是实现这一目标的最佳方法吗?
Please tell me if there is a better solution. 请告诉我是否有更好的解决方案。
Thanks for your attention good citizen! 感谢您的关注,好公民!

you can use Jquery to achive this .. first load the propery jquery library to your project or page .. 您可以使用Jquery实现此目标。首先将适当的jquery库加载到您的项目或页面中。

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.net/2kt0usfx/ 检查js小提琴http://jsfiddle.net/2kt0usfx/

if you want to remove the values when uncheck , just 如果要在取消选中时删除值,则

I did not test this , but hope this will work for you 我没有对此进行测试,但希望这对您有用

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM