Question

0

286

Views

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

I have a multiple character search field which fetches WoocCommerce product data via AJAX and works correctly.

Current search field

I need to split my search field into single 6 digit boxes, this is an example of the form I could use:

<form>
     <input type="number" name="abc" min="0" max="9">
      <input type="number" name="abc" min="0" max="9">
      <input type="number" name="abc" min="0" max="9">
      <input type="number" name="abc" min="0" max="9">
      <input type="number" name="abc" min="0" max="9">
      <input type="number" name="abc" min="0" max="9">
        </form>

How can I split the string of my search field into multiple single digit search fields?

My Front End Code

<input type="text" name="keyword" id="keyword" onkeyup="fetch()">
<div id="datafetch">Your numbers will show here</div>
<script>
function fetch(){
    $.post('<?php echo admin_url('admin-ajax.php'); ?>', 
    {'action':'my_action'},
    function(response){
        $('#datafetch').append(response);
        console.log(result);
    });
}
</script>

Code in Functions.php

add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){
   $myquery = esc_attr( $_POST['keyword'] );
}

over 4 years ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-04-13T21:05:54.309Z

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>

0

286

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

1 answers

0

Find remote jobs

Andres GPT