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

时间:2015-06-02 15:42:50

标签: javascript php jquery wordpress forms

使用下面的表单1,我在#shortUrlInfo区域内生成一个goo.gl短网址。我想在第二种形式中使用生成的短网址将其保存在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>

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

如何提交第一个表单并将生成的简短网址传递给第二个表单,并在一次点击中在自定义字段中提交该短网址值?

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

这是我在这里的第一个问题&amp;我在发布之前尽力找到答案,但没有运气。

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

在HTML中尝试:

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

然后在脚本中:

get input 1 and input 2

答案 2 :(得分:-1)

下一个示例代码显示了如何实现我认为您想要的(只需单击一下!)。首先说明:一个表单(文件#1)将文本发送到脚本(文件#2),此脚本重定向到另一个表单(文件#3),此表单获取原始文本并自动将其重新发送到另一个脚本(文件#) 4)将其插入数据库,下一张图片更好地解释了它:

enter image description here

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

现在的代码。为了测试下一个代码,您必须创建四个文本文件并为它们指定给定的名称(如果更改文件名,则必须更改表单中的&#34; action&#34;属性), 将我的代码复制粘贴到您的文件中 ,然后打开浏览器并只运行第一个这样的文件):

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的中间,我们需要一个脚本来捕获值。
  • 表单2通过JavaScript中的计时器自动重新发送值。
  • 最后一个脚本获取值并将其插入数据库(不是真实的)。

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

接下来是我的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>