如何将表单结果提交到另一页的表格?

问题描述 投票:0回答:2

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

然后这是我想要填写的数据的页面:

我希望提交的表单信息在表中的相同类别中发布。例如,它以“城镇”的形式出现。然后在第二张图片中的表格中显示“Town”我希望数据是相同的类别,并且还有它,所以最近的表单提交位于表的顶部。这是表单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>
javascript php forms html-table
2个回答
0
投票

我想你不知道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>

0
投票

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

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

© www.soinside.com 2019 - 2024. All rights reserved.