How can I add a leading zero to 4-digit numbers in search inputs?

[scs-accounts]

Can I change the submitted value for search

I need to add a leading zero to for 4 digit numbers

For example someone inputs

5600

The search engine looks for

05600

<form action="/search">
  <input type="text"
    placeholder="Search"
    name="q" // Change this value before submission or before it sends to /search
  />
  <input type="hidden" name="type" value="product,page" />
  <input type="hidden" name="options[unavailable_products]" value="hide" />
  <input type="hidden" name="options[prefix]" value="last" />
  <input type="submit" value="Search" />
</form>

[g33kgirl]

Hi @scs-accounts,

Which theme are you using? You will probably be able to prepend the value to the search parameter in the liquid files. 

[scs-accounts · Accepted solution]

I solved it

I used jquery for this

Right before submission I can check the value and modify it

<form
  action="/search"
  method="get"
  role="search">
  <div class="tt-col header--search">
    <input type="hidden" name="debug" value="debug" />
    <input type="hidden" name="type" value="product" />
    <input type="hidden" name="options[prefix]" value="last" />
    <input type="hidden" name="options[unavailable_products]" value="hide" />
    <input
      class="tt-search-input header--search-input"
      type="search"
      name="q"
      placeholder="{{ 'general.search.place_holder' | t }}"
      aria-label="{{ 'general.search.place_holder' | t }}"
      minlength="1"
      maxlength="64">
    <span class="validity hidden"></span>
    <button type="submit" class="tt-btn-search header--search-button"></button>
  </div>
</form>

<script>
  const searchForm = $('button.header--search-button').closest('form')
  searchForm.on('submit', function(event) {
    let searchFormInput = $('button.header--search-button').closest('form').find('input.header--search-input'),
        searchFormInputValue = searchFormInput.val()
    
    if (/^\s*\d{4}\s*$/.test(searchFormInputValue)) {
      searchFormInputValue = '0' + searchFormInputValue
      searchFormInput.val(searchFormInputValue)
    }

    return true
  })

</script>