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

I am trying to customize a form on a Wordpress site. This form has two fields which will share the same exact data (Post Title and Location). Rather than have the user enter the same information in two different fields, I am looking for a way to have the user enter the Location in the Location field, and then have that same input passed on to the Post Title field (which will be hidden) before the form is submitted.

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

I have done some research on this and it seems like jquery is need to make this happen. I'm not at all knowledgeable with jquery, so I need some clarification on how to make this happen. If you could, please explain how to implement the jquery code into the page. Do I have to create a jquery file and then call that file on this page? As I said, I know nothing about jquery. Thanks.

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

Note: Having issues with jquery event that will work with autocomplete drop down. All events I've tried are only passing text I type manually. When I click on an autocomplete dropdown suggestion, any text I didnt type manually is not passed to the second field.

注意：遇到与自动完成功能相关的jquery事件问题。我尝试的所有事件都只传递我手动输入的文字。当我单击自动完成下拉列表建议时，我手动输入的任何文本都不会传递到第二个字段。

Here is the current code I am working with:

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

<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" />

5 个解决方案

#1

This JavaScript function is going to take the value entered in the field Location and will post to the field Post_ID accordingly.
JS:

此JavaScript函数将获取在“位置”字段中输入的值，并将相应地发布到字段Post_ID。 JS：

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

HTML:

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

一支钢笔

#2

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

On every keyup that will add the value of the input with the id of location and 'place' it inside the hidden input with the name post_title

在每个keyup上，将使用id位置添加输入值，并将其“放置”在名为post_title的隐藏输入中

#3

jQuery is a JavaScript library which has a few simple basics and a lot of advanced topics. Here are a couple relevant points to your question:

jQuery是一个JavaScript库，它有一些简单的基础知识和许多高级主题。以下是您问题的几个相关要点：

You select elements through the DOM just like CSS selectors. Here you select every element with an ID of 'location'

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

var input = $("#location");

var input = $（“＃location”）;
You can bind events to elements, such as on click, blur, mouse over, load, etc.

您可以将事件绑定到元素，例如单击，模糊，鼠标悬停，加载等。
You would include jQuery as a script in the head tag of your HTML, and any scripts you have that require jQuery can be in their own js files or in the HTML/PHP document you're working with.

您可以将jQuery作为脚本添加到HTML的head标记中，并且您需要jQuery的任何脚本都可以在他们自己的js文件中或您正在使用的HTML / PHP文档中。

See my fiddle as an example of how to bind the blur event (focus on an element is removed... IE tab off the text input).

请参阅我的小提琴作为如何绑定模糊事件的示例（关注元素被删除... 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 />

#4

Here's how I did it in WordPress:

这是我在WordPress中的表现：

First form - looking for the name="YourNameValueHere" variable and calling a "GET" request instead of a "POST".

第一种形式 - 寻找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 spits out the info in the input fields

表单＃2吐出输入字段中的信息

These are the vars that grab the name input fields in the first form with "GET" request.

这些是使用“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>

<？php $ firstName = $ _GET ['first_name']; $ lastName = $ _GET [“last_name”]; $ emailAddress = $ _GET [“email_address”]; $ phoneNumber = $ _GET [“phone”]; ？>

#5

You can use a couple of different event handlers to achieve this quite easily:

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

http://jsfiddle.net/f84shzxu/

The event handler can be asked to execute on different events, two of these include:

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

1) blur - After the current element has lost focus.

1）模糊 - 当前元素失去焦点后。

2) keyup - After button presses

2）keyup - 按下按钮后

The example includes both methods.

该示例包括两种方法。

The basic structure of the event handlers are:

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

// 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());
});

If you are using autocomplete, try using the blur event handler.

如果您使用的是自动完成功能，请尝试使用模糊事件处理程序。

Let me know if it helps.

如果有帮助，请告诉我。

#1