时间戳

首页 > 解决方案 > 使用 jQuery 绑定将数据从一个输入复制到另一个

php - 使用 jQuery 绑定将数据从一个输入复制到另一个

问题描述

我在表单上有 2 个字段需要填写相同的数据。

当您在此处键入时：

<?php $value = (isset($lead) ? $lead->name : ''); ?>
        <?php echo render_input('name','lead_add_edit_name',$value); ?>

这是我们更新的相同信息：

<?php $value = (isset($lead) ? $lead->company : ''); ?>
        <?php echo render_input('company','lead_company',$value); ?>

我找到了这段代码，但是我无法让它工作：

    $("#thing1").bind('input', function () { var stt = $(this).val(); $("#thing2").val(stt); });

有任何想法吗？谢谢

标签： phpjqueryhtmlforms

解决方案

您需要在表单字段上绑定正确的 DOM 事件。

首先，在这种情况下，确定您想要复制数据的两个字段（起点和终点）。在您的情况下，您似乎正在使用一种 PHP 框架（wordpress 主题？），它使用该render_input函数来呈现表单输入字段。

假设该函数的第一个参数代表字段的名称，您将通过以下选择器选择字段：

$("input[name=name]")
$("input[name=company]")

通过了解这一点，您现在需要在更改值时在第一个字段上拦截 DOM 事件，因此正确的事件将是“ change”。正如@Rahul 所说，正确的听众应该是' on'，而不是' bind'。

$("input[name=name]").on('change',function(){...});

最后，当事件触发时，您只需将元素的值复制到另一个元素。

$("input[name=name]").on('change',function(){
    var fieldValue = $(this).val();
    $("input[name=company]").val(fieldValue);
});

最后，正如@Quasimodo 的克隆所说，将所有代码封装在一个文档就绪触发函数中，这样您就可以确定它会在表单字段在页面中实际可用后执行。

$(document).ready(function(){
    $("input[name=name]").on('change',function(){
        var fieldValue = $(this).val();
        $("input[name=company]").val(fieldValue);
    });
});

推荐阅读