Cannot read Property 'length' of Undefined - Variables declared wrong?

Asked

Viewed 1,280 times

1

The moment I run the javascript function below, I am given the error:

Cannot read Property 'length' of Undefined.

Can you tell me what’s wrong? I’m misreporting the variables?

function validate()
{


var i = 0, j = 0, counter = 0, counter1 = 0, areas, disponibilidade;

areas = document.forms[0].elements['areas[]'];

disponibilidade = document.forms[0].elements['disponibilidade[]'];

for (; i < areas.length; i++) {
    if (areas[i].checked) {
      counter++;
  }
}

for (; j < disponibilidade.length; j++) {
    if (disponibilidade[j].checked) {
      counter1++;
  }
}

if (counter==0){
alert("Selecione pelo menos uma área!")
return false;
}

if (counter1==0){
alert("Selecione pelo menos uma disponibilidade!")
return false;
}

return true;
}

COMPLETE CODE:

function myFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("sexta");
  // Get the output text
  var formulario = document.getElementById("formulario");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true) {
    formulario.style.display = "block";
  } else {
    formulario.style.display = "none";
    $('#formulario input').val("");
  }
}

function myFunctionSabado() {
  // Get the checkbox
  var checkBox2 = document.getElementById("sabado");
  // Get the output text
  var formularioSabado = document.getElementById("formularioSabado");

  // If the checkbox is checked, display the output text
  if (checkBox2.checked == true) {
    formularioSabado.style.display = "block";
  } else {
    formularioSabado.style.display = "none";
    $('#formularioSabado input').val("");
  }
}

function myFunctionDomingo() {
  // Get the checkbox
  var checkBox3 = document.getElementById("domingo");
  // Get the output text
  var formularioDomingo = document.getElementById("formularioDomingo");

  // If the checkbox is checked, display the output text
  if (checkBox3.checked == true) {
    formularioDomingo.style.display = "block";
  } else {
    formularioDomingo.style.display = "none";
    $('#formularioDomingo input').val("");
  }
}




var cont = 1;
//https://api.jquery.com/click/
$('#add-campo').click(function() {
  cont++;
  //https://api.jquery.com/append/
  $('#formulario').append('<div class="sexta-feira" id="campo' + cont + '">  <label>das</label><input type="time" id="sexta1' + cont + '" name="sexta1[]" oninput="Concatena2()"><label>as</label><input type="time" id="sexta2' + cont + '" name="sexta2[]" oninput="Concatena2()"><input type="hidden" id="nomeSacado' + cont + '" name="nomeSacado[]"> <button type="button" id="' + cont + '" class="btn-apagar"> - </button></div>');
});

$('form').on('click', '.btn-apagar', function() {
  var button_id = $(this).attr("id");
  $('#campo' + button_id + '').remove();
});




var cont2 = 1;
//https://api.jquery.com/click/
$('#add-campo2').click(function() {
  cont2++;
  //https://api.jquery.com/append/
  $('#formularioSabado').append('<div class="sabado" id="campo1' + cont2 + '">  <label>das</label><input type="time" id="sabado1' + cont2 + '" name="sabado1[]" oninput="Concatena5()"><label>as</label><input type="time" id="sabado2' + cont2 + '" name="sabado2[]" oninput="Concatena5()"><input type="hidden" id="nomeSacadoSabado' + cont2 + '" name="nomeSacadoSabado[]"> <button type="button" id="' + cont2 + '" class="btn-apagar2"> - </button></div>');
});

$('form').on('click', '.btn-apagar2', function() {
  var button_id = $(this).attr("id");
  $('#campo1' + button_id + '').remove();
});


