JavaScript — Как отправить результаты формы в таблицу на другой странице?
Я хотел бы знать, как отправить форму на одной странице моего сайта, а затем разместить информацию о форме в таблице на другой странице моего сайта. Вот страница формы, которая будет заполнена:
а затем вот страница, на которой я хочу заполнить эти данные:
Я хотел бы, чтобы информация формы, которая была представлена, была размещена в тех же категориях в таблице. Например, в форме написано «Город». Затем в таблице на втором рисунке написано «Город», я бы хотел, чтобы данные были одинаковыми категориями, а также чтобы они были так, чтобы самая последняя отправка формы находилась вверху таблицы. Вот форма 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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr style="color:#284775;background-color:White;font-weight:bold;">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr style="color:#333333;background-color:#F7F6F3;font-weight:bold;">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr style="color:#333333;background-color:#F7F6F3;font-weight:bold;">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr style="color:#333333;background-color:#F7F6F3;font-weight:bold;">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
Решение
Я думаю, что вы не знаете никакого кода в 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>
Другие решения
Самый надежный способ — вставить данные в вашу базу данных с первой страницы, чтобы вы могли запросить их, чтобы получить данные, которые вам нужны на другой странице.
Другой вариант — использовать сессию, если вы не против сохранения данных.