使用 JQuery 和 Javascript 为 HTML 中的类似字段设置事件

Question

我不太擅长 HTML 世界，我什至不确定如何调试这个。 反正我有一个ASP.NET的核心App。 我的问题出在 CSHTML 视图中。 这是一个时钟系统。 用户根据现有作业记录时间。

我有一个正在工作的 Index.cshtml。 它将验证 JobNumber 以确保它存在于数据库中。 如果用户输入部分数字并按 F3，它会弹出一个模式 window（我使用的是 Bootstrap 5）以允许他们从列表中选择 select。

问题是，用户想要添加更多作业编号。 因此，他们可以同时对多达五个乔布斯进行计时。 因此，我正在创建新字段，并将它们命名为 JobNumber2、JobNumber3 等。

我想要做的是重用现有的脚本来为每个新字段添加验证和弹出功能。

我已经根据那里的六个教程尝试了几种不同的方法，但我在 Javascript 和 JQuery 上还不够好，不知道如何做到这一点。

任何帮助表示赞赏！

[编辑] Ruikai Feng 的回答显示了如何匹配第一个 function，但是那个调用 validateJobNumber(jobNumber)，结果将更新一个字段——再次基于相同的模式。 所以，现在它更新了：jobNumberValidationMessage——但我需要它更新正确的 jobNumberValidationMessage，这取决于前半部分匹配的 JobNumber 字段。 IDK，也许这些可以组合成一个 function？ 我不知道。 但是我如何获取与 id^='JobNumber 匹配的内容来确定要更新哪个 jobNumberValidationMessage（即 jobNumberValidationMessage2、jobNumberValidationMessage3 等）；

---------- 结束编辑

这是我正在使用的代码，但需要更改：

@using Microsoft.AspNetCore.Http
@using Microsoft.AspNetCore.Http.Extensions
@model dynamic

<!DOCTYPE html>
<html>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-10">
                <!-- Clock-In Header -->
                <h3>
                    <img class="logo large" src="logo-png-transparent.png")"
                         alt="Logo" width="100" height="100">  Add Job Number(s) to Track Time for: @Model.Employee.Name
                </h3>
                <hr />  <!-- Ruler Line for Separation -->
                <!-- End Clock-In Header -->
            <!-- Clock-In Form -->
        <div class="row">
        <div class="col-1 col-md-12 offset-md-0">
            <div class="card">
            <div class="card-body">
             <form asp-action="ClockInBegin" method="post">
            <label for="JobNumber" class="col-7 col-md-2 col-form-label text-md-right">Job Number</label>
            <div class="col-md-4">
            <input type="text" id="JobNumber" name="JobNumber" class="form-control" onkeydown="jobNumberKeyDown(this)" onblur="jobNumberBlur(this)" value="@Model.TrackingItem.JobNumber">
            <div class="col-md-8">
                <span id="jobNumberValidationMessage"></span>
            </div>
            </div>
          </div>
          <div class="form-group row">
          <div class="form-check  form-switch col-4 align-with-label">
            <input class="form-check-input"  type="checkbox" value="" id="MultipleCheck">
            <label class="form-check-label" for="MultipleCheck">Multiple</label>
          </div>
         </div> <!-- End form-group row -->
          <div>
            <button type="submit" class="btn btn-primary w-100">Start Clock</button>
          </div>
        </form>
        </div>
        </div>
        </div>
        </div>
        <!-- Clock-In Modal Pop-up -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
            <div class="modal-header">
            <h4 class="modal-title">Select Job Number</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
        <select id="jobNumberSelect" class="form-control">
        <option value="">Select Job Number</option>
        <!-- Dynamic options generated via JavaScript or ajax -->
        </select>
        </div>
        <div class="modal-footer">          
            <button type="button" id="CANCEL"class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="button" id="OK" class="btn btn-primary"   data-bs-dismiss="modal">OK</button>                
        </div>
        </div>
    </div>
    <!-- End Clock-In Modal Pop-up -->
    </div>
    </div>
   </div>
  </div>
<script>

    $(document).ready(function () {
        $("#JobNumber").blur(function () {
            var jobNumber = $(this).val();
            validateJobNumber(jobNumber);
        });
        $("#JobNumber").keydown(function (event) {
            if (event.key === "F3") {
                event.preventDefault();
                if (event.target.value.length >= 2) {
                    // Open the modal
                    $('#myModal').modal('show');
                    // Populate the select options
                    $.ajax({
                        type: "GET",
                        url: "@Url.Action("GetJobNumbers")",
                        data: { searchTerm: event.target.value },
                        dataType: "json",
                        success: function (data) {
                            $("#jobNumberSelect").empty();

                            $.each(data, function (index, item) {
                                $("#jobNumberSelect").append("<option value='" + item + "'>" + item + "</option>");
                            });
                            $("#jobNumberSelect").val("..."); // clear the initial value. Make them select it
                            //set prompt in first cell of select
                            $("#jobNumberSelect").prepend("<option value=''>Select Job Number</option>");
                            $("#myModal").modal("show");
                        }
                    });
                }
            }
        });
        $("#jobNumberSelect").change(function () {
            $("#JobNumber").val($(this).val());
        });
        $("#OK").click(function () {
            $("#JobNumber").val($("#jobNumberSelect").val());
            validateJobNumber(); // call the validation
            $("#myModal").modal("hide");
        });

        $('#MultipleCheck').change(function () {
            if (this.checked) {
                $(this).val(true);
                $('[name="MultipleCheck"]:hidden').val(true);
                $("#hiddenFields").show();
            }
            else {
                $(this).val(false);
                $("#hiddenFields").hide();
            }
        })

    });  // end Document.Ready functions

    function validateJobNumber() {
        var jobNumber = $("#JobNumber").val();
        $.ajax({
            type: "POST",
            url: "@Url.Action("VerifyJobNumber")",
            data: { jobNumber: jobNumber },
            dataType: "text",
            success: function (respdata) {
                // alert(respdata);
                const obj = JSON.parse(respdata);
                var rmessage = obj.message;
                $("#jobNumberValidationMessage").text(rmessage);
                $("#jobNumberValidationMessage").css("color", "green");
            }
        });
    }
</script>


</body>
</html>

Answer 1

如果您有多个输入，例如：

<input type="text" id="JobNumber1" name="JobNumber1" class="form-control"  value="1">
<input type="text" id="JobNumber2" name="JobNumber2" class="form-control"  value="2">
<input type="text" id="JobNumber3" name="JobNumber3" class="form-control"  value="3">

并且您想验证模糊值，只需尝试以下操作：

$("[id^='JobNumber']").blur(function(e)        
{             
var jobnumber=$(this).val();             
$.ajax({               
 type: "POST",               
 url: "@Url.Action("VerifyJobNumber")",               
 data: { "jobNumber": jobnumber },               
 dataType: "text",                
success: function (respdata) {                     
alert(respdata);                                  
 }            
});        
});

使用 controller：

[HttpPost]       
public IActionResult VerifyJobNumber(string jobNumber)        
{            
  return Ok(jobNumber);        
}

结果：