使用jQuery绑定将数据从一个输入复制到另一个[重复]

Question

我的表单上有 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); });

有什么想法吗？ 谢谢

Answer 1

您需要在表单字段上绑定正确的 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);
    });
});