How do I create a "+" button that adds new fields to my form

Question

How do I create a "+" button that adds new fields to my form

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

How do I make a "+" button add new fields to a form? I even found a way to do it, but it is bugged and I do not know how to solve it.

var cont = 1;
      function newContest(){
        var c1 = '<td align="center"><select name="SITE_ID"><option value="1">CD-MOJ</option><option value="2">SPOJ-BR</option><option value="3">SPOJ-WWW</option></select></td>'
        var c2 = '<td align="left" id="siteID"><input type="text" name="ID_SITE"></td>'
        var c3 = '<td align="left" id="NOME_COMPLETO_SITE"><input type="text" name="NOME_COMPLETO_SITE"></td>'
        var c4 = '<td align="left" id="NOME_PEQUENO"><input type="text" name="NOME_PEQUENO" size="1" value=&#65></td>'
        document.getElementById('NovoCampo1').innerHTML+= c1;
        document.getElementById('NovoCampo2').innerHTML+= c2;
        document.getElementById('NovoCampo3').innerHTML+= c3; 
        document.getElementById('NovoCampo4').innerHTML+= c4;
        cont++;      
      }

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<form>
			<fieldset id="Contest_ID">
				<legend>Novo Contest</legend>
				<table>
					<tr>
              <td align="left">Site ID:</td>
              <td align="center">
                <select name="SITE_ID" id="SITE_ID" >
                  <option value="1">CD-MOJ</option>
                  <option value="2">SPOJ-BR</option>
                  <option value="3">SPOJ-WWW</option>
                </select>
              </td>
              <td align="left"><input type="text" id="ID_SITE"></td>
              <td align="left"><input type="text" id="NOME_COMPLETO_SITE"></td>
              <td align="left"><input type="text" id="NOME_PEQUENO"value="&#65"></td>
              <td align="left"><button type="button" id="botao" onclick="newContest()">+</button></td>
            </tr>
            <tr>
              <td align="left"></td>
              <td align="center" id="NovoCampo1"></td>
              <td align="left" id="NovoCampo2"></td>
              <td align="left" id="NovoCampo3"></td>
              <td align="center" id="NovoCampo4"></td>
            </tr>
           </table>
        </fieldset>
		</form>
	</body>
</html>

When I click the + button everything I wrote in the fields appears. Why is this happening and how can I resolve it?

javascript html

asked by anonymous 29.04.2018 / 20:55

2 answers

0

I particularly love Vue.js.

With it you can leave the rendering dynamics of html in real time. This example automates the process of displaying the content.

var app = new Vue({
  el: '#inputs',
  data: {    
    values: [],
    id:'',
    name: '',
    shortname: '',
    selects: ['CD-MOJ', 'SPOJ-BR' ,'SPOJ-WWW']
  },
  methods:{
      add: function(){
        this.values.push({id:this.id , name:this.name , shortname:this.shortname}) 
        this.id = '' ;
        this.name ='' ; 
        this.shortname='';             
      }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script><divid="inputs">
    <form>
        <fieldset id="Contest_ID">
            <legend>Novo Contest</legend>
            <table>
                <tr>
                    <td align="left">Site ID:</td>                  
                    <td align="center">
                        <select v-model="id" >
                            <option v-for="(select , i) in selects" :value="i">{{select}}</option>                           
                        </select>
                    </td>
                    <td align="left"><input type="text" v-model='id'></td>
                    <td align="left"><input type="text" v-model='name' ></td>
                    <td align="left"><input type="text" v-model='shortname' ></td>
                    <td align="left"><button type="button" v-on:click="add()" id="botao">+</button></td>
                </tr>
                <tr v-if='values.length > 0' v-for="value in values">
                        <td align="left">Site ID:</td>
                        <td align="center">
                            <select v-model="value.id">
                                <option v-for="(select , i) in selects" :value="i">{{select}}</option>                               
                            </select>
                        </td> 
                    <td align="left"><input type="text" :value="value.id"></td>
                    <td align="left"><input type="text" :value="value.name"></td>
                    <td align="left"><input type="text" :value="value.shortname"></td>   
                </tr>                            
            </table>
        </fieldset>            
    </form>   
</div>

29.04.2018 / 22:18

Thread Problems in Java FX Set shadow to create gradient effect

score 1 · Accepted Answer

When you use element.innerHTML += , all elements within element are removed and put back together. You can resolve using appendChild , but you can also arrange the html for facilitate a copy of it and use the cloneNode(true) function (the true says that the elements inside the cloned element will also be copied) and the function insertBefore / a>.

let botao = document.getElementById("botao");

botao.addEventListener("click", newContest);

function newContest() {
  //cria um elemento "novo" que é uma cópia do formulário que existe
  let novo = document.querySelector('div.contest').cloneNode(true),
    form = document.querySelector('form'),
    novoInputs = novo.getElementsByTagName('input');

  //limpa os campos do novo elemento
  for (let i = 0; i < novoInputs.length; i++) {
    novoInputs[i].value = "";
  }

  //coloca o novo elemento no formulário
  form.insertBefore(novo, botao);
}

body {
  display: flex;
}

select {
  width: 17.5%;
}

input[type="text"] {
  width: 20%;
}

<!DOCTYPE HTML>
<html>
<head>
  <title>Form</title>
</head>
<body>
  <form action="">
    <div class="contest">
      <span>Site ID:</span>
      <select name="SITE_ID" id="SITE_ID">
        <option value="1">CD-MOJ</option>
        <option value="2">SPOJ-BR</option>
        <option value="3">SPOJ-WWW</option>
      </select>
      <input type="text" id="ID_SITE">
      <input type="text" id="NOME_COMPLETO_SITE">
      <input type="text" id="NOME_PEQUENO">
    </div>
    <button type="button" id="botao">+</button>
  </form>
</body>
</html>