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":

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

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

<?php
//Include the Class Autoloader
include("includes/class-autoload.inc.php");
//Get database (DBConnect) connection
$database = new DBConnect();
$db = $database->connect();

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


?>

<!DOCTYPE html>
<html lang="en">
<head>
    <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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="css/stylesheet.css">
    
    <!--jQuery-->
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="scripts/script.js"></script>
    <script><?php include("scripts/script.js"); ?></script>
</head>
<body>
    
    <header>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <h1>Product Add</h1>
                <ul class="navbar-right">
                    <li><button>Save</button></li>
                    <li><button><a href="index.php">Cancel</a></button></li>
                </ul>
            </div>
        </nav>
    </header>

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

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

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

                <div>
                <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>
                    </select>
                </div>
                <div class="error">
                    <?php echo $errors["type"]?? ""?> 
                </div>

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

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

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

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

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

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

</html>

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

<head>
    ...
    <!--jQuery-->
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="scripts/script.js"></script>

</head>

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

Leave a Comment