Javascript function not responding when called inside PHP. (Trying to add items to option listbox)


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:

  1. 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.

  2. I don't even know where to include "return false;" Doesn't seem to work anywhere either.

Please help. Thanks.

Two ways to fix the call to undefined function.

If you have jquery loaded on the page, you can wrap your special insert in a .ready like so:

    ?>
    <script type="text/javascript">
    $(function() {
        var one = "<?php echo $itemname; ?>";
        insertValue(one);
    });
    </script>
    <?php

However if you don't have jquery, a simple solution is you can adjust this part:

    ?>
    <script type="text/javascript">
        var one = "<?php echo $itemname; ?>";
        insertValue(one);
    </script>
    <?php

To assign it into a variable instead:

$scriptstuff = '
    var one = "'. addslashes($itemname) .'";
    insertValue(one);
';

And then further down in your page in your actual <script> block, you echo that variable at the bottom (after the function defines):

<script>
    // all your other javascript and function defines
    <?php echo $scriptstuff;?>
</script>