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

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

javascript php jquery wordpress forms

Javascript 如何一次提交两个表单，并将第一个表单提交输出值存储为第二个表单值？,javascript,php,jquery,wordpress,forms,Javascript,Php,Jquery,Wordpress,Forms,使用下面的表格1，我在#shortUrlInfo区域内联生成一个goo.gl短url。我想使用生成的第二种形式的短url将其保存在wordpress自定义字段中表格1： <form method="post" action=""> <input style="display:none;" type='text' id='longUrl' value='<?php echo get_post_meta( get_the_ID(), 'longurl', true ); ?

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

表格1：

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

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

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

这是我在这里的第一个问题&我在这里发帖之前已经尽了最大努力寻找答案，但运气不佳。

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

http://localhost/form_sequence_1.php

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

$("#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

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

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

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

以下是文件：

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>

<?php
session_start();
$_SESSION[ "my_text" ] = $_POST[ "my_text" ];
header( "Location: 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>

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


表格一


输入文本

form_sequence_2.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>

<?php
session_start();
$_SESSION[ "my_text" ] = $_POST[ "my_text" ];
header( "Location: 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>

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

form_sequence_3.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>

<?php
session_start();
$_SESSION[ "my_text" ] = $_POST[ "my_text" ];
header( "Location: 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>

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


函数autosendform（）{
setTimeout（“sendform（）”，“3000”）；
}
函数sendform（）{
document.getElementById（“我的表单”）.submit（）；
}
表格二


以前一种形式输入的文本
在HTML中尝试以下操作：
<form (return to script)>
    <input 1>
</form>
    <input 2>

谢谢你的回复。但是，它什么也没做，我给了第二个表单作为元表单的id&第二个表单->第一个输入作为元输入。但当我点击第一个表单的ShortIt按钮时，它只是给了我相同的旧输出。它不是一次提交两个表单，并使用第二个表单将短url存储在post meta中更新：当我在两个表单之间添加上述代码时，它已将页面的整个html复制到第二个表单输入中。您需要两个页面来处理您的发布方法，首先是一个页面将缩短您的url（该页面由url shortner api->您需要使用它组成），然后您的服务器将用数据响应，数据是短url和'$（“#inputID”）.val（data）”将把数据放在第二个表单中，然后是“document.getElementById（“#SecondForm”）.submit（）；'将提交您的表单到您订购表单的任何地方。哦，但我需要在一个页面中使用它。有没有办法，一旦生成短url，它将直接进入post meta并自动保存？我编辑了我的帖子，并尝试解释更多内容，检查它。如果我在第二个表单中输入数据，这两个表单都可以工作，但我想自动提交第二个表单输入和第一个表单输出数据。我正在寻找一个解决方案，如果所有这些过程只需单击一下即可完成。在我删除的答案中，我添加了一个带有JavaScript的自动提交表单。也许这就是您需要的，一个在一秒钟后自动提交的表单。完成了！我编辑了我的答案，并将您的代码与我的代码混合添加。请查看。