var cont3 = 1;
//https://api.jquery.com/click/
$('#add-campo3').click(function() {
  cont3++;
  //https://api.jquery.com/append/
  $('#formularioDomingo').append('<div class="domingo" id="campo11' + cont3 + '">  <label>das</label><input type="time" id="domingo1' + cont3 + '" name="domingo1[]" oninput="Concatena7()"><label>as</label><input type="time" id="domingo2' + cont3 + '" name="domingo2[]" oninput="Concatena7()"><input type="hidden" id="nomeSacadoDomingo' + cont3 + '" name="nomeSacadoDomingo[]"> <button type="button" id="' + cont3 + '" class="btn-apagar3"> - </button></div>');
});

$('form').on('click', '.btn-apagar3', function() {
  var button_id = $(this).attr("id");
  $('#campo11' + button_id + '').remove();
});


function Concatena() {
  //atribui a variável nome o valor do input cujo id = nome
  var sexta1 = document.getElementById('sexta1').value;
  //atribui a variável numProcesso o valor do input cujo id = numProcesso
  var sexta2 = document.getElementById('sexta2').value;
  //concatena as duas variaveis separadas por espaço e joga no value do input cujo id = nomeSacado
  document.getElementById('nomeSacado').value = "das " + sexta1 + " as " + sexta2;

}
Concatena();


function Concatena2() {
  //atribui a variável nome o valor do input cujo id = nome
  var sexta1 = document.getElementById('sexta1' + cont).value;
  //atribui a variável numProcesso o valor do input cujo id = numProcesso
  var sexta2 = document.getElementById('sexta2' + cont).value;
  //concatena as duas variaveis separadas por espaço e joga no value do input cujo id = nomeSacado
  document.getElementById('nomeSacado' + cont).value = "das " + sexta1 + " as " + sexta2;

}
Concatena2();

function Concatena4() {
  //atribui a variável nome o valor do input cujo id = nome
  var sabado1 = document.getElementById('sabado1').value;
  //atribui a variável numProcesso o valor do input cujo id = numProcesso
  var sabado2 = document.getElementById('sabado2').value;
  //concatena as duas variaveis separadas por espaço e joga no value do input cujo id = nomeSacado
  document.getElementById('nomeSacadoSabado').value = "das " + sabado1 + " as " + sabado2;

}
Concatena4();


function Concatena5() {
  //atribui a variável nome o valor do input cujo id = nome
  var sabado1 = document.getElementById('sabado1' + cont2).value;
  //atribui a variável numProcesso o valor do input cujo id = numProcesso
  var sabado2 = document.getElementById('sabado2' + cont2).value;
  //concatena as duas variaveis separadas por espaço e joga no value do input cujo id = nomeSacado
  document.getElementById('nomeSacadoSabado' + cont2).value = "das " + sabado1 + " as " + sabado2;

}
Concatena5();

function Concatena6() {
  //atribui a variável nome o valor do input cujo id = nome
  var domingo1 = document.getElementById('domingo1').value;
  //atribui a variável numProcesso o valor do input cujo id = numProcesso
  var domingo2 = document.getElementById('domingo2').value;
  //concatena as duas variaveis separadas por espaço e joga no value do input cujo id = nomeSacado
  document.getElementById('nomeSacadoDomingo').value = "das " + domingo1 + " as " + domingo2;

}
Concatena6();


function Concatena7() {
  //atribui a variável nome o valor do input cujo id = nome
  var domingo1 = document.getElementById('domingo1' + cont3).value;
  //atribui a variável numProcesso o valor do input cujo id = numProcesso
  var domingo2 = document.getElementById('domingo2' + cont3).value;
  //concatena as duas variaveis separadas por espaço e joga no value do input cujo id = nomeSacado
  document.getElementById('nomeSacadoDomingo' + cont3).value = "das " + domingo1 + " as " + domingo2;

}
Concatena7();








