将数据从一个表单域传递到另一个表单域

Posted 2023-05-09

【中文标题】将数据从一个表单域传递到另一个表单域

【英文标题】：Passing data from one form field to another

【发布时间】：2015-12-26 01:45:02

【问题描述】：

我正在尝试在 Wordpress 网站上自定义表单。此表单有两个字段，它们将共享相同的确切数据（帖子标题和位置）。而不是让用户在两个不同的字段中输入相同的信息，我正在寻找一种方法让用户在位置字段中输入位置，然后将相同的输入传递到帖子标题字段（将被隐藏) 在提交表单之前。

我对此进行了一些研究，似乎需要 jquery 来实现这一点。我对jquery一无所知，所以我需要澄清一下如何做到这一点。如果可以，请解释如何在页面中实现 jquery 代码。我是否必须创建一个 jquery 文件，然后在此页面上调用该文件？正如我所说，我对 jquery 一无所知。谢谢。

注意：与自动完成下拉菜单一起使用的 jquery 事件存在问题。我尝试过的所有事件都只是传递我手动输入的文本。当我点击自动完成下拉建议时，我没有手动输入的任何文本都不会传递到第二个字段。

这是我正在使用的当前代码：

<input type="text" id="location" name="location" tabindex="17" data-geo="formatted_address" placeholder="<?php echo esc_attr__( 'Provide full street address', APP_TD ); ?>" class="required" value="<?php echo esc_attr( $project->_hrb_location ); ?>" />
    <input name="post_title" type="hidden" value="<?php echo esc_attr( $project->_hrb_location ); ?>" class="required" />

【问题讨论】：

所以你想要的只是让Post Title字段具有与Location首先输入的相同值？

是的，无需输入两次相同的内容。

这似乎是 jquery 事件，这就是问题所在，我尝试了很多，包括 onclick、onsubmit、onblur...关于自动完成下拉菜单的任何想法。现在我只得到我手动输入的内容以传递到第二个表单字段。

【参考方案1】：

<script>
$( document ).ready(function() 
   $('#location').on("keyup", function()
     $("input[name=post_title]").val($('#location').val());
   );
);
</script>

在每个keyup 上，将添加 ID 为 location 的输入值并将其“放置”在名称为 post_title 的隐藏输入中

【讨论】：

我将此添加到我的 header.php 文件中。当我提交表单时，我收到一条错误消息，显示“没有帖子标题”。

除了将该脚本添加到我的标题之外，我还需要做些什么吗？我可以按原样使用我的 php 代码，还是我也需要对其进行更改？

您的隐藏表单是通过 ajax 加载的吗？

【参考方案2】：

jQuery 是一个 javascript 库，包含一些简单的基础知识和许多高级主题。以下是与您的问题相关的几点：

您可以像 CSS 选择器一样通过 DOM 选择元素。在这里，您选择 ID 为“位置”的每个元素

var input = $("#location");

您可以将事件绑定到元素，例如点击、模糊、鼠标悬停、加载等。

1234563

请参阅我的小提琴作为如何绑定模糊事件的示例（删除元素上的焦点... IE 选项卡关闭文本输入）。

http://jsfiddle.net/2maw8xo4/1/

var input = $("#location");
var showme = $("#showme");

