Duplicate code with jquery without refresh and delete text in the form inputs

Navigation
0

I'm creating this JavaScript function, it creates a form and adds it to the body of the text in another div, but when I click the button it deletes the content that was already written in the input. 

<buttononclick="addPergunta(); return false"  class="btn btn-warning  btnPrincipal"  name="2">ABERTA <i class="glyphicon glyphicon-plus-sign"></i> </button>
<script>
 var conti = 0;
        function addPergunta() {
        conti++;
        var htmlNovo = "";
        htmlNovo += 
                '<div class="main-login main-center">' +
                '<form class="form-horizontal" method="post" action="#">' +
                '<div class="form-group">' +
                '<label for="name" class="cols-sm-2 control-label">Digite sua pergunta.</label>' +
                '<div class="cols-sm-10">' +
                '<div class="input-group">' +
                '<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>' +
                '<input type="text" class="form-control" name="pergunt' + conti + ' " id="name" placeholder="Qual seu nome?" />' +
                '</div></div></div></form></div></div></div></div></div>' + '';
        document.getElementById("multiplaescolha").innerHTML += htmlNovo;

        return false;
        }


 </script>
    
asked by anonymous 07.03.2018 / 19:42

3 answers

0

Use insertAdjacentHTML , it's simple and native. This way you do not have to create lots of lines with createElement or use the unnecessary lines of jQUery .

With this function you simply pass as the first parameter:

  • beforebegin : Before the element.
  • afterbegin : Inside the element, before your first child
  • beforeend : Within the element, after its last child
  • afterend : After the element.

The second parameter, you pass your HTML, for example: 

function addPergunta() {
        conti++;
        var htmlNovo = "";
        htmlNovo += 
                '<div class="main-login main-center">' +
                '<form class="form-horizontal" method="post" action="#">' +
                '<div class="form-group">' +
                '<label for="name" class="cols-sm-2 control-label">Digite sua pergunta.</label>' +
                '<div class="cols-sm-10">' +
                '<div class="input-group">' +
                '<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>' +
                '<input type="text" class="form-control" name="pergunt' + conti + ' " id="name" placeholder="Qual seu nome?" />' +
                '</div></div></div></form></div></div></div></div></div>' + '';


        document.getElementById("multiplaescolha").insertAdjacentHTML('beforeend', htmlNovo);

        return false;
        }


let conti = 0;

function addPergunta() {
  conti++;
  var htmlNovo = "";
  htmlNovo +=
    '<div class="main-login main-center">' +
    '<form class="form-horizontal" method="post" action="#">' +
    '<div class="form-group">' +
    '<label for="name" class="cols-sm-2 control-label">Digite sua pergunta.</label>' +
    '<div class="cols-sm-10">' +
    '<div class="input-group">' +
    '<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>' +
    '<input type="text" class="form-control" name="pergunta' + conti + ' " id="name" placeholder="Qual seu nome?" />' +
    '</div></div></div></form></div></div></div></div></div>' + '';


  document.getElementById("multiplaescolha").insertAdjacentHTML('beforeend', htmlNovo);

  return false;
}
<div id="multiplaescolha"></div>
<button type="button" onClick="addPergunta()">Adiciona pergunta</button>
    
07.03.2018 / 21:27
0

When you need to create dynamic components on the page, try using the DOM API for this whenever possible. Avoid simply concatenating an "HTML" string in the innerHTML of the element. Take a look at the code I made .. (did not check if everything is 100% the attributes set in js, but it is not difficult to fix if necessary some detail) 

var container = document.querySelector("#perguntaContainer");
var btnAdd = document.querySelector("#addPergunta");

var perguntas = 0;

btnAdd.addEventListener('click', addPergunta);

function addPergunta() {
  let wrapper = document.createElement('div');
  wrapper.classList.add('main-login', 'main-center');
  
  let form = document.createElement('form');
  form.classList.add('form-horizontal');
  
  wrapper.appendChild(form);
  
  let formGroup = document.createElement('div');
  formGroup.classList.add('form-group');
  
  form.appendChild(formGroup);
  
  let nameLabel = document.createElement('label');
  nameLabel.setAttribute('for', 'name');
  nameLabel.classList.add('cols-sm-2', 'control-label');
  nameLabel.appendChild(document.createTextNode('Digite sua pergunta.'));
  
  formGroup.appendChild(nameLabel);
  
  let innerDiv = document.createElement('div');
  innerDiv.classList.add('cols-sm-10');
  
  formGroup.appendChild(innerDiv);
  
  let inputGroup = document.createElement('div');
  inputGroup.classList.add('input-group');
  
  innerDiv.appendChild(inputGroup);
  
  let inputGroupAddon = document.createElement('span');
  inputGroupAddon.classList.add('input-group-addon');
  
  inputGroup.appendChild(inputGroupAddon);
  
  let userIcon = document.createElement('i');
  userIcon.classList.add('fa', 'fa-user');
  userIcon.setAttribute('aria-hidden', 'true');
  
  inputGroupAddon.appendChild(userIcon);
  
  let input = document.createElement('input');
  input.type = 'text';
  input.id = 'name';
  input.placeholder = 'Qual seu nome?';
  input.name = 'pergunt' + (perguntas++);
  input.classList.add('form-control');
  
  inputGroup.appendChild(input);
  
  container.appendChild(wrapper);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<button id="addPergunta">Nova Pergunta</button>
<div id="perguntaContainer"></div>
    
07.03.2018 / 20:23
0

You are using Bootstrap that uses jQuery. So you do not need to "miraculate" with pure JS. Enjoy the facilities that jQuery offers and use the .append() method: 

var conti = 0;
function addPergunta() {
   conti++;
   var htmlNovo = 
          '<div class="main-login main-center">' +
          '<form class="form-horizontal" method="post" action="#">' +
          '<div class="form-group">' +
          '<label for="name" class="cols-sm-2 control-label">Digite sua pergunta.</label>' +
          '<div class="cols-sm-10">' +
          '<div class="input-group">' +
          '<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>' +
          '<input type="text" class="form-control" name="pergunt' + conti + ' " id="name" placeholder="Qual seu nome?" />' +
          '</div></div></div></form></div></div></div></div></div>' + '';
   $("#multiplaescolha").append(htmlNovo);
}

This statement is also unnecessary var htmlNovo = ""; and return false; .

Example: 

var conti = 0;
function addPergunta() {
   conti++;
   var htmlNovo = 
          '<div class="main-login main-center">' +
          '<form class="form-horizontal" method="post" action="#">' +
          '<div class="form-group">' +
          '<label for="name" class="cols-sm-2 control-label">Digite sua pergunta.</label>' +
          '<div class="cols-sm-10">' +
          '<div class="input-group">' +
          '<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>' +
          '<input type="text" class="form-control" name="pergunt' + conti + ' " id="name" placeholder="Qual seu nome?" />' +
          '</div></div></div></form></div></div></div></div></div>' + '';
   $("#multiplaescolha").append(htmlNovo);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="multiplaescolha"></div>
<button onclick="addPergunta(); return false"  class="btn btn-warning  btnPrincipal"  name="2">ABERTA <i class="glyphicon glyphicon-plus-sign"></i> </button>
    
07.03.2018 / 21:13
Conflict bootstrap and jquery Error accessing External API Cordova