【问题标题】:How to submit a form results to a table on another page?如何将表单结果提交到另一个页面上的表格?
【发布时间】:2014-09-15 01:55:16
【问题描述】:

我想知道如何在我网站的一个页面上提交表单,然后将表单信息发布到我网站另一页面上的表格中。这是要填写的表格页面:

然后这是我希望该数据填充到的页面:

我希望将提交的表单信息发布在表中的相同类别中。例如,在表格中显示“城镇”。然后在第二张图片的表格中显示“城镇”我希望数据是相同的类别并且也有它,因此最近提交的表单位于表格的顶部。这是表单的html代码:

<div align="center">
<form id="dispatch" name="dispatch" method="post" action="index.html">
  <table width="801" height="420" border="1">
    <tr>
      <td align="center">TOWN</td>
      <td><input type="text" name="town" id="town" /></td>
      </tr>
    <tr>
      <td align="center">LOCATION</td>
      <td><input type="text" name="location" id="location" /></td>
      </tr>
    <tr>
      <td align="center">INCIDENT TYPE</td>
      <td><select name="incident_type" size="1" id="incident_type">
        <option selected="selected"></option>
         <option value=\"Fire alarm \"> Fire alarm </option>              <option value=\"Reported structure fire\"> Reported structure fire </option>              <option value=\"Working structure fire\"> Working structure fire </option>              <option value=\"MVA with no injuries\"> MVA with no injuries </option>              <option value=\"MVA with injuries\"> MVA with injuries </option>              <option value=\"MVA with unknown injuries\"> MVA with unknown injuries </option>              <option value=\"Train accident\"> Train accident </option>              <option value=\"Traffic alert\"> Traffic alert </option>              <option value=\"Shooting\"> Shooting </option>              <option value=\"Stabbing\"> Stabbing </option>              <option value=\"Vehicle fire\"> Vehicle fire </option>              <option value=\"Traumatic injury\"> Traumatic injury </option>              <option value=\"PNB\"> PNB </option>              <option value=\"Utility pole\/hazard\"> Utility pole\/hazard </option>              <option value=\"Natural gas investigation\"> Natural gas investigation </option>              <option value=\"Odor investigation\"> Odor investigation </option>              <option value=\"Carbon monoxide poisoning \"> Carbon monoxide poisoning </option>              <option value=\"Brush fire\"> Brush fire </option>              <option value=\"Outside fire\"> Outside fire </option>              <option value=\"Oil spill \"> Oil spill </option>              <option value=\"Armed robbery\"> Armed robbery </option>              <option value=\"Police vehicle chase\"> Police vehicle chase </option>              <option value=\"Bomb threat\"> Bomb threat </option>              <option value=\"Officer injured\"> Officer injured </option>              <option value=\"Aircraft down\"> Aircraft down </option>              <option value=\"Hostage situation \"> Hostage situation </option>              <option value=\"Officer needs help\"> Officer needs help </option>              <option value=\"Water rescue\"> Water rescue </option>              <option value=\"Technical rescue\"> Technical rescue </option>              <option value=\"Haz-Mat incident\"> Haz-Mat incident </option>              <option value=\"Mass casualty\"> Mass casualty </option>              <option value=\"Tornado touchdown\"> Tornado touchdown </option>              <option value=\"Tornado warning \"> Tornado warning </option>              <option value=\"Search and rescue\"> Search and rescue </option> 
        <option>Working Fire</option>
                <option>Working Still Alarm</option>
                <option>Full Still</option>
                <option>Code 3</option>
                <option>Code 4</option>
                <option>General Alarm</option>
                <option>Special Alarm</option>
                <option>Box Alarm</option>
                <option>Box Alarm COQ Only</option>
                <option>Box Alarm Manpower Only</option>
                <option>Box Alarm Engines Only</option>
                <option>Box Alarm Tenders Only</option>
                <option>Mayday Response</option>
                <option>2nd Alarm</option>
                <option>2nd Alarm COQ Only</option>
                <option>2nd Alarm Manpower Only</option>
                <option>2nd Alarm Engines Only</option>
                <option>2nd Alarm Tenders Only</option>
                <option>3rd Alarm</option>
                <option>3rd Alarm COQ Only</option>
                <option>3rd Alarm Manpower Only</option>
                <option>3rd Alarm Engines Only</option>
                <option>3rd Alarm Tenders Only</option>
                <option>4th Alarm</option>
                <option>4th Alarm COQ Only</option>
                <option>4th Alarm Manpower Only</option>
                <option>4th Alarm Engines Only</option>
                <option>4th Alarm Tenders Only</option>
                <option>5th Alarm</option>
                <option>5th Alarm COQ Only</option>
                <option>5th Alarm Manpower Only</option>
                <option>5th Alarm Engines Only</option>
                <option>5th Alarm Tenders Only</option>
                <option>5th + 1 Special</option>
                <option>5th + 2 Specials</option>
                <option>5th + 3 Specials</option>
                <option>5th + 4 Specials</option>
                <option>6th Alarm Tenders Only</option>
                <option>Interdivisional Box</option>
                <option>Brush Box Alarm</option>
                <option>2nd Alarm Brush Box</option>
                <option>3rd Alarm Brush Box</option>
                <option>4th Alarm Brush Box</option>
                <option>5th Alarm Brush Box</option>
                <option value="Interdiv Brush Box">Interdivisional Brush</option>
                <option>Disaster Box Alarm</option>
                <option>2nd Alarm Disaster Box</option>
                <option>3rd Alarm Disaster Box</option>
                <option>4th Alarm Disaster Box</option>
                <option>5th Alarm Disaster Box</option>
                <option value="Interdivisional Disaster Box">Interdiv Disaster Box</option>
                <option value="Dive Box Alarm - Advisors Only">Dive Box Alarm - Adv</option>
                <option>Dive Box Alarm</option>
                <option>2nd Alarm Dive Box</option>
                <option>Interdivisional Dive Box</option>
                <option>EMS Box Alarm</option>
                <option>2nd Alarm EMS Box</option>
                <option>3rd Alarm EMS Box</option>
                <option>4th Alarm EMS Box</option>
                <option>5th Alarm EMS Box</option>
                <option value="Interdivisional EMS Box Alarm">Interdiv EMS Box</option>
                <option value="2nd Alarm Interdivisional EMS Box">2nd Alm Interdiv EMS Box</option>
                <option value="3rd Alarm Interdivisional EMS Box">3rd Alm Interdiv EMS Box</option>
                <option>Life Safety Box Alarm</option>
                <option>2nd Alarm Life Safety Box</option>
                <option>3rd Alarm Life Safety Box</option>
                <option>4th Alarm Life Safety Box</option>
                <option>5th Alarm Life Safety Box</option>
                <option value="Interdivisional Life Safety Box Alarm">Interdiv Life Safety Box</option>
                <option value="HazMat Response">HazMat (Non-Box)</option>
                <option value="HazMat Box - Advisors Only">HazMat Box - Adv Only</option>
                <option>HazMat Box Alarm</option>
                <option value="HazMat Box Alarm 2nd Team">Hazmat Bx Alm 2nd Team</option>
                <option value="2nd Alarm HazMat Box">2nd Alarm HazMat Box</option>
                <option value="Interdivisional HazMat Box">Interdiv HazMat Box</option>
                <option value="Investigators Box - Advisors Only">Invest Box - Adv Only</option>
                <option>Investigators Box Alarm</option>
                <option value="2nd Alarm Investigators Box">2nd Alarm Invest Box</option>
                <option value="Interdivisional Investigators Box">Interdiv Invest Box</option>
                <option value="Tech Rescue Box - Advisors Only">Tech Resc Box-Adv Only</option>
                <option>Tech Rescue Box</option>
                <option value="Interdivisional Tech Rescue Box">Interdiv Tech Resc Box</option>
                <option>Tender Box Alarm</option>
                <option>2nd Alarm Tender Box</option>
                <option>3rd Alarm Tender Box</option>
                <option>4th Alarm Tender Box</option>
                <option>5th Alarm Tender Box</option>
                <option>6th Alarm Tender Box</option>
                <option>Tanker Plan 1 (IN)</option>
                <option>Tanker Plan 2 (IN)</option>
                <option>Tanker Plan 3 (IN)</option>
                <option>Interdivisional Tender Box</option>
                <option>Statewide Response</option>
                <option>Injured Firefighter</option>
                <option>Injured Firefighters</option>
                <option>FF LODD</option>
                <option>PO LODD</option>
      </select></td>
      </tr>
    <tr>
      <td align="center">TIME/DATE</td>
      <td><input name="time_date" type="text" id="time_date" maxlength="60" /></td>
      </tr>
    <tr>
      <td width="138" align="center"><p>ADMIN </p></td>
      <td width="228"><input name="admin" type="text" id="admin" size="4" maxlength="4" /></td>
      </tr>
  </table>
  <p>
    <input type="submit" name="button" id="button" value="Submit" /> 
      <input type="reset" name="button2" id="button2" value="Reset" />
  </p>
