Issue with javascript and datalist in HTML

Question

I have an issue with my code, there is a Datalist in my html with 2 options, when the "Azienda" option is selected I want to show the div called "aziende", but when i select "Privato" I don't wanna show that div, but the problem is it show me the div when I select "Privato" too. Somebody can help me?

<form class="contact-form" action="#" method="POST">

    <div>
        <input class="lista_c" type="text" list="data_list" name="lista" placeholder="Scegli un opzione">
        <datalist id="data_list">
            <option value="Azienda">Azienda</option>
            <option value="Privato">Privato</option>
        </datalist>
    </div> <br>

    <input class="input1" type="text" name="nome" placeholder="Nome" />
    <input  class="input1" type="text" name="cognome" placeholder="Cognome" /> <br>
    <input class="input2" type="text" name="email" placeholder="Email" /> <br>

    <div id="aziende" style="display: none">
        <input class="nome-azienda" type="text" name="nome-azienda" placeholder="Nome Azienda" />
        <input class="iva" type="text" name="IVA" placeholder="P.IVA" />
    </div>

</form>

<script>
    
    let getvalue = document.getElementsByName('lista') [0];

    getvalue.addEventListener('input', function() {
        if(getvalue !== [0]){
       document.getElementById('aziende').style="display: block";
        }else{
            document.getElementById('aziende').style="display: none";
        }
        })
</script>

Because your if condition makes no sense. getvalue will be an HTMLInputElement so comparing it with [0] is useless... — Andreas
– Andreas, Commented Mar 31, 2021 at 15:13
I guess you want the .value of getvalue and then compare that with something... — Andreas
– Andreas, Commented Mar 31, 2021 at 15:16

Scott Marcus · Accepted Answer · 2021-03-31 15:21:18Z

As mentioned in the comments, your if test is incorrect. See comments below for details on the working solution.

.hidden {
  display: none;
}

<form class="contact-form" action="#" method="POST">

    <div>
        <input class="lista_c" type="text" list="data_list" name="lista" placeholder="Scegli un opzione">
        <datalist id="data_list">
            <option value="Azienda">Azienda</option>
            <option value="Privato">Privato</option>
        </datalist>
    </div> <br>

    <input class="input1" type="text" name="nome" placeholder="Nome" />
    <input  class="input1" type="text" name="cognome" placeholder="Cognome" /> <br>
    <input class="input2" type="text" name="email" placeholder="Email" /> <br>

    <!-- Use CSS classes instead of inline styles when possible. -->
    <div id="aziende" class="hidden">
        <input class="nome-azienda" type="text" name="nome-azienda" placeholder="Nome Azienda" />
        <input class="iva" type="text" name="IVA" placeholder="P.IVA" />
    </div>

</form>

<script>
    const div = document.querySelector("#aziende");
    
    document.querySelector("[name='lista']").addEventListener('input', function() {
      // Just check the value of the input
      if(this.value === "Azienda"){ 
        div.classList.remove("hidden");  // Show the div
      } else {
        div.classList.add("hidden");     // Hide the div
      }
    });
</script>

Allan Nienhuis · Accepted Answer · 2021-03-31 15:26:01Z

0

Your comparison (the if statement) is invalid. You're comparing the dom element 'getvalue' to an array with a single element of zero.

I believe you should compare the value of the the input element, not the element itself. you're also comparing it to an array? you should compare it to the value you're looking for:

if (getvalue.value !== 'Azienda') {

to help debug things like this, it's useful to use console.log or alert statements to display the value of the variable just before the test:

console.log('value of getvalue input element', getvalue.value);
if (getvalue.value

answered Mar 31, 2021 at 15:26

Allan Nienhuis

4,1412 gold badges27 silver badges19 bronze badges

Collectives™ on Stack Overflow

Issue with javascript and datalist in HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related