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

Posted

技术标签:

【中文标题】将数据从一个表单域传递到另一个表单域【英文标题】: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!');... 这样您就可以开始消除选项。告诉我进展如何。

以上是关于将数据从一个表单域传递到另一个表单域的主要内容,如果未能解决你的问题,请参考以下文章

将 ASP.Net 表单数据发布到另一个页面

如何将变量从一个应用程序域传递到另一个应用程序域

将来自服务器的数据从一个页面传递到另一个页面,而不使用表单

使用 Microsoft Access 中的两个表单将参数从一个组合框传递到另一个组合框

Django 将选定对象从表单传递到另一个表单

无法将文本区域值传递给我的表单