如何一次提交两个表单并将第一个表单提交输出值存储为第二个表单值？答案

【问题标题】：How to submit two forms at a time and store first form submit output value as 2nd form value?如何一次提交两个表单并将第一个表单提交输出值存储为第二个表单值？
【发布时间】：2015-06-02 15:42:50
【问题描述】：

使用下面的表格 1，我在 #shortUrlInfo 区域中生成了一个 goo.gl 短网址内联。我想使用生成的第二种形式的短网址将其保存在 wordpress 自定义字段中。

表格一：

<form method="post" action="">
<input style="display:none;" type='text' id='longUrl' value='<?php echo get_post_meta( get_the_ID(), 'longurl', true ); ?>' /> 
<input name="shorturlinput" type="button" id="shortIt" value="Short It" /></form> 

<div class="info" id="shortUrlInfo"></div>

表格2：

<?php
global $post;
if( isset($_POST['submit_meta']) ) {
if( ! empty($_POST['change_meta']) ) {
   update_post_meta($post->ID, 'shorturl', $_POST['change_meta']);
}}
?>


<form method="post" action="">
<input type="text" name="change_meta" value="" />
<input type="submit" name="submit_meta" value="Submit" />
</form>

如何提交第一个表单并将生成的短 url 传递给第二个表单，然后单击在自定义字段中提交该短 url 值？

或者至少，我们如何在第二个表单输入中显示生成的短网址，如果我们点击提交按钮，它应该保存在数据库中。

这是我在这里的第一个问题，我已经尽力找到答案，然后才在这里发帖，但没有运气。

【问题讨论】：

如果我以第二种形式输入数据，那么这两种形式都可以工作，但我想用第一种形式的输出数据自动提交第二种形式的输入。我正在寻找解决方案，如果所有这些过程只需单击一下即可。
在我删除的答案中，我添加了一个带有 JavaScript 的自动提交表单。也许这就是你需要的，一个一秒钟后自动提交的表单。
完成！我编辑了我的答案并将您的代码与我的代码混合添加。看看吧。

标签： javascript php jquery wordpress forms

【解决方案1】：

嗯，它都是 ajax 。您需要使用 ajax 功能将数据发布到将缩短的 url 保存在数据库中的控制器，如何？像这样：

给你的第二个表单 + 你的第二个表单的第一个输入 2 ids

$("#shortIt").click(function(){
  var longUrl = $('#longUrl').val()
  $.post("ur_url.php",
  {
      "longUrl": longUrl // here the url will be sent to your server and server communicates 
      // with goo.gl url shorter by its api and respond you with a variable called data
  },
  function(data, status){ // your server send here the shorturl and this function calls it
      //also this function will be run after the server respond is completed
      $('#inputID').val(data) // data will be set inside the input value
      document.getElementById("#SecondForm").submit(); // your second form submits and your
      // server needs to get the data and save it in your data base
  });
});

只需单击一下即可完成所有操作。

当这个过程正在进行时，你也可以做很多事情。但我希望我能给你一些线索：P

【讨论】：

感谢您的回复。但是，它没有做任何事情，我将 id 作为元表单和 2nd 表单提供给 2nd form -> 1st input 作为元输入。但是当我单击第一种形式的短按钮时，它只是给了我相同的旧输出。它不是一次提交 2 个表单，而是使用第 2 个表单将短 url 存储在 post meta 中。 -- 更新：当我在两个表单之间添加上面的代码时，它已经将页面的整个 html 复制到了第二个表单输入。
您需要 2 个页面来处理您的发布方法，第一个是缩短您的 url 的页面（该页面由 url shortner api 组成 -> 您需要使用它），然后您的服务器将响应数据, data 是短 url 和 '$('#inputID').val(data)' 将把数据放在第二种形式然后 'document.getElementById("#SecondForm").submit();'会将您的表单提交到您订购表单的任何地方。
哦，但我需要它在一个页面中。有没有什么办法，一旦生成短网址，直接去post meta并自动保存？
我编辑了我的帖子，并试图解释更多，检查一下。

【解决方案2】：

在 HTML 中试试这个：

<form (return to script)>
    <input 1>
</form>
    <input 2>

然后在脚本中：

get input 1 and input 2

【讨论】：

【解决方案3】：

下一个示例代码展示了如何实现我认为您想要的（只需单击一下！）。首先解释：一个表单（文件#1）发送一个文本到一个脚本（文件#2），这个脚本重定向到另一个表单（文件#3），这个表单获取原始文本并自动重新发送到另一个脚本（文件# 4）将其插入数据库，下一张图片解释得更好：

如您所见，第一种形式的文本成为第二种形式的值。

现在是代码。为了测试下一个代码，您必须创建四个文本文件并给它们指定名称（如果您更改文件名，则必须更改表单中的“action”属性），复制- 将我的代码粘贴到您的文件中，然后打开浏览器并像这样只运行第一个文件）：

http://localhost/form_sequence_1.php

这些是文件：

form_sequence_1.php

<html>
  <body>
    FORM 1
    <br/>
    <form method="post" action="form_sequence_2.php">
      Enter a text
      <input type="text" name="my_text" />
      <br/>
      <input type="submit" value="Send text" />
    </form>
  </body>
</html>

form_sequence_2.php

<?php
session_start();
$_SESSION[ "my_text" ] = $_POST[ "my_text" ];
header( "Location: form_sequence_3.php" );
?>

form_sequence_3.php

<?php
session_start();
?>
<html>
  <head>
    <script type="text/javascript">
function autosendform () {
setTimeout( "sendform()","3000" );
}
function sendform () {
document.getElementById( "my_form" ).submit();
}
    </script>
  </head>
  <body onload="autosendform();">
    FORM 2
    <br/>
    <form method="post" action="form_sequence_4.php" id="my_form">
      Text entered in previous form
      <input type="text" name="my_text" value="<?php echo $_SESSION[ "my_text" ]; ?>"/>
      <br/>
      <input type="submit" value="AUTOSENDING FORM IN 3 SECONDS" />
    </form>
  </body>
</html>

form_sequence_4.php

<?php
session_start();
echo $_SESSION[ "my_text" ] . " succesfully inserted into database.";
?>

更多解释：

表格 1 中的值将文本发送到表格 2。
在表格 1 和表格 2 的中间，我们需要一个脚本来捕获值。
借助 JavaScript 中的计时器，Form 2 会自动重新发送值。
最后一个脚本获取值并将其插入数据库（不是真的）。

这种方法的优点是脚本允许您对一个或多个值执行许多操作，例如验证或转换。

接下来是你的代码和我的 JavaScript 计时器代码改编：

<?php
global $post;
if ( isset($_POST['submit_meta']) )
   if ( ! empty($_POST['change_meta']) )
      update_post_meta( $post->ID, 'shorturl',$_POST['change_meta'] );
?>

<html>
  <head>
    <script type="text/javascript">
function autosendform () {
setTimeout( "sendform()","3000" );
}
function sendform () {
document.getElementById( "my_form" ).submit();
}
    </script>
  </head>
  <body onload="autosendform();">

<form method="post" action="" id="my_form">
  <input type="text" name="change_meta" value="" />
  <input type="submit" name="submit_meta" value="Submit" />
</form>

  </body>
</html>

【讨论】：