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

Asked

Viewed 47 times

1

How do I get a "+" button to add new fields in a form? I even found a way to do it here, only I don’t know how to fix 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 on the button + all that I had written in the fields is gone. Why is this happening and how I can solve?

javascript html form

2 answers

1


When you use element.innerHTML +=, all elements within element are removed and put back together. You can solve using the appendChild, but you can also organize the html to make it easy to copy and use the function cloneNode(true) (the argument true says that the elements inside the cloned element will also be copied) and the function insertBefore. 

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>

0

I particularly love Vue.js.

With it it is possible to leave the dynamics of html rendering in real time. This example automates the content display process.

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>
<div id="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>

Browser other questions tagged javascript html form

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