在输入长度满足时,使用jQuery自动提交表单

gab6jxml  于 2023-03-01  发布在  jQuery
关注(0)|答案(2)|浏览(177)

当学生扫描身份证时,我想记录他们的出勤情况。
我已经创建了下面的表格来获得条形码扫描输入。

<form action="../controller/student_controller.php?status=add-attendace" method="post" id="attendance">
            <div class="row">
                <div class="col-md-1">&nbsp;</div>
                <div class="col-md-8 form-floating mb-3">
                    <input type="text" class="form-control" id="student_id" name="student_id" placeholder="Student ID">
                    <label for="student_id">Student ID</label>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-warning btn-lg" type="submit" id="student_sub" name="student_sub">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-database-fill-add" viewBox="0 0 16 16">
                            <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0ZM8 1c-1.573 0-3.022.289-4.096.777C2.875 2.245 2 2.993 2 4s.875 1.755 1.904 2.223C4.978 6.711 6.427 7 8 7s3.022-.289 4.096-.777C13.125 5.755 14 5.007 14 4s-.875-1.755-1.904-2.223C11.022 1.289 9.573 1 8 1Z"/>
                            <path d="M2 7v-.839c.457.432 1.004.751 1.49.972C4.722 7.693 6.318 8 8 8s3.278-.307 4.51-.867c.486-.22 1.033-.54 1.49-.972V7c0 .424-.155.802-.411 1.133a4.51 4.51 0 0 0-4.815 1.843A12.31 12.31 0 0 1 8 10c-1.573 0-3.022-.289-4.096-.777C2.875 8.755 2 8.007 2 7Zm6.257 3.998L8 11c-1.682 0-3.278-.307-4.51-.867-.486-.22-1.033-.54-1.49-.972V10c0 1.007.875 1.755 1.904 2.223C4.978 12.711 6.427 13 8 13h.027a4.552 4.552 0 0 1 .23-2.002Zm-.002 3L8 14c-1.682 0-3.278-.307-4.51-.867-.486-.22-1.033-.54-1.49-.972V13c0 1.007.875 1.755 1.904 2.223C4.978 15.711 6.427 16 8 16c.536 0 1.058-.034 1.555-.097a4.507 4.507 0 0 1-1.3-1.905Z"/>
                        </svg>
                        Submit
                    </button>
                </div>
            </div>
        </form>

学生ID长度为10。
我想在检查值的长度是否等于10后自动提交此表单。
我已经使用了下面的jQuery代码段,但似乎不太好用.

$("#attendance").submit(function()
        {
            var value = $("#student_id").val();
            var length = value.length;
            if(length==10)
            {
                $("#attendance").submit();
            }
        });

对此有何想法?

ewm0tg9j

ewm0tg9j1#

这是我答案,希望对你有帮助。

$(function() {
  $(document).on('keyup','#student_id', function(e) {
      if((e.target.value).length === 10)  {
         // submit here
      }
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control" id="student_id" name="student_id" placeholder="Student ID">
mwecs4sa

mwecs4sa2#

这是我的建议,希望能对你有所帮助。

$(function() {  
  // on form submit
  $(document).on('submit', '#attendance', function(e){
      e.preventDefault();
      var value = $("#student_id").val();
      var length = value.length;

      if( length == 10 ){
          // you use case for furhter execution
          console.log("form submited! input val length ", length );
        return false;
      }
      console.log("length is not 10!");
      return false;
  });

  // on enter something in input
  $(document).on('input', '#student_id', function(e){
      var checkLength = $(this).val().length;
      if(checkLength == 10){
      // if(checkLength >= 10){ // if you still want to submit if length is greater than 10.
        $('#attendance').submit();
      }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="" method="post" id="attendance">
            <div class="row">
                <div class="col-md-1">&nbsp;</div>
                <div class="col-md-8 form-floating mb-3">
                    <input type="text" class="form-control" id="student_id" name="student_id" placeholder="Student ID">
                    <label for="student_id">Student ID</label>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-warning btn-lg" type="submit" id="student_sub" name="student_sub">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-database-fill-add" viewBox="0 0 16 16">
                            <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0ZM8 1c-1.573 0-3.022.289-4.096.777C2.875 2.245 2 2.993 2 4s.875 1.755 1.904 2.223C4.978 6.711 6.427 7 8 7s3.022-.289 4.096-.777C13.125 5.755 14 5.007 14 4s-.875-1.755-1.904-2.223C11.022 1.289 9.573 1 8 1Z"/>
                            <path d="M2 7v-.839c.457.432 1.004.751 1.49.972C4.722 7.693 6.318 8 8 8s3.278-.307 4.51-.867c.486-.22 1.033-.54 1.49-.972V7c0 .424-.155.802-.411 1.133a4.51 4.51 0 0 0-4.815 1.843A12.31 12.31 0 0 1 8 10c-1.573 0-3.022-.289-4.096-.777C2.875 8.755 2 8.007 2 7Zm6.257 3.998L8 11c-1.682 0-3.278-.307-4.51-.867-.486-.22-1.033-.54-1.49-.972V10c0 1.007.875 1.755 1.904 2.223C4.978 12.711 6.427 13 8 13h.027a4.552 4.552 0 0 1 .23-2.002Zm-.002 3L8 14c-1.682 0-3.278-.307-4.51-.867-.486-.22-1.033-.54-1.49-.972V13c0 1.007.875 1.755 1.904 2.223C4.978 15.711 6.427 16 8 16c.536 0 1.058-.034 1.555-.097a4.507 4.507 0 0 1-1.3-1.905Z"/>
                        </svg>
                        Submit
                    </button>
                </div>
            </div>
        </form>

相关问题