CODEWITHSUNDEEP
javascripthtmldom
Gabriele Sabatino
Gabriele Sabatino

Reputation: 146

Issue with javascript and datalist in HTML

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>

Upvotes: 0

Views: 153

Answers (2)

Allan Nienhuis
Allan Nienhuis

Reputation: 4111

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

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65806

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>

Upvotes: 1

Related Questions