基于另一个表单域更新表单域答案

【问题标题】：Update form field based on another form field基于另一个表单域更新表单域
【发布时间】：2015-12-15 18:37:04
【问题描述】：

我有 2 个表格，每个表格都进行特定的计算。在其中一个表单 (TCO) 上，其中一个输入字段基于另一个表单 (MORTGAGE) 中的输入字段进行填充。

我下面的脚本工作正常--

<script>
    function checkVar()
    {
        if( typeof myglobalvar != 'undefined' && myglobalvar != '' && myglobalvar != 0 && jQuery( '.mclass input' ).length )
        {
            jQuery( '.mclass input' ).val( myglobalvar );
            fbuilderjQuery.fbuilder.calculator.defaultCalc( '#'+jQuery( '.mclass input' ).closest( 'form' ).attr('id') );
        }
        else
        {
            setTimeout( checkVar, 1000 );
        }
    }

    checkVar();
</script>

在第一种形式中，我的计算公式包含在另一个函数中 --

(function(){
    myvar = fbuilderjQuery.fbuilder.calculator.format( ROUND((fieldname17*(fieldname23/100)/fieldname12)), { 'groupingsymbol' : ',' } );
    myglobalvar = myvar;
    return myvar;
})()

一切正常，但是当第一个表单中的值更改或更新时，第二个表单不会更新。

有没有办法在字段更新时添加某种事件/更改侦听器？

编辑：使用以下 cmets 中的建议之一 --

document.getElementById('fieldname22_7').addEventListener("oninput", function(evt) { 
var Mor = document.getElementById('fieldname22_7').value; 
document.getElementById('fieldname47_20').value = Mor; });

但我收到以下错误--

未捕获的类型错误：无法读取 null 的属性“addEventListener”

我还接近吗？

【问题讨论】：

你能用你的代码发布一个 jsfiddle 来查看实际环境中的问题吗？
我不能，因为它是一个表单插件。脚本工作正常，但我只需要稍微修改脚本以不断侦听任何更改，以便在值更改时始终更新输入字段。
您可以将插件或任何脚本添加到托管的 jsfiddle。给我插件的名称，我会做一个小 jsfiddle，稍后你可以修改它。没有例子很难指导你。

标签： javascript jquery forms input onchange

【解决方案1】：

我无法完全理解您的代码，但我认为它可以帮助您。所以。你有两种这样的形式：

<form>
    <input id="input-1">
</form>
<form>
    <input id="input-2">
</form>

如果“input-1”的值改变了，你希望“input-2”也改变。

在这种情况下，您应该使用 'oninput' 事件。所以添加一个事件处理程序到“input-1”

<input id="input-1" oninput="myEventHandler();">

事件处理程序是：

<script>
function myEventHandler() {
    var in = document.getElementById('input-1').value;
    //Check the input
    document.getElementById('input-2').value = in;
}
</script>

希望对你有帮助！

【讨论】：

您好，感谢您的回复，您似乎确实了解我的问题。但是，我无法自己修改输入，它们是由插件生成的。我正在尝试修改上面的脚本，以便它们继续工作，因为它们目前工作正常，我只需要它能够不断地监听任何更新或更改。
好的。但我认为生成的表单及其输入具有 ID。在生成之后，您可以向它们添加事件侦听器： document.getElementById(input_id).addEventListener("oninput", function(evt) { var in = document.getElementById('input-1').value; //检查输入document.getElementById('input-2').value = in; }
你能用你的文件做一个 JSFiddle 吗？如果我能看到您的问题，我可以在短时间内为您提供帮助。
我无法制作 jsfiddle，因为它是一个涉及自定义字段的插件。您之前的评论似乎是我可能需要的。输入字段确实具有分配给它们的 ID、类和名称。在页面加载时，它们都填充有数字数据或“N/A”。我需要第二个输入字段随时更改第一个输入字段。我的原始代码适用于初始页面加载，但如果更改任何内容，它不会。
嘿，你能想到什么吗？