Question 11101 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Automatically submit form with jQuery once the input length is met

I’m trying to record attendance from the students when they scan their ID card.

I have created the below form to get the barcode scan input.

<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>

the student ID’s length is 10.

I want to submit this form automatically after checking the length of the value whether it is equal to 10.

I have used below jQuery code segment, but doesn’t seem to be working well.

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

Any thoughts on this?

Tags:

2

Answers


  1. 0

    here’s my answer, I hope this will help you.

    $(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">
    Login or Signup to reply.
  2. 0

    Here is suggestion. Hope it might help you.

    $(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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search