【问题标题】:Checkbox Populate Form Fields复选框填充表单字段
【发布时间】:2014-10-08 21:24:36
【问题描述】:

我希望使用复选框来填充表单字段。

示例用户流程:
访客填写运输信息字段,例如姓名、地址、邮编、城市。
访客可以选择复选框来自动填充账单信息字段。
如果用户选中“与帐单信息相同”复选框,则运输信息字段
将输入数据复制/粘贴到帐单信息字段中。

请访问:http://staelements.com/register

J$ 是实现这一目标的最佳方式吗?
请告诉我是否有更好的解决方案。
感谢您的关注好公民!

【问题讨论】:

    标签: javascript forms checkbox populate auto-populate


    【解决方案1】:

    您可以使用 Jquery 来实现这一点..首先将属性 jquery 库加载到您的项目或页面..

    那么如果你的复选框是这样的

    <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('');
      }
     });
    });
    

    检查js小提琴http://jsfiddle.net/2kt0usfx/

    如果您想在取消选中时删除这些值,只需

    我没有测试这个,但希望这对你有用

    【讨论】:

    • 使用萤火虫,我看到脚本正在加载。我专注于在复选框检查时将“您的姓名”复制到账单信息“姓名”。我了解您的代码布局,但它不起作用。谢谢你的尝试!!你真棒!
    • 您是否将正确的 jquery 库加载到您的项目中......然后通过添加警报检查事件是否正常工作,请添加 $(document).ready(function(){ code I have give });检查编辑
    • 你的例子很完美!我的 WordPress 支持的网站正在加载 jQuery v1.11.0,我已经为输入分配了正确的 ID,但仍然损坏!如果您访问我上面的链接,您可以确认您输入的所有内容正在加载。再次感谢
    • 如您所见,在 js fiddle 中,我已经加载了 jQuery 1.11.0,警报来了吗? ?火虫控制台呢? ?是否显示名称值(console.log($name);) 的值?如果您对答案感到满意,请给它评分.. 谢谢
    • 在 CF7 之外它工作得很好!不过,使用 CF7 不会 - 我不明白。 Contact Form 7 插件给我带来了问题。我发布了这个帖子 - wordpress.org/support/topic/…
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-03-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-02-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多