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

y0u0uwnf  于 2023-02-02  发布在  Java
关注(0)|答案(1)|浏览(113)

我不是很擅长HTML,我甚至不知道如何调试这个。无论如何,我有一个ASP.NET核心应用程序。我的问题是在CSHTML视图。这是一个时钟系统。用户记录时间对现有的工作。
我有一个正在运行的Index.cshtml,它将验证一个JobNumber以确保它存在于数据库中,如果用户输入一个部分数字并点击F3,它将弹出一个模态窗口(我使用Bootstrap 5),允许他们从列表中选择。
问题是,用户希望添加更多的作业号。因此,他们可以一次对多达五个作业计时。因此,我创建了新字段,并将其命名为JobNumber2、JobNumber3等。
我想要做的是重用现有脚本,为每个新字段添加验证和弹出功能。
我已经尝试了几种不同的东西,基于半打教程在那里,但我只是不够好,在Javascript和JQuery知道如何做到这一点。
任何帮助都是感激的!
[EDIT] Ruikai Feng的答案展示了如何匹配第一个函数,但是这个函数调用validateJobNumber(jobNumber),结果将更新一个字段--同样基于相同的模式。jobNumberValidationMessage--但是我需要它来更新正确的jobNumberValidationMessage,这取决于在前半部分中匹配了哪个JobNumber字段。IDK,也许这些可以合并到一个函数中?我不确定。但是我如何使用与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>
qltillow

qltillow1#

如果您有多个输入,如:

<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);                                  
 }            
});        
});

带控制器:

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

结果是:

相关问题