Separate JS Script does not work with jQuery unless I use PHP Echo in Head Tag

I am a beginner working on a PHP OOP CRUD Project, where I have to dynamically change the form depending on the selection in the dropdown menu. So I am trying to use jQuery for this.

This is what I have in "scripts/script.js":

        $(this).find("option:selected").each(function() {
            var optionValue = $(this).attr("value");
            if(optionValue) {
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else {

This is the code for the page with the form and the dropdown list

//Include the Class Autoloader
//Get database (DBConnect) connection
$database = new DBConnect();
$db = $database->connect();

//Pass connection to objects
$product = new Product($db);


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Add</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="css/stylesheet.css">
    <script src="" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="scripts/script.js"></script>
    <script><?php include("scripts/script.js"); ?></script>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <h1>Product Add</h1>
                <ul class="navbar-right">
                    <li><button><a href="index.php">Cancel</a></button></li>

    <div class="container-fluid">
        <div class="product-add">
            <form action="<?php echo $_SERVER["PHP_SELF"] ?>" method="POST">
                <input type="text" name="sku">
                <div class="error">
                    <?php echo $errors["sku"]?? ""?> 

                <input type="text" name="name">
                <div class="error">
                    <?php echo $errors["name"]?? ""?> 

                <label>Price ($)</label>
                <input type="text" name="price">
                <div class="error">
                    <?php echo $errors["price"]?? ""?> 

                <label>Product Type</label>
                    <select style="width:182px" id="productSelect">
                        <option>Please click to choose</option>
                        <option value="dvd">DVD</option>
                        <option value="book">Book</option>
                        <option value="furniture">Furniture</option>
                <div class="error">
                    <?php echo $errors["type"]?? ""?> 

                <div class = "dvd box">
                    <label for="">Size (MB)</label>
                    <input type="text" name="dvd">
                    <p>Please provide storage size in MB format.</p>

                <div class = "furniture box">
                    <ul style="list-style-type:none" name="furniture">
                            <label for="">Height (CM)</label>
                            <input type="text" name="height">

                            <label for="">Width (CM)</label>
                            <input type="text" name="width">

                            <label for="">Length (CM)</label>
                            <input type="text" name="length">
                    <p>Please provide dimensions in HxWxL format.</p>

                <div class = "book box">
                    <label for="">Weight (KG)</label>
                    <input type="text" name="book">
                    <p>Please provide weight in KG.</p>

    <?php include("templates/footer.php"); ?>


Mine issue is with the following part in the Head Tags:

    <script src="" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="scripts/script.js"></script>


If I write it down like in the above example, then the script in "scripts/script.js" does not load at all.

However, if I add the following code, then it starts working.

<script><?php include("scripts/script.js"); ?></script>

Is this the correct way to do it or should I adjust it without the PHP Include function in the Head Tag?

EDIT If I do not use the PHP Include code, then it shows the form with the divs of all the product types.

Without PHP Include

If I add the PHP Include code, then it hides all the divs correctly and reveals specific ones when you choose from the dropdown menu.

With PHP Include

5 thoughts on “Separate JS Script does not work with jQuery unless I use PHP Echo in Head Tag”

Leave a Comment