php – How can I change the search form to separate single digits fields?

php – How can I change the search form to separate single digits fields?

Use your suggested script but put tab index per each input field :

then do some UX tasks :

  • since you specify type=number then you cant use maxlength attribute to prevent entrance of more than 1 digit per input so u must handle it in your js.
  • let user can back to previous input by pressing backspace
  • replace current input value if the user focus manually on it and press another number
  • do some UI works !

now you have your separated input boxes that work user-friendly. but you must integrate their input value before submitting to WordPress admin-ajax for passing to your function, or you can send them individually and integrate them in server-side function, do what you want.

here is the demo :

function fetch(){
    $(#keyword).val() = $(#input1).val() + 
                          $(#input2).val() + 
                          $(#input3).val() + 
                          $(#input4).val() + 
                          $(#input5).val() + 
                          $(#input6).val() ; 
   //rest of your function
}

$(function() {

      $(input).keydown(function (e) {
        if(e.keyCode == 8) {
           $(this).prev().focus();
        }
        if (this.value.length == this.maxLength) {
          $(this).val();
        }
    });
  
    $(input).keyup(function () {
        if (this.value.length == this.maxLength) {
          $(this).next().focus();
        }
    });
  
});
input {  
    height: 21px;
    background: #f1f1f1;
    border: 1px #c9c9c9 solid;
    border-radius: 3px;
    -moz-appearance: none;
    appearance: none;
    text-align: center;
    }
<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js></script>
    
<form>
     <input id=input1 type=number  min=0 max=9 tabindex=1  maxlength=1>
     <input id=input2 type=number  min=0 max=9 tabindex=2  maxlength=1>
     <input id=input3 type=number  min=0 max=9 tabindex=3  maxlength=1>
     <input id=input4 type=number  min=0 max=9 tabindex=4  maxlength=1>
     <input id=input5 type=number  min=0 max=9 tabindex=5  maxlength=1>
     <input id=input6 type=number  min=0 max=9 tabindex=6  maxlength=1>
 </form>

php – How can I change the search form to separate single digits fields?

Leave a Reply

Your email address will not be published. Required fields are marked *