I have researched this and have in mind how to do parts of it, but don't quite understand how to put it all together. When someone is creating a new record in my app, if the results of the InvestigationLog.CourtType dropdown is either "Transfer In (F)" or "Transfer In (M)", then I need to fill a text field, InvestigationLog.TCaseNo with a Case Number, but ONLY if it is one of those two choices. (There are other choices besides these two that should be disregarded.)
The case number needs to be in the format of T(then F or M depending upon the 2 choices above)-###-YY. For example, TF-001-24 would be the first F case of 2024.
My current .cshtml for this field is:
<td style="width: 25%">
<div class="mb-3">
<label asp-for="InvestigationLog.TCaseNo"></label>
<input asp-for="InvestigationLog.TCaseNo" id="TCaseNumber" type="text" class="form-control" readonly="readonly" />
</div>
</td>
And the .cshtml for the Investigation.CourtType field is:
<td style="width: 25%">
<div class="mb-3">
<label asp-for="InvestigationLog.CourtType"></label>
<select asp-for="InvestigationLog.CourtType" id="SelectCourtType" class="form-select" asp-items="@(new SelectList(Model.DisplayCourtTypeData.OrderBy(x => x.CourtTypeDesc),"CourtTypeDesc", "CourtTypeDesc"))" onchange="assignCaseNo" ><option value="" selected disabled>---Select Court Type---</option></select>
</div>
</td>
I would like this TCaseNo to populate once someone has tabbed out of the InvestigationLog.CourtType dropdown. If they go back (before submitting and binding the record) to change the value of the CourtType dropdown, I would like it to change accordingly.
In my research on here, I have come up with the code below to increment the 'F' and 'M' TCaseNo:
Just don't know enough Javascript to do this correctly. I "think" I am pretty close. Just can't get my values to populate the .TCaseNo field on my create view.
Also, should I be doing one set of the variables that are the same for each outside of the if?
<script type="text/javascript">
function assignData() {
const assignCT = $("#SelectCourtType").val().trigger('input');
}
function updateTCaseNumber('#TCaseNumber') {
if ('#SelectCourtType').val() = "Transfer In (F)"
{
var year = DateTime.Now.Year;
int incFCaseNo = 0;
"F" + String.Format("{0:000}", incFCaseNo, year);
incFCaseNo++;
}
else if('#SelectCourtType').val() = "Transfer In (M)"
{
var year = DateTime.Now.Year;
int incMCaseNo = 0;
"M" + String.Format("{0:000}", incMCaseNo, year);
incMCaseNo++;
}
else
{
null
}
$(document).ready(function () {
$('#SelectCourtType').on('input', updateTCaseNumber);
});
}
</script>
THIS PART ANSWERED BELOW. I DO NOT NEED TO FREE UP NUMBER AND REUSE IT: I'm also not sure how to deal with the auto-generated number after the fact? For example, someone later wants to edit the CourtType and it is no longer a Transfer type. Should that TCaseNo be freed up to reuse? What happens to it? Is there standard practice on this?
If you can assist, please do.
EDITED TO ADD: Recently found this thread after many trial searches for the right words: Auto Generate control number base on input data
Looks like what I am looking for, except I still need help sussing out the CourtType dropdown to filter out the 'Transfer In (F)" and the "Transfer In (M)" values and use them to prefix the numbers. (NOTE: Each F and M case series needs to have their own 001+ series of numbers, ie NOT TF-001-24, TM-002-24, TM-003-24, TF-004-24, etc) Please HELP!! Nothing working yet.
Latest Javascript edit:
<script type="text/javascript">
let incFCaseNo = 1;
let incMCaseNo = 1;
function updateTCaseNumber(e)
{
const input = $('#TCaseNumber');
// value will be "Tranfer in (F)" or "Transfer in (M)"
const selected = $('#SelectCourtType').val();
if (selected === "Transfer In (F)") {
// only take 2 digits of the year
const yearF = new Date().getFullYear() % 100;
// const caseNoF = "TF" + selected + String(incFCaseNo).padStart(3, '0') + year;
const caseNoF = `TF-${String(incFCaseNo).padStart(3, '0')}-${yearF}`;
input.val(caseNoF);
incFCaseNo++;
}
else if (selected === "Transfer In (M)") {
// only take 2 digits of the year
const yearM = new Date().getFullYear() % 100;
// const caseNoM = "TM" + selected + String(incMCaseNo).padStart(3, '0') + year;
const caseNoM = `TM-${String(incMCaseNo).padStart(3, '0')}-${yearM}`;
input.val(caseNoM);
incMCaseNo++;
}
else {
input.val("");
}
}
</script>
The javascript above will give me either a TF or TM number, but if I toggle between Transfer In (M) and Transfer In (F) in the dropdown, it will keep incrementing the sequence number. For example, if I pick Transfer In F, I will get TF-001-24. If I then toggle to Transfer In M, I will get TM-001-24. All good. BUT, if I toggle back to Transfer In F, I will then get TF-002-24. Not good. I can see in the code where the placement is making it do this, but do not know WHERE to place the increment so that it will increment AFTER I hit the submit button on the create page.
Can someone explain how I would do that?
The problem can be solved by simple JS, I recommend you learn JS if you are serious with your career. But here is how it can be done, I'm assuming you are using JQuery, please notice the tag in the head of the document if you haven't done it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Include JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<td style="width: 25%">
<div class="mb-3">
<label ></label>
<input id="TCaseNumber" type="text" class="form-control" readonly="readonly" />
</div>
</td>
<td style="width: 25%">
<div class="mb-3">
<label ></label>
<select id="SelectCourtType" class="form-select" onchange="updateTCaseNumber(event)" >
<option value="" selected disabled>---Select Court Type---</option>
<option value="F">Transfer In (F)</option>
<option value="M">Transfer In (M)</option>
</select>
</div>
</td>
<script type="text/javascript">
let incFCaseNo = 0;
function updateTCaseNumber(e) {
const input = $('#TCaseNumber');
// value will be "F" or "M"
const selected = $('#SelectCourtType').val();
if (selected === "") {
input.val("");
} else {
// only take 2 digits of the year
const year = new Date().getFullYear() % 100;
// const caseNo = "T" + selected + String(incFCaseNo).padStart(3, '0') + year;
const caseNo = `T${selected}-${String(incFCaseNo).padStart(3, '0')}-${year}`
input.val(caseNo);
incFCaseNo++;
}
}
</script>
</body>
</html>