</form>
</div>

这是表格:

    <div align="center">
  <form action="" method="get">
  <table width="968" height="248" border="1" align="center" cellpadding="10" cellspacing="0" rules="rows" id="incidents" style="color:#333333;border-collapse:collapse;text-align:left;">
    <tr style="color:White;background-color:#5D7B9D;font-weight:bold;font-style:italic;">
      <th scope="col">TOWN</th>
      <th scope="col">LOCATION</th>
      <th scope="col">INCIDENT TYPE</th>
      <th scope="col">TIME/DATE</th>
      <th scope="col">ADMIN</th>
    </tr>
    <tr style="color:#333333;background-color:#F7F6F3;font-weight:bold;">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr style="color:#284775;background-color:White;font-weight:bold;">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr style="color:#333333;background-color:#F7F6F3;font-weight:bold;">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr style="color:#333333;background-color:#F7F6F3;font-weight:bold;">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr style="color:#333333;background-color:#F7F6F3;font-weight:bold;">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>

【问题讨论】:

  • 表单张贴到他们的action 告诉他们的地方。您是否想实现不同的目标?
  • 您将需要在表中添加一些 PHP 代码(因为您已标记 PHP)才能显示数据。但是,查看您的表格时,您需要多行,因此您可能希望保留已发布数据的副本(作为某个文件或数据库中的文件)。
  • 我想要类似这个人问的东西:stackoverflow.com/questions/7555796/…
  • Turnerj,有没有办法在 PHP 中做到这一点?
  • 您还需要这方面的帮助吗?/

