I'm trying to call a javascript function inside a php code. However, it doesn't just work out. I've tested countless number of things to figure out where exactly the problem is, and I don't see any problem with the things I've tried it doesn't just seem to respond.
Here's the FULL code: (I'll explain below)
<?php
//Connect to Database
include 'init.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">
var one = "<?php echo $itemname; ?>";
insertValue(one);
</script>
<?php
}
else
{
array_push($errors, "Unable to find an item with that Serial Number");
}
}
?>
<!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>
<script>
function insertValue(itemname)
{
var x = document.getElementById("myselect");
var option = document.createElement("option");
option.text = 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>
</body>
</html>
What am I trying to do? My code is supposed to take the string entered into the html textfield (which is actually supposed to be a barcode/serial number). And search for the item with that serial number in a database and return the item name into a HTML option listbox. I'm 100% sure the correct data is returned. I'm just having issues with calling the javascript function to add the data to the listbox.
My code structure: As soon as the enter button is clicked, and the post data is set:
<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>
I used php to fetch the item name using the entered data. Like so:
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">
var value = "<?php echo $itemname; ?>";
insertValue(value);
</script>
<?php
}
else
{
array_push($errors, "Unable to find an item with that Serial Number");
}
}
As you can see where I called the javascript function above, like this:
<script type="text/javascript">
var value = "<?php echo $itemname; ?>";
insertValue(value);
</script>
My actual javascript function is structured like this:
<script>
function insertValue(itemname)
{
var x = document.getElementById("myselect");
var option = document.createElement("option");
option.text = 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>
So my problem is:
The data is entered in the textfield, the correct item name is returned from the database, but for some unknown reason is unable to be shown in the option list box.
I don't even know where to include "return false;" Doesn't seem to work anywhere either.
Please help. Thanks.