使用文本字段中的值更新隐藏的表单字段答案

【问题标题】：Update hidden form field with value from textfield使用文本字段中的值更新隐藏的表单字段
【发布时间】：2016-12-03 12:01:35
【问题描述】：

我尝试在提交表单时使用在文本字段中输入的值设置隐藏表单字段的值。

我尝试将各种问题的答案结合起来，但最接近的是获取源字段的“id” - 但不是值。

文本字段名称 = wpcf-available-stock 隐藏字段名 = wpcf-total-stock

隐藏字段只需设置为与使用 Jquery 提交的表单上的文本字段相同的值？

我似乎在其他问题中找不到简单的示例...谢谢

【问题讨论】：

$(HIDDEN).val($(INPUT).val()).... 你能分享可执行的 demo/sn-p 或 JSFiddle 吗？ Create a Minimal, Complete, and Verifiable example
为什么说，你需要设置提交？也许您想说，在提交之前和最后一次输入更改之后必须设置它。也许这样会更清楚...... JS是基于事件的，发生的一切都会触发一些事情。我现在放松下来，想象一下在这个令人愉快的环境中“组合”意味着什么。

标签： javascript jquery

【解决方案1】：

要达到预期的结果，请使用以下 HTML：

<input  type="hidden" name="wpcf-total-stock">
<input  type="text" name="wpcf-available-stock" value="test">

JS：

$("input[name='wpcf-available-stock']").on('keyup',function(){
$("input[name='wpcf-total-stock']").val($(this).val());
alert($("input[name='wpcf-total-stock']").val());
});

Codepen-http://codepen.io/nagasai/pen/RRBwjA

【讨论】：

在使用任何建议时出现错误“Uncaught TypeError: $ is not a function”
我已经包含了 jQuery，并且正在使用 jQuery 在同一个表单上进行不同的操作，这可以正常工作。我刚刚尝试将此添加到我的标题中，但我收到了相同的消息：<?php wp_enqueue_script("jquery"); ?>
添加如下
以下代码有效 - 结果不是加载 jQuery，但我需要包含在 jQuery(document).ready(function($) { }); 中我还删除了导致每个字符输入弹出的警报。所以这实现了我所追求的：jQuery(document).ready(function($) { $("input[name='wpcf-available-stock']").on('keyup',function(){ $("input[name='wpcf-total-stock']").val($(this).val()); }); });

【解决方案2】：

首先：为什么要从文本字段中填充隐藏的表单字段？

其次，jQuery 是这样的：

var fieldValue = $('#wpcf-available-stock').val();
$('#wpcf-total-stock').val(fieldValue);

您显然可以将它们链接在一起，但这很干净。

这是一个演示：https://jsfiddle.net/u5Lj8cLz/

【讨论】：

当用户提交表单以保存重复输入时，我将 2 个字段设置为相同的值（因为它们最初总是等于 1 个）。我使用提供的代码收到此错误：Uncaught TypeError: $ is not a function
嗯，你必须包括 jQuery（我认为你会拥有，从你原来的帖子）。如果您最初让它们彼此相等，您总是可以检查服务器上的隐藏字段是否为空 - 然后使用 available 字段中的值。
我已经包含了 jQuery，并且正在使用 jQuery 在同一个表单上进行不同的操作，这可以正常工作。我刚刚尝试将其添加到我的标题中，但我收到了相同的消息：<?php wp_enqueue_script("jquery"); ?>

【解决方案3】：

纯 JavaScript 解决方案。

    updateHidden = function(x) {
      document.querySelector("[name=bar]").value = x;
    }

    <input name="foo" value="" onchange="updateHidden(this.value)" type="text">
    <input name="bar" value="sometext" type="hidden">

更新

updateHidden = function() {

document.querySelector("[name=bar]").value = document.querySelector("[name=foo]").value;
}


document.querySelector("[name=foo]").addEventListener("change", updateHidden);

/*
or, 
document.querySelector("[name=foo]").addEventListener("keyup", updateHidden);
*/

        <input name="foo" type="text">
        <input name="bar" type="hidden">

【讨论】：

表单字段是使用 Wordpress 简码生成的，所以我不能使用“onchange”。我需要使用表单 id 进行引用。