标签: javascript php forms html-table


【解决方案1】:

我认为你不知道任何 php 代码,所以这里是将你的数据发布到下一页的代码,但你需要安装 wamp 或 xampp 才能运行 php 代码。

<form id="dispatch" name="dispatch" method="post" action="nextpage.php">

在您的 nextpage.php 中使用此代码将其插入到您的表格中

<?php
//because you use method post you can access your form value by using this code
$town = $_POST['town'];
$location = $_POST['location'];
$time= $_POST['incident_type'];
$admin = $_POST['admin'];
?>

  <div align="center">
  <form action="" method="get">
 <table width="968" height="248" border="1" align="center" cellpadding="10" cellspacing="0"  rules="rows" id="incidents" style="color:#333333;border-collapse:collapse;text-align:left;">
  <tr style="color:White;background-color:#5D7B9D;font-weight:bold;font-style:italic;">
  <th scope="col">TOWN</th>
  <th scope="col">LOCATION</th>
  <th scope="col">INCIDENT TYPE</th>
  <th scope="col">TIME/DATE</th>
  <th scope="col">ADMIN</th>
  </tr>
  <tr style="color:#333333;background-color:#F7F6F3;font-weight:bold;">
  <?php
      echo "<td>". $town."</td>";
      echo "<td>". $location."</td>";
      echo "<td>". $time."</td>";
      echo "<td>". $admin ."</td>";
   ?>
  </tr>
    </table>
  </form>

【讨论】:

  • 谢谢,但是我的表单页面是 dispatch.html,然后我的表格页面是 index.html。那我该怎么办?
  • 如果你的扩展是html就不能使用php代码,将你的第二页重命名为index.php或者nextpage.php
  • 等等,你有 wamp server 还是 xampp server?
  • 是的,我确实安装了 WAMP 服务器。我会告诉你它是如何工作的。
  • 我应该把上面的第二段代码放在哪里?
【解决方案2】:

最可靠的方法是将数据从第一页插入数据库,这样您就可以查询它以在另一页中获取所需的数据。

如果您不介意持久化数据,您的其他选择也是使用会话。

【讨论】:

  • 我不想让他们将数据直接插入表中。有没有办法让它从表单页面提交并让它自动将表单数据提交到表格中?
  • 是的,有可能,您可以将帖子值带入会话。或者您可以直接使用 post 数组来填充您的表格
  • 你能给我代码并告诉我该怎么做吗?我是这个东西的初学者。谢谢!
  • 该死的我希望,但我在我的手机上查看应该做的代码层答案。如果不告诉我
  • 如果你不介意,只要你有时间或者有时间,请给我它的代码。将不胜感激!谢谢。
猜你喜欢
  • 2021-11-13
  • 2020-05-10
  • 2014-08-29
  • 2020-10-22
  • 1970-01-01
  • 1970-01-01
  • 2019-09-04
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多