Прежде всего вы должны привести в порядок свой HTML. Вы не закрываете свои теги (теги form и input), и в вашей таблице нет строк. Ваша страница выглядит очень странно, когда я ее открываю.
Я очистил ваш html и добавил код javascript. Код использует jQuery. Если форма отправлена, обработчик вернет false, что предотвращает отправку формы. В то же время (асинхронный) ajax-запрос запускается и нацеливается на ваш php-файл. Он содержит входные данные в виде POST / GET данных в зависимости от атрибута method формы. Обратные вызовы success и error выполняются, если ajax завершен.
Примечание : Это, очевидно, здесь не работает, потому что нет insert.php.
Также вам нужно изменить insert.php. Не устанавливайте новый location -заголовок. Это испортит запрос AJAX. Просто распечатайте сообщение об ошибке или сообщение об успехе без перенаправления.
$(document).ready(function(){
$('form').on('submit', function(){
var data_array = $(this).serializeArray();
var data = {};
var method = $(this).attr('method');
var action = $(this).attr('action');
if(typeof method != 'string'){
method = "POST";
}
if(typeof action != 'string'){
action = window.location.href;
}
for(var i = 0; i < data_array.length; i++){
data[data_array[i]["name"]] = data_array[i]["value"];
}
console.log(data);
$.ajax(action, {
data: data,
// dataType: "html",
success: function(rtrn){
alert("Data inserted!");
},
error: function(){
alert("Error, could not reach server '" + action + "'!");
}
});
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3> *All fields must be populated </h3>
<form action="insert.php" method="post">
<table style="width: 100%;">
<tr>
<td>Lock Number</td>
<td>
<input type="text" name="lock_number" id="locknumber" required="required" />
</td>
</tr>
<tr>
<td>Equipment # or description:</td>
<td>
<input type="text" name="equipment_number" id="equipmentnumber" required="required" />
</td>
</tr>
<tr>
<td>Work Order #:</td>
<td>
<input type="text" name="work_order" id="workorder" required="required" />
</td>
</tr>
<tr>
<td>Date OUT::</td>
<td>
<input type="date" name="date_out" id="dateout" required="required" />
</td>
</tr>
<tr>
<td>Supervisor Inital OUT:</td>
<td>
<input type="text" name="supervisor_out" id="supervisorout" required="required" />
</td>
</tr>
<tr>
<td>Comments/Tradesmen:</td>
<td>
<input type="text" name="comments_out" id="commentsout" required="required" />
</td>
</tr>
</table>
<input type="submit" value="Submit" />
<br />
<br />
<a href="http://152.116.203.115/lockcheckin2.php" target="_blank">Lock Check In Form</a>
<a href="http://152.116.203.115/dataout.php" target="_blank">Lock Check Out History</a>
</form>
Редактировать: Что этот код (в основном) делает
Ваш вопрос не является основным вопросом. Ваш опубликованный код - это "общий" способ работы веб-страниц и форм. Вы можете представить себе так:
- Пользователь находится на вашем бланке заявки на регистрацию блокировки в отделении учреждения страница
- Пользователь вводит значения для ваших входов и нажимает
submit
- Клиент (= Пользователь) собирает данные во входах и находит в
input.php
-
input.php обрабатывает ваши входные данные
-
input.php генерирует новый вывод html
Это означает, что если вы используете данные в input.php, ваш пользователь должен быть на веб-странице input.php! Нет абсолютно никакого способа выполнить файл php, если пользователь не открывает его. Таким образом, ваш пользователь должен иметь на странице input.php.
Решение, которое я предложил, использует ajax . Вы можете думать об этом как о «клоне» вашего пользователя. Он открывает страницу input.php в фоновом режиме. Вы не увидите html-вывод input.php (в визуализированном DOM). Итак, процедура теперь:
- Пользователь находится на вашем бланке заявки на регистрацию блокировки в отделении учреждения страница
- Пользователь вводит значения для ваших входов и нажимает на
submit
- Открывается ajax-соединение, «создается ваш клон»
- ajax («ваш клон») получает доступ к
input.php с данными всех входов, ваш пользователь остается на бланке заявки для проверки ведомственной блокировки страница
-
input.php обрабатывает ваши входные данные
-
input.php генерирует новый вывод html
- ajax ("пользовательский клон") получает выходные данные и отправляет их вашему реальному пользователю
- Реальный пользователь получает результат
input.php от ajax, он все еще находится на бланке заявки на проверку ведомственной блокировки объектов страница
Этот код не является основным HTML-кодом. Если вы все еще учитесь, не используйте этот код.
Кодовое предложение
Для вас, как для новичка, я предлагаю другой код. Измените ваш input.php, чтобы он мог обрабатывать данные, а также отображать правильный HTML. Следующий код генерирует HTML, который вы хотите. Кроме того, он проверяет, была ли отправлена форма.
Если пользователь нажмет на кнопку отправки, форма перезагрузит текущую страницу. $_REQUEST заполнены, поэтому значения будут сохранены. Затем выводится сообщение об успехе или ошибке. После этого ваш оригинальный HTML будет сгенерирован снова, поэтому пользователь увидит ту же страницу с сообщением об успехе. Если вы хотите иметь другую файловую структуру, взгляните на php's require function .
Примечание : Я немного изменил ваш php-код. Многие фрагменты кода, которые я использовал, являются личным вкусом. Мне нравится иметь операторы вставки в массиве, потому что, на мой взгляд, это очень чистый код. Также я по-своему исправил твои новые линии и стиль табуляции.
Также я удалил date_in и supervisor_in, потому что нет никаких полей ввода, определяющих эти значения. Вы тоже должны это исправить.
Следующий код должен работать для вас:
<!DOCTYPE html>
<html>
<head>
<link href="lockproject.css" type="text/css" rel="stylesheet">
<title>Locks Out Form</title>
</head>
<body>
<?php
// check if the form is being submitted
if( isset($_REQUEST['lock_number']) && isset($_REQUEST['equipment_number']) &&
isset($_REQUEST['work_order']) && isset($_REQUEST['date_out']) &&
// isset($_REQUEST['date_in']) && isset($_REQUEST['supervisor_in']) &&
isset($_REQUEST['supervisor_out']) && isset($_REQUEST['comments_out'])){
// opening connection
$link = mysqli_connect("localhost", "nick", "ramon", "lockout");
// Check connection
if($link === false){
die("ERROR: Could not connect. ".mysqli_connect_error());
}
// prepare insert statement, the indices are the column names of your table, the values are
// the corresponding values to insert
$insert = array(
'lock_number' => mysqli_real_escape_string($link, $_REQUEST['lock_number']),
'equipment_number' => mysqli_real_escape_string($link, $_REQUEST['equipment_number']),
'work_order' => mysqli_real_escape_string($link, $_REQUEST['work_order']),
'date_out' => mysqli_real_escape_string($link, $_REQUEST['date_out']),
// 'date_in' => mysqli_real_escape_string($link, $_REQUEST['date_in']),
// 'supervisor_in' => mysqli_real_escape_string($link, $_REQUEST['supervisor_in']),
'supervisor_out' => mysqli_real_escape_string($link, $_REQUEST['supervisor_out']),
'comments_out' => mysqli_real_escape_string($link, $_REQUEST['comments_out'])
);
// add quotes
$insert = array_map(function($value){
return "'".$value."'";
}, $insert);
// prepare sql
$sql =
"INSERT INTO `form` (".implode(", ", array_keys($insert)).") ".
"VALUES (".implode(", ", $insert).");";
// print success/error message
if(mysqli_query($link, $sql)){
echo "Submitted successfully.";
}
else{
echo "ERROR: Could not execute query. ".mysqli_error($link);
}
// close connection
mysqli_close($link);
}
?>
<h1>Facilities Departmental Lock Checkout Entry Form </h1>
<div>*All fields must be populated</div>
<form method="post">
<table style="width: 100%;">
<tr>
<td>Lock Number</td>
<td>
<input type="text" name="lock_number" id="locknumber" required="required" />
</td>
</tr>
<tr>
<td>Equipment # or description:</td>
<td>
<input type="text" name="equipment_number" id="equipmentnumber" required="required" />
</td>
</tr>
<tr>
<td>Work Order #:</td>
<td>
<input type="text" name="work_order" id="workorder" required="required" />
</td>
</tr>
<tr>
<td>Date OUT::</td>
<td>
<input type="date" name="date_out" id="dateout" required="required" />
</td>
</tr>
<tr>
<td>Supervisor Inital OUT:</td>
<td>
<input type="text" name="supervisor_out" id="supervisorout" required="required" />
</td>
</tr>
<tr>
<td>Comments/Tradesmen:</td>
<td>
<input type="text" name="comments_out" id="commentsout" required="required" />
</td>
</tr>
</table>
<input type="submit" value="Submit" />
<br />
<br />
<a href="lockcheckin2.php" target="_blank">Lock Check In Form</a>
<a href="dataout.php" target="_blank">Lock Check Out History</a>
</form>
</body>
</html>