Separate JS Script does not work with jQuery unless I use PHP Include 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

Answer

For some reason the issue gets fixed if I rename the folders and the files from the directory of “scripts/script.js” to either “script/script.js” or “scripts/(any alternative file name).js”

Advertisement

Answer