Generate Form by Clicking the Button

Question

Generate Form by Clicking the Button

Asked 7 years, 11 months ago

Viewed 244 times

1

I’m making a form that by clicking the Add button, I get a new form. So far so good, but every time I get a new one, I have two selects, so when I choose some index of the first one, press such options in the second one. The problem is when I submit the second form, when I click on something in select... change the content of the first form select.

Can someone 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;

1 answer

Browser other questions tagged javascript html

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

by Tobias Mesquita • **22,900** points · Answer 1 · 2016-07-24T18:17:25+00:00

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

1 - Use the template tag

Put all the markup initial component within a tag <template>, so whenever you need to create a new component, just import the content from template.

2 - Set the Scope

Set a scope for your component, usually it is a HTMLElement which is at the root of template and preference of brothers.

3 - Do not give ids to template elements

Remember, the ids should be unique, so avoid giving a id They, if you need to do it, add some logic to your script add some unique information to ids... for example, an element input#texto should come 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 defines the events

made the appropriate observations, let’s take 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>

By doing so, regardless of the number of elements within your component, you will rarely have problems with one component interfering with the behavior of another, even if they are distinct components written by different people.