Question

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

我已经对此做了一些研究，似乎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的输入值，并且＆＃39;放置＆＃39;它位于名为post_title

的隐藏输入中

Answer 2

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

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

var input = $（“＃location”）;
您可以将事件绑定到元素，例如点击，模糊，鼠标悬停，加载等。
您可以将jQuery作为脚本添加到HTML的head标记中，并且您需要jQuery的任何脚本都可以在他们自己的js文件中或您正在使用的HTML / PHP文档中。

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

表单＃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） memcpy() - 当前元素失去焦点后。

2） blur - 按下按钮后

该示例包括两种方法。

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

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()); });事件处理程序。

如果有帮助，请告诉我。

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

5 个答案: