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

Question

我正在尝试在 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" />

Answer 1

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

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

Answer 2

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

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

   var input = $("#location");

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

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

Answer 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>

Answer 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

Answer 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 事件处理程序。

如果有帮助，请告诉我。