Autofill input based on value of another input

JavaScript
1

I understand that there are things like the “jQuery form autofill” that does this, but I do have to press a button to do this, but I cannot figure out how to use it. I’m a total noob at JQuery.

What I want is when I type for example

“La Liga” into a field labelled “competition” I want four other fields to be filled out

comptype: “xyz”
compclass: “rst”
comp_badge: “uvw”
colours: “opq”

When I type

“Uefa Champions League”
comptype: “abc”
compclass: “def”
comp_badge: “ghi”
colours: “jkl”

and there are 15 competitions.

How would I do this without pressing a button, just when I type it out it will fill out automatically?

2

You’d listen for the keyup event on the input field and autofill when the input’s value matches a predefined value.

Here’s an example to get you started.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Prefill inputs</title>
</head>

<body>
  <input type="text" id="main">
  <input type="text" class="sub">
  <input type="text" class="sub">
  <input type="text" class="sub">

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
    const $main = $('#main');
    const $inputs = $('.sub');

    const values = {
      trigger: 'birds',
      birds: ['eagle', 'kestrel', 'hawk']
    };

    $main.on('keyup', function () {
      if (this.value === values.trigger) {
        $inputs.each(function (i, el) {
          el.value = values.birds[i];
        });
      }
    });
  </script>
</body>
</html>
3

Hi Pullo,

This is fantastic! Thanks so much! It works perfectly except one teeny weeny snag the script isn’t working with a datalist

This is the code for the datalist

<input id="main" class="input_1" list="competition" type="text" name="competition">
<datalist id="competition" class="listos"><?php echo $complist ?></datalist>

When I take away the the id=“competition” from the datalist the script works, but the datalist doesn’t.

Not sure how to resolve this one …

EDIT, it seems as if I have to press the enter key on keyboard when selecting the item in the datalist for it to work. But that gives me a problem as it submits my form, so now need to figure out how to stop the form from submitting on enter key … trying solutions from stackoverflow but nothing working …

4

Browser support for <datalist> seems to be less than great…

Have you tried using different browsers?

5

I have tried in Chrome and Firefox, doesn’t seem to be working … The datalist isn’t that important tbh … I could just remove it and replace it with an input as per the example above if there isn’t a solution.

6

If you post the complete HTML code (not the PHP), I’ll take a look.

7

for sake of berevity I’ve only added 3 options

<input id="main" class="input_1" list="competition" type="text" name="competition">
<datalist id="competition" class="listos">
<option value="Capital One Cup">Capital One Cup</option>
<option value="Community Shield">Community Shield</option>
<option value="Confederations Cup 2017">Confederations Cup 2017</option>
</datalist>
8

You can listen for the input event to detect changes to the datalist.

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Prefill inputs</title>
</head>

<body>
  <input id="main" class="input_1" list="competition" type="text" name="competition">
  <datalist id="competition" class="listos">
    <option value="Capital One Cup">Capital One Cup</option>
    <option value="Community Shield">Community Shield</option>
    <option value="Confederations Cup 2017">Confederations Cup 2017</option>
  </datalist>

  <input type="text" class="sub">
  <input type="text" class="sub">
  <input type="text" class="sub">

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
    const $main = $('#main');
    const $inputs = $('.sub');

    const values = {
      trigger: 'community shield',
      communityShield: ['one', 'two', 'three']
    };

    $main.on('keyup input', function () {
      const inputValue = this.value.toLowerCase()
      if (inputValue === values.trigger) {
        $inputs.each(function (i, el) {
          el.value = values.communityShield[i];
        });
      }
    });
  </script>
</body>

</html>
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.