Generate Form by Clicking the Button

Question

Generate Form by Clicking the Button

Navigation

#1 by (1 votes)

0

I'm making a form that when I click the Add button, I generate a new form. So far so good, but every time I make a new one, I have two selects, so when I choose some index of the first, load those options in the second. The problem is when I generate the second form, when I click on something in the select ... I change the select index of the first form.

Can anyone help me?

<!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>

JavaScript code

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;

javascript html

asked by anonymous 24.07.2016 / 16:23

1 answer

Add different columns in the same result Add sql query value to variable dynamically

score 1 · Accepted Answer

I see that you are trying to create a component type for your page, so I'll try to give you some tips that might help you achieve your goal.

1 - Use the template tag

Put all of the component's markup inside a tag <template> , so whenever you need to create a new component, just import the contents of template .

2 - Define Scope

Define a scope for your component, usually it is a HTMLElement that is in the root of template and preferably of siblings.

3 - Do not give ids to template elements

Remember, ids must be unique, so avoid giving id to them, if you need to do so, add some logic to your script that adds some unique information to ids .. for example, a input#texto element should come from something like input#texto_1 , input#texto_2 or input#texto_3 depending on the amount of components already created.

4 - create a function or "class" that receives the scope and define the events

Given the appropriate comments, let's look at the example.:

(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>

In this way, regardless of the number of element elements within your component, you will rarely have problems with one component interfering with the behavior of another, even if it is distinct components written by different people.