I have a <select> element in a c# file in an mvc project I am building. I want to send the items added to the select box to the post action when the user clicks the “submit” button. The problem is that the function is triggering when the page is loaded instead of when the submit button is clicked. The function does not trigger when the submit button is clicked either. So the tagvalues are not being passed to the post. Is anyone able to tell me why this is? Thank you. The Jquery code is contained in a seperate file to the create post file.
Edit: I added the full file and took out the codebyte block as they are not working.
Js file:
let index = 0;
function AddTag() {
// get a reference to the tagentry input element
var tagEntry = document.getElementById("TagEntry")
//create a new select option
let newOption = new Option(tagEntry.value);
document.getElementById("TagList").options[index++] = newOption;
//clear out the TagEntry control
tagEntry.value = "";
return true;
}
function DeleteTag() {
var tagEntry = document.getElementById("TagEntry")
let tagCount = 1;
while (tagCount > 0) {
let selectedIndex = document.getElementById("TagList").selectedIndex;
if (selectedIndex >= 0) {
document.getElementById("TagList").options[selectedIndex] = null;
--tagCount;
}
else
tagCount = 0;
index--;
}
}
$("form").on("submit", function (){
$("#TagList option").prop("selected", "selected");
})
Creat Post file:
@{
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>
<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></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>
}