Jquery not triggering / acting as expected.

[lam12]

Edit:

I get the error: "uncaught referenceerror $ is not defined"on the line:

$("form").on("submit", function () {

when i inspect in chrome. There are many other posts with this issue elsewhere (links below) though I have been unable to resolve no matter where I put the <script> file reference to the js file.

Uncaught ReferenceError: $ is not defined?

How come this code throws an Uncaught ReferenceError: $ is not defined when it was OK before? $(document).ready(function() { $('#tabs > ul').tabs({ fx: { opacity: 'toggle' } }); $('#

stackoverflow.com

How to Fix Uncaught ReferenceError: $ is not defined in jQuery

www.tutorialrepublic.com

I am trying to complete a fairly simple task:
Post the values (options) in the select list through to the post method.

I created a Jquery function to complete this for me:

$("form").on("submit", function () {
        $("#TagList").prop("selected", "selected");
    })

The problem with the code above is that it triggers on page Load.
So I wrapped the method in the the .ready method:

$(document).ready(function () {
    $("form").on("submit", function () {
        $("#TagList").prop("option", "selected");
    })
}

Now the problem is the code never triggers.

Here is a copy of the code from the html page where the select list is stored: (The whole file is pasted below the select element is near the bottom)
Does anyone know what is going on? i cannot resolve this with debugging. Thank you.

@{
    ViewData["Title"] = "Create";
}

<h1 class="text-center">Create</h1>

<h4 class="text-center">Post</h4>
<hr />
<div class="row justify-content-center">
    <div class="col-md-4">
        <form asp-action="Create" enctype="multipart/form-data">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <div class="form-group">
                <label asp-for="BlogId" class="control-label"></label>
                <select asp-for="BlogId" class="form-control" asp-items="ViewBag.BlogId"></select>
            </div>

            <div class="form-group">
                <label asp-for="Title" class="control-label"></label>
                <input asp-for="Title" class="form-control" />
                <span asp-validation-for="Title" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Abstract" class="control-label"></label>
                <textarea asp-for="Abstract" class="form-control"></textarea>
                <span asp-validation-for="Abstract" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Content" class="control-label" id="Content"></label>
                <input asp-for="Content" class="form-control"></input>
                <span asp-validation-for="Content" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ReadyStatus" class="control-label"></label>
                <select asp-for="ReadyStatus" asp-items="@Html.GetEnumSelectList<ReadyStatus>()" class="form-control"></select>
                <span asp-validation-for="ReadyStatus" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Image" class="control-label"></label>
                <input type="file" asp-for="Image" class="form-control" accept=".jpg, .png, .gif, .jpeg />
                <span asp-validation-for="Image" class="text-danger"></span>
            </div>
            <p> the is a paragraph element</p>

            <div class="form-group mt-4">
                <div class="row">
                    <div class="col">
                        <label class="control-label">Manage Tags</label>
                    </div>
                </div>

                <div class="row">
                    <div class="col">
                        <div class="row">
                            <div class="col">
                                <input type="text" class="form-control" id="TagEntry" />
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col align-bottom">
                                <button onclick="AddTag()" name="Add" type="button" class="btn btn-dark btn-md btn-block">Add</button>
                            </div>
                            <div class="col align-bottom">
                                <button onclick="DeleteTag()" name="Delete" type="button" class="btn btn-dark btn-md btn-block">Delete</button>
                            </div>
                        </div>
                    </div>

                    <div class="col">
                        <select name="TagValues" id="TagList" style="width:100%" multiple>
                            <option value="volvo">Volvo</option>
                            <option value="saab">Saab</option>
                            <option value="fiat">Fiat</option>
                        </select>
                    </div>
                </div>
            </div>

           <div class="form-group">
                <button type="submit" value="Create" class="btn btn-dark btn-md btn-block"
                 style="border-radius: 10px;">Create</button>
           </div>

        </form>
    </div>
</div>

@section Scripts{

<script src="~/js/Custom.js"></script>

        }