$(input).on("blur", function() 
  showme.val($(this).val());
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="location" name="location" tabindex="17" data-geo="formatted_address" placeholder="Provide full street address" class="required" value="" />
<input type="text" id="showme" disabled />

【讨论】：

我应该把它放在表单页面的什么地方？ 'var 输入 = $("#location"); var showme = $("#showme"); $(input).on("blur", function() showme.val($(this).val()); );'

你可以把它放在正文末尾的脚本标签中，它会运行，但我会将 JavaScript 包装在文档就绪标签中： $( document ).ready(function() //代码在这里 );

这可行，但 googleapis 脚本破坏了我在页面上的其他 jquery。

【参考方案3】：

这是我在 WordPress 中的做法：

第一种形式 - 查找 name="YourNameValueHere" 变量并调用“GET”请求而不是“POST”。

<form class="mailform" method="get" name="grab" action="Your-URL-here-or-file.php"> <fieldset> <label > <input type="text" name="first_name" /> </label> <label > <input type="text" name="last_name" /> </label> <label> <input type="text" name="email_address" /> </label> <label> <input type="text" name="phone"/> </label> <div class="controls-submit"> <button class="btn-large" type="submit">Get started now!</button> </div> </fieldset> </form>

Form #2 在输入字段中吐出信息

这些是通过“GET”请求在第一个表单中获取名称输入字段的变量。

<?php $firstName = $_GET['first_name']; $lastName = $_GET["last_name"]; $emailAddress = $_GET["email_address"]; $phoneNumber = $_GET["phone"]; ?> <form method="POST"> <p>First Name*</p> <input required type="text" name="first_name" value="<?php echo $firstName; ?>"> <p>Last Name*</p> <input required type="text" name="last_name" value="<?php echo $lastName; ?>"> <p>email*</p> <input required type="email_address" name="email_address" value="<?php echo $emailAddress; ?>"> <p>Phone*</p> <input required type="phone" name="phone" value="<?php echo $phoneNumber; ?> "> <button>Submit</button> </form>

【参考方案4】：

此 JavaScript 函数将采用在字段 Location 中输入的值，并将相应地发布到字段 Post_ID。 JS：

<script>       
 var swap_val = function  (val)
            var input = document.getElementById("post_title");
            input.value = val;
        
</script>

html：

Enter Location to see it in the Post ID:
<input type="text" id="location" name="location" tabindex="17" data-geo="formatted_address"  
class="required" value="" onkeyup='swap_val(this.value);'/>
Post ID:
<input name="post_title"  id = "post_title" type="text" value="" class="required" />

A Pen

【讨论】：

这个解决方案非常接近工作。我现在唯一遇到的问题是，只有我手动输入的内容才会被转移到标题字段。位置字段是一个自动完成字段。因此，如果我开始输入地址，然后单击自动完成建议，则只有我手动输入的内容才会传递给标题。

@JohnThornton 是的，无需输入两次相同的内容。这不是在做同样的事情吗？

例如，如果我输入位置 123...然后从自动完成下拉菜单中选择 123 Main Street，那么只有 123 被传递到标题字段...因为这就是我的全部手动输入。自动完成填充的任何内容都不会传递到标题字段。在下面来自 Alvin 的回答中提到了“模糊”事件处理程序。你能把它纳入你给我的建议吗？还是有其他方法可以让您的代码传递整个地址（包括自动完成）？

我尝试将 onkeyup 更改为 onblur 和 onchange，但都没有成功。我仍然只能让我实际输入的字符通过。

经过反复试验，我能够通过将 onkeyup 换成 onfocusout 来使这个解决方案正常工作。

【参考方案5】：

您可以使用几个不同的事件处理程序来轻松实现这一点：

http://jsfiddle.net/f84shzxu/

可以要求事件处理程序在不同的事件上执行，其中两个包括：

1) blur - 当前元素失去焦点之后。

2) keyup - 按下按钮后

该示例包括这两种方法。

事件处理程序的基本结构是：

// On 'blur' will update when you click off the field
$('#location').on('blur', function()
    $('#location2').val($('#location').val());
);

// On 'keyup' will update after each key press
$('#title').on('keyup', function()
    $('#title2').val($('#title').val());
);

如果您使用自动完成，请尝试使用blur 事件处理程序。

如果有帮助，请告诉我。

【讨论】：

在哪里添加此代码？我是否需要对上述问题中包含的代码进行任何更改？

@JohnThornton - 您可以创建一个新的 javascript 文件，其中包含示例中的我的代码（您可能需要更改 ID 以匹配您的）并像导入任何其他 javascript 文件一样导入它（它将是最好只在必要的页面上导入它）。关于您的原始代码，它应该很好，但我会在第二个输入中添加一个 ID，以便它可以被唯一定位。这有帮助吗？

我无法让它工作。它似乎在小提琴中运作良好。但是当我将它合并到网站时它不起作用。我改变了变量 tp 匹配我的。我什至尝试将脚本包含在页眉和表单页面的正文中。有什么想法吗？

@JohnThornton - 你有任何 console.log 错误吗？您可以通过尝试在header.php... 中添加测试脚本来测试按页面添加脚本的方式... 可能类似于alert('Hello!');... 这样您就可以开始消除选项。告诉我进展如何。