function validate() {
  var i = 0,
    j = 0,
    counter = 0,
    counter1 = 0,
    areas, disponibilidade;
  areas = document.forms[0].elements['areas[]'];
  disponibilidade = document.forms[0].elements['disponibilidade[]'];

  for (; i < areas.length; i++) {
    if (areas[i].checked) {
      counter++;
    }
  }

  for (; j < disponibilidade.length; j++) {
    if (disponibilidade[j].checked) {
      counter1++;
    }
  }

  if (counter == 0) {
    alert("Selecione pelo menos uma área!")
    return false;
  }

  if (counter1 == 0) {
    alert("Selecione pelo menos uma disponibilidade!")
    return false;
  }

  return true;
}
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<form method="POST" action="roda.php" onsubmit="return validate()">
  <div id="formulario5">

    <!--NOME-->
    <div class="form-group">
      <label>Nome: </label>
      <input type="text" name="nome" placeholder="Nome" required>
    </div>

    <!--APELIDO-->
    <div class="form-group">
      <label>Apelido: </label>
      <input type="text" name="apelido" placeholder="Apelido" required>
    </div>


    <!--SEXO-->
    <div class="form-group">
      <label>Sexo: </label>
      <select name="sexo">
        <option value="masculino" required>Masculino</option>
        <option value="feminino" required>Feminino</option>
      </select>
    </div>

    <!--IDADE-->
    <div class="form-group">
      <label>Idade: </label>
      <input type="number" name="idade" min="12" required>
    </div>

    <!--MORADA-->
    <div class="form-group">
      <label>Morada: </label>
      <input type="text" name="morada" placeholder="Morada" required>
    </div>

    <!--CONTACTO-->
    <div class="form-group">
      <label>Contacto: </label>
      <input type="tel" name="contacto" required><br>
    </div>

    <!--EMAIL-->
    <div class="form-group">
      <label>E-mail: </label>
      <input type="email" name="email" placeholder="E-mail" required>
    </div>

    <!--HABILITAÇÕES LITERÁRIAS-->
    <div class="form-group">
      <label>Habilitações literárias: </label>
      <input type="text" name="habilitacoes" placeholder="Habilitações Literárias" required>
    </div>

    <!--RESTRIÇÕES ALIMENTARES-->
    <div class="form-group">
      <label>Possui algum tipo de restrição alimentar? (deixar em branco se não se aplicar)</label>
      <input type="text" name="restricoes_alimentares" placeholder="Restrições alimentares">
    </div>

    <!--AREAS DE INTERESSE-->
    <div class="form-group">
      <label>Áreas de Interesse: </label><br>
      <input id="interesse1" type="checkbox" name="areas[]" value="bilheteira">Bilheteira<br>
      <input id="interesse2" type="checkbox" name="areas[]" value="guarda-roupa">Guarda-Roupa<br>
      <input id="interesse3" type="checkbox" name="areas[]" value="venda de artesanato">Venda de artesanato<br>
      <input id="interesse4" type="checkbox" name="areas[]" value="restauracao">Restauração<br>
      <input id="interesse5" type="checkbox" name="areas[]" value="figuracao">Figuração<br>
      <input id="interesse6" type="checkbox" name="areas[]" value="legiao">Legião<br>
    </div>


    <label>Disponibilidade: </label><br>
    <!--SEXTA-FEIRA-->

    <div id="formulario2">
      <div class="form-group">
        <input type="checkbox" id="sexta" name="disponibilidade[]" value="sexta-feira" onclick="myFunction()">sexta-feira<br>
      </div>
    </div>

    <div id="formulario" style="display:none">
      <div class="form-group">
        <label>das</label>
        <input type="time" id="sexta1" name="sexta1[]" oninput="Concatena()">
        <label>as</label>
        <input type="time" id="sexta2" name="sexta2[]" oninput="Concatena()">
        <input type="hidden" id="nomeSacado" name="nomeSacado[]">
        <button type="button" id="add-campo"> + </button>
      </div>
    </div>

    <!--SABADO-->
    <div id="formulario21">
      <div class="form-group">
        <input type="checkbox" id="sabado" name="disponibilidade[]" value="sabado" onclick="myFunctionSabado()">sábado<br>
      </div>
    </div>

    <div id="formularioSabado" style="display:none">
      <div class="form-group">
        <label>das</label>
        <input type="time" id="sabado1" name="sabado1[]" oninput="Concatena4()">
        <label>as</label>
        <input type="time" id="sabado2" name="sabado2[]" oninput="Concatena4()">
        <input type="hidden" id="nomeSacadoSabado" name="nomeSacadoSabado[]">
        <button type="button" id="add-campo2"> + </button>
      </div>
    </div>

    <!--DOMINGO-->
    <div id="formulario211">
      <div class="form-group">
        <input type="checkbox" id="domingo" name="disponibilidade[]" value="domingo" onclick="myFunctionDomingo()">domingo<br>
      </div>
    </div>

    <div id="formularioDomingo" style="display:none">
      <div class="form-group">
        <label>das</label>
        <input type="time" id="domingo1" name="domingo1[]" oninput="Concatena6()">
        <label>as</label>
        <input type="time" id="domingo2" name="domingo2[]" oninput="Concatena6()">
        <input type="hidden" id="nomeSacadoDomingo" name="nomeSacadoDomingo[]">
        <button type="button" id="add-campo3"> + </button>
      </div>
    </div>

    <!--TRANSPORTE-->
    <div class="form-group">
      <label>Possui transporte próprio? </label><br>
      <input type="radio" name="transporte" value="sim" required> Sim
      <input type="radio" name="transporte" value="nao" required> Não<br>
    </div>



    <!--VOLUNTÁRIO-->
    <div class="form-group">
      <label>Já foi voluntário de alguma edição anterior do Festival e/ou em alguma atividade promovida pela associação? </label><br>
      <input type="radio" name="voluntarioAPPACDM" value="sim" required> Sim
      <input type="radio" name="voluntarioAPPACDM" value="nao" required> Não<br>
    </div>


    <!--AUTORIZAÇÃO DE IMAGENS-->
    <div class="form-group">
      <label>Autoriza o uso da sua imagem em conteúdos multimédia (fotografia e vídeo), como forma de publicitação no presente website e nas demais redes sociais do Festival?</label><br>
      <input type="radio" name="autorizaImagem" value="sim" required> Sim
      <input type="radio" name="autorizaImagem" value="nao" required> Não<br>
    </div>






  </div>
  <div class="form-group">
    <input type="submit" value="Enviar">
  </div>
</form>






</html>

javascript

  • document.forms[0].elements['areas[]'] or document.forms[0].elements['disponibilidade[]'] is undefined, check the names in JS and HTML

  • @Guilhermecostamilam , I edited and posted the complete code. If you run, you will see that it works, however, when I paste the code on my Wordpress page, it gives me the error I said

  • Beware the moment you call the method! In this case you may be suffering from the asymchronism between loading the view (html) completely or not. Running locally, for example, may have already been loaded, in Wordpress not yet. Check if variable is filled, before calling the . lenght method

  • try to change the variables this way areas = document.querySelectorAll('input[name="areas[]"]') and disponibilidade = document.querySelectorAll('input[name="disponibilidade[]"]');

  • I can’t find the error you refer to in the code. You tested run the code you have here in the question?

  • @Máttheusspoo , IT WORKED!!! THANK YOU!!!

  • @Sergio , as I said there was no mistake when trying to run the code normally. The problem happened when I implemented it in Wordpress, because this function was skipped. By replacing the variables by areas = document.querySelectorAll('input[name="areas[]"]'); and disponibilidade = document.querySelectorAll('input[name="disponibilidade[]"]'); I was able to solve the problem.

Show 2 more comments

1 answer

0


By replacing variables with areas = document.querySelectorAll('input[name="areas[]"]'); and disponibilidade = document.querySelectorAll('input[name="disponibilidade[]"]'); I was able to solve the problem.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.