A few datalist labels with hide value

user_4505016 0
Viewed 602

I finded here that code:

<form action="<?php echo $adresstrust; ?>" method="post" >
    <input list="suggestionList" id="answerInput">
<datalist id="suggestionList">
    <option data-value="42">The answer</option>
    <option data-value="43">The answer3</option>
    <option data-value="44">The answer4</option>
</datalist>

<input list="suggestionList2" id="answer2Input">
<datalist id="suggestionList2">
    <option data-value="42">The answer</option>
    <option data-value="43">The answer3</option>
    <option data-value="44">The answer4</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">
<input type="hidden" name="answer2" id="answer2Input-hidden">
<input type="hidden" name="ala" value="tutaj">
<input type="submit" name="" value="Start">
</form>
<script type="text/javascript">
    document.querySelector('input[list]').addEventListener('input', function(e) {
    var input = e.target,
        list = input.getAttribute('list'),
        options = document.querySelectorAll('#' + list + ' option'),
        hiddenInput = document.getElementById(input.getAttribute('id') + '-hidden'),
        inputValue = input.value;

    hiddenInput.value = inputValue;

    for(var i = 0; i < options.length; i++) {
        var option = options[i];

        if(option.innerText === inputValue) {
            hiddenInput.value = option.getAttribute('data-value');
            break;
        }
    }
});
</script>

It's work great. But when I add secound datalist code send me only value from first datalist. How to make it to sends me value from a few datalists?

html-datalist html javascript
1 Answers

To accomplish the goal you need to assign the event handler to ALL suitable input elements that you wish to include this functionality. Use querySelectorAll to obtain such a nodelist and iterate through to assign your input event handler.

I simplified the IDs/data-ids for brevity and convenience. Dataset attributes can be repeated so it is acceptable to use data-id=x on multiple elements where it would not be legitimate to use id=x on more than one. This helps later with selecting the hidden element and means simpler HTML code.

The comments throughout the inputhandler function should help illuminate what is happening at each point.

document.addEventListener('DOMContentLoaded',(e)=>{

  const inputhandler=function(e){
    // Find the appropriate datalist associated with current text input element.
    let list=document.querySelector( 'datalist#' + this.getAttribute('list') );
    // Find all the options within this datalist.
    let options=list.querySelectorAll('option');
    // Find the appropriate hidden input field based upon list attribute from current text input element.
    let input=document.querySelector('input[type="hidden"][ data-list="'+this.getAttribute('list')+'" ]');

    // Set the value of the hidden input to that of text element.
    input.value=this.value;

    // Iterate through `some` of the options - stop when a condition is met.
    Array.from( options ).some( opt=>{
      if( opt.textContent.trim()===this.value.trim() ){
        // condition has been satisfied - set hidden input element value
        input.value=opt.dataset.value;

        // display formatted message in the console
        console.log(
          'The hidden field "%s" has been assigned "%s" as it\'s new value',
          input.name,
          input.value
        );

        // stop iteration of nodelist - job done.
        return true;
      }
    })
  };

  document.querySelectorAll( 'input[list]' ).forEach( input=>input.addEventListener('input',inputhandler));
})
<form method='post' action="<?php echo $adresstrust; ?>">
  <input type='text' list='list1' />
  <datalist id='list1'>
    <option data-value='42'>The answer
    <option data-value='43'>The answer3
    <option data-value='44'>The answer4
  </datalist>

  <input type='text' list='list2' />
  <datalist id='list2'>
    <option data-value='42'>The answer
    <option data-value='43'>The answer3
    <option data-value='44'>The answer4
  </datalist>

  <input type='hidden' name='answer' data-list='list1' />
  <input type='hidden' name='answer2' data-list='list2' />

  <input type='hidden' name='ala' value='tutaj' />
  <input type='submit' value='Start' />
</form>

user_36036810
Related