javascript — элементы заменяются вместо добавления в поле списка параметров HTML из-за перезагрузки страницы при получении данных из базы данных
У меня есть это веб-приложение, написанное на HTML / CSS, PHP и JavaScript. Приведенный ниже код просто получает ввод от пользователя (ввод серийного номера / штрих-кода).
Затем пользовательский ввод используется для поиска в базе данных, если существует существующий элемент с этим серийным номером / штрих-кодом.
Если в базе данных есть элемент с введенным пользователем вводом (то есть введенный штрих-код / серийный номер), имя элемента выбирается и добавляется в список HTML-списка.
Однако моя проблема заключается в том, что я могу успешно ввести свой первый ввод, и имя элемента возвращается и добавляется в список параметров HTML. Но когда я ввожу второй ввод, веб-страница перезагружается, и первый ввод, изначально введенный в список параметров HTML, исчезает. Таким образом, второй вход является единственным элементом в списке.
Я ожидаю, что каждый ввод будет добавлен в список, не заменяя предыдущий ввод в результате перезагрузки страницы.
Пожалуйста, у кого-нибудь есть идеи, как этого избежать или исправить эту проблему.
Единственные языки веб-разработки, с которыми я знаком, это HTML / CSS, PHP и немного Javascript.
Вот мой полный код ниже:
<?php
//Connect to Database
include 'init.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="CSS/mainoperations.css">
</head>
<body>
<div class="header">
</div>
<div id="container">
<div id="leftcolumn">
<ul>
<h1>PartsCribber</h1>
<li><a class="active" href="mainoperations.php">Main Operations</a></li>
<li><a href="vieweditprofile.php">Profile Settings</a></li>
<li><a href="#contact">Change Password</a></li>
<li><a href="#about">Student Cart</a></li>
<li><a href="#about">Student Possession</a></li>
<li><a href="#about">Update Inventory</a></li>
<li><a href="#about">Log Out</a></li>
</ul>
</div>
<div id="rightcolumn">
<form method="post" action="mainoperations.php">
<div class="title">
<h3>
<?php echo "Main Operations (1/3)"; ?>
</h3>
</div>
<!-- notification message -->
<?php if (isset($_SESSION['success'])) : ?>
<div class="error success">
<h3>
<?php
echo $_SESSION['success'];
unset($_SESSION['success']);
?>
</h3>
</div>
<?php endif ?>
<?php include('errors.php'); ?>
<div class="input-group">
<label>Scan Barcode:</label>
<input type="text" id="barcode" name="barcode">
</div>
<div class="input-group">
<button class="btn" name="insert">Enter</button>
</div>
<div class="input-group">
<button class="btn" onclick="deleteValue(); return false;">Delete Item</button>
</div>
<select id="myselect" size="15" class="select">
</select>
</form>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
<?php
if (!isset($_SESSION['user_id']))
{
$_SESSION['msg'] = "You must log in first";
header('location: login.php');
}
if (isset($_POST['insert']))
{
$barcode = mysqli_real_escape_string($db, $_POST['barcode']);
$query = "SELECT * FROM item_info WHERE serial_no = '$barcode'";
$results = mysqli_query($db, $query);
if (mysqli_num_rows($results) == 1)
{
$row = mysqli_fetch_array($results);
$itemname = $row[1];
?>
<script type="text/javascript">
insertValue();
function insertValue()
{
var x = document.getElementById("myselect");
var option = document.createElement("option");
option.text = "<?php echo $itemname; ?>";
if(option.text.length == 0)
{
//Do Nothing.
}
else
{
option.className = ('option');
x.size = "8";
x.add(option);
document.getElementById("barcode").value = "";
}
}
function deleteValue()
{
var x = document.getElementById("myselect");
x.size = "8";
x.remove(x.selectedIndex);
}
</script>
<?php
}
else
{
array_push($errors, "Unable to find an item with that Serial Number");
}
}
?>
Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …