1

Estou fazendo um formulário que ao clicar no botão Add, eu gero um novo formulário. Até aí tudo bem, mas toda vez que eu gero um novo, tenho dois selects, pra quando eu escolher algum índice do primeiro, carregue tais opções no segundo. O problema é quando eu gero o segundo formulário, quando eu clico em algo no select... altero o índice do select do primeiro formulário.

Alguém pode me ajudar?

<!DOCTYPE html>
<html>
    <head>
        <title>Página em Construção</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script src="teste.js" type="text/javascript"></script>


    </head>
    <body>
        <button type="button" id="btnAddForm" onclick="CloneForm('myForm');">Add Cômodo</button>

        <div id="formulario"> 
            <form name="myForm">
                Cômodo: 
                <select id="comodos" onchange="loadList(this.value)" >
                    <option value="x" selected></option>
                    <!--<option value="">Selecione o Cômodo</option>-->
                    <option value="garagem">Garagem</option>
                    <option value="areaExterna">Área Externa</option>
                    <option value="hall">Hall de Entrada</option>
                    <option value="sala">Sala</option>
                    <option value="cozinha">Cozinha</option>
                    <option value="areaServico">Área de Serviço</option>
                    <option value="escada">Escada/Corredor</option>
                    <option value="dormitorio">Dormitório</option>
                    <option value="banheiro">Banheiro</option>
                    <option value='10'>Outro</option>
                </select>
                <br/>
                Serviço <select id="servicos" name="servicos">



                </select>

            </form>
        </div>
    </body>
</html>

Código JavaScript

function CloneForm(formName) {
    var formCount = document.forms.length;
    var oForm = document.forms[formName];
    var clone = oForm.cloneNode(true);
    clone.name += "_" + formCount;
    document.body.appendChild(clone);
}

var x = new Array("Selecione um Serviço", "---");
var garagem = new Array("Demoliçao de Muro", "Construção de Muro", "Regularização de Contrapiso", "Pintura de Paredes", "Troca de portas / Portão", "Reparo em Telha - Troca de Telhas e Calhas", "Reparos de Infiltração: Raspagem e Impermeabilização");

var areaExterna = new Array("Demoliçao de Muro", "Construção de Muro", "Regularização de Contrapiso", "Pintura de Paredes", "Troca de portas / Portão", "Reparo em Telha - Troca de Telhas e Calhas", "Reparos de Infiltração: Raspagem e Impermeabilização");

var hall = new Array("Demolição de Paredes", "Contrução de Paredes", "Tratamento de Pisos de Madeira", "Instalação ou Troca de Piso Frio",
        "Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e Janelas", "Forro de Gesso e Iluminação", " Elétrica: Tomada e Interruptores");

var sala = new Array("Demolição de Paredes", "Contrução de Paredes", "Tratamento de Pisos de Madeira", "Instalação ou Troca de Piso Frio",
        "Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e Janelas", "Forro de Gesso e Iluminação", " Elétrica: Tomada e Interruptores",
        "Reparos de Infiltração: Raspagem e Impermeabilização", "Preparação e Instalação de Ar Condicionados");

var cozinha = new Array("Demolição de Paredes", "Contrução de Paredes", "Instalação ou Troca de Piso Frio",
        "Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e Janelas", "Forro de Gesso e Iluminação", " Elétrica: Tomada e Interruptores",
        "Reparos de Infiltração: Raspagem e Impermeabilização", "Hidráulica: Troca de Tubulação ou Novos Pontos de Água", "Troca de Revestimentos de Parede (Azulejo, Pastilha, Cerâmica)");

var areaServico = new Array("Demolição de Paredes", "Contrução de Paredes", "Instalação ou Troca de Piso Frio",
        "Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e Janelas", "Forro de Gesso e Iluminação", " Elétrica: Tomada e Interruptores",
        "Reparos de Infiltração: Raspagem e Impermeabilização", "Hidráulica: Troca de Tubulação ou Novos Pontos de Água",
        "Troca de Revestimentos de Parede (Azulejo, Pastilha, Cerâmica)", "Troca de Tanque e Torneiras");

var escada = new Array("Demolição de Paredes", "Contrução de Paredes",
        "Instalação ou Troca de Piso Frio",
        "Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e Janelas",
        "Forro de Gesso e Iluminação", " Elétrica: Tomada e Interruptores",
        "Troca de Revestimentos de Parede (Azulejo, Pastilha, Cerâmica)");

var dormitorio = new Array("Demolição de Paredes", "Contrução de Paredes", "Tratamento de Pisos de Madeira",
        "Instalação ou Troca de Piso Frio", "Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e Janelas",
        "Forro de Gesso e Iluminação", " Elétrica: Tomada e Interruptores",
        "Reparos de Infiltração: Raspagem e Impermeabilização", "Preparação e Instalação de Ar Condicionados");

var banheiro = new Array("Demolição de Paredes", "Construção de Paredes", "Troca de Revestimentos de Parede (Azulejos, Pastilha, Cerâmica)",
        "Troca de Metais(Registros, Chuveiro)", "Execução de Nicho Embutido", "Adaptação de Válvula Hydra para Caixa Acoplada",
        "Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e/ou Janelas", "Forro de Gesso e Iluminação",
        "Hidráulica: Troca de Tubulação ou Novos Pontos de Água", "Elétrica: Tomada e Interruptores",
        "Reparos de Infiltração: Raspagem e Impermeabilização");

function loadList(v) {
    var objSpan1 = document.getElementById("estado");
    var listaEscolhida = eval(v);
    /*
     if (listaEscolhida==x) {
     objSpan1.style.display = "none";
     }else{
     objSpan1.style.display = "block";
     }
     */

    document.myForm.servicos.options.length = listaEscolhida.length;
    for (i = 0; i < listaEscolhida.length; i++) {
        document.myForm.servicos.options[i] = new Option(listaEscolhida[i], listaEscolhida[i]);
    }
}

function resetLists() {
    loadList("x");
    document.myForm.comodos.options[0].selected = true;
}
window.onload = resetLists;

1 Resposta 1

1

Vejo que está tentando criar um tipo de componente para a sua pagina, então vou tentar lhe dá algumas dicas que talvez lhe ajude à alcançar o seu objetivo.

1 - Use a tag template

Coloque todo o markup inicial do componente dentro de uma tag <template>, então sempre que precisar criar um novo componente, apenas importe o conteúdo do template.

2 - Defina o Escopo

Defina um escopo para o seu componente, normalmente ele é um HTMLElement que fica na raiz do template e de preferencia de irmãos.

3 - Não dê ids aos elementos do template

Lembre-se, os ids devem ser únicos, então evite dá um id à eles, se precisar faze-lo, adicione alguma logica no seu script que adicione alguma informação única aos ids... por exemplo, um elemento input#texto deve virá algo do genero input#texto_1, input#texto_2 ou input#texto_3 à depender da quantidade de componentes já criados.

4 - crie uma função ou "classe" que receba o escopo e defina os eventos

feito as devidas observações, vamos ao exemplo.:

(function () {
  var formularios = [];
  var addForm = document.getElementById("addForm");
  var tmplForm = document.getElementById("tmplForm").content;

  addForm.addEventListener("click", function (event) {
    new Formulario();
  });
  
  var Formulario = function () {
    var that = this;
    var content = document.importNode(tmplForm, true);
    this.dom = {};
    
    // neste exemplo, o escopo será o form.formulario;
    this.dom.scope = content.querySelector(".formulario");
    this.dom.comodos = this.dom.scope.querySelector(".comodos");
    this.dom.servicos = this.dom.scope.querySelector(".servicos");
    
    // aqui estamos definindo um id e name unicos para os elementos.
    // lembre-se, que definir um id ou name nem sempre é necessario.
    // assim como a estrategia para gerar este nome pode vir a depender da tecnologia server-side que está utilizando (PHP, ASP.NET MVC, etc).
    // abaixo estou gerando IDs e Names apropriados para ASP.NET MVC.
    this.id = formularios.length + 1;
    this.dom.scope.id = "Formulario_" + this.id + "_";
    this.dom.comodos.id = "Comodos_" + this.id + "_";
    this.dom.servicos.id = "Servicos_" + this.id + "_";
    this.dom.comodos.name = "Comodos[" + this.id + "]";
    this.dom.servicos.name = "Servicos[" + this.id + "]";
    
    this.dom.comodos.addEventListener("change", function (event) {
      that.onComodoChange(event);
    });
    formularios.push(this);
    document.body.appendChild(this.dom.scope);
  }
  
  Formulario.prototype.onComodoChange = function (event) {
    var that = this;
    while (this.dom.servicos.firstChild) {
      this.dom.servicos.removeChild(this.dom.servicos.firstChild);
    }
    var servico = this.servicos[this.dom.comodos.value];
    servico.forEach(function (item, indice) {
      var option = document.createElement("option");
      option.value = item;
      option.textContent = item;
      that.dom.servicos.appendChild(option);
    });
  }

  Formulario.prototype.servicos = {};
  Formulario.prototype.servicos.x = ["Selecione um Serviço", "---"];
  Formulario.prototype.servicos.garagem = ["Demoliçao de Muro", "Construção de Muro", "Regularização de Contrapiso", "Pintura de Paredes", "Troca de portas / Portão", "Reparo em Telha - Troca de Telhas e Calhas", "Reparos de Infiltração: Raspagem e Impermeabilização"];
  Formulario.prototype.servicos.areaExterna = ["Demoliçao de Muro", "Construção de Muro", "Regularização de Contrapiso", "Pintura de Paredes", "Troca de portas / Portão", "Reparo em Telha - Troca de Telhas e Calhas", "Reparos de Infiltração: Raspagem e Impermeabilização"];
  Formulario.prototype.servicos.hall = ["Demolição de Paredes", "Contrução de Paredes", "Tratamento de Pisos de Madeira", "Instalação ou Troca de Piso Frio", "Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e Janelas", "Forro de Gesso e Iluminação", " Elétrica: Tomada e Interruptores"];
  Formulario.prototype.servicos.sala = ["Demolição de Paredes", "Contrução de Paredes", "Tratamento de Pisos de Madeira", "Instalação ou Troca de Piso Frio", "Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e Janelas", "Forro de Gesso e Iluminação", " Elétrica: Tomada e Interruptores", "Reparos de Infiltração: Raspagem e Impermeabilização", "Preparação e Instalação de Ar Condicionados"];
  Formulario.prototype.servicos.cozinha = ["Demolição de Paredes", "Contrução de Paredes", "Instalação ou Troca de Piso Frio", "Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e Janelas", "Forro de Gesso e Iluminação", " Elétrica: Tomada e Interruptores", "Reparos de Infiltração: Raspagem e Impermeabilização", "Hidráulica: Troca de Tubulação ou Novos Pontos de Água", "Troca de Revestimentos de Parede (Azulejo, Pastilha, Cerâmica)"];
  Formulario.prototype.servicos.areaServico = ["Demolição de Paredes", "Contrução de Paredes", "Instalação ou Troca de Piso Frio", "Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e Janelas", "Forro de Gesso e Iluminação", " Elétrica: Tomada e Interruptores", "Reparos de Infiltração: Raspagem e Impermeabilização", "Hidráulica: Troca de Tubulação ou Novos Pontos de Água", "Troca de Revestimentos de Parede (Azulejo, Pastilha, Cerâmica)", "Troca de Tanque e Torneiras"];
  Formulario.prototype.servicos.escada = ["Demolição de Paredes", "Contrução de Paredes", "Instalação ou Troca de Piso Frio", "Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e Janelas", "Forro de Gesso e Iluminação", " Elétrica: Tomada e Interruptores", "Troca de Revestimentos de Parede (Azulejo, Pastilha, Cerâmica)"];
  Formulario.prototype.servicos.dormitorio = ["Demolição de Paredes", "Contrução de Paredes", "Tratamento de Pisos de Madeira", "Instalação ou Troca de Piso Frio", "Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e Janelas", "Forro de Gesso e Iluminação", " Elétrica: Tomada e Interruptores", "Reparos de Infiltração: Raspagem e Impermeabilização", "Preparação e Instalação de Ar Condicionados"];
  Formulario.prototype.servicos.banheiro = ["Demolição de Paredes", "Construção de Paredes", "Troca de Revestimentos de Parede (Azulejos, Pastilha, Cerâmica)", "Troca de Metais(Registros, Chuveiro)", "Execução de Nicho Embutido", "Adaptação de Válvula Hydra para Caixa Acoplada", "Pintura (Paredes, Teto e/ou Portas)", "Troca de Portas e/ou Janelas", "Forro de Gesso e Iluminação", "Hidráulica: Troca de Tubulação ou Novos Pontos de Água", "Elétrica: Tomada e Interruptores", "Reparos de Infiltração: Raspagem e Impermeabilização"];
})();
<input id="addForm" type="button" value="Adicionar Form" />
<template id="tmplForm">
  <form class="formulario">
    <div>
      <label>
        Cômodo: 
        <select class="comodos" >
          <option value="x" selected></option>
          <option value="garagem">Garagem</option>
          <option value="areaExterna">Área Externa</option>
          <option value="hall">Hall de Entrada</option>
          <option value="sala">Sala</option>
          <option value="cozinha">Cozinha</option>
          <option value="areaServico">Área de Serviço</option>
          <option value="escada">Escada/Corredor</option>
          <option value="dormitorio">Dormitório</option>
          <option value="banheiro">Banheiro</option>
          <option value='10'>Outro</option>
        </select>
      </label>
    </div>
    <div>
      <label>
        Serviço:
        <select class="servicos">
          <option value='x'>Selecione um Serviço</option>
        </select>
      </label>
    </div>
  </form>
</template>

Fazendo desta forma, independente do numero de elementos elementos dentro do seu componente, raramente você terá problemas com um componente interferindo no comportamento de outro, mesmo que se trate de componentes distintos escritos por pessoas diferentes.

1
  • Muitíssimo obrigado cara! Exatamente isso que eu estava precisando! 24/07/2016 às 19:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .