Dynamically add inputs to a dynamic form

Question

I intend to add dynamic inputs if necessary, in a form that is also returned dynamically in js. I am trying to do it this way, but it is not adding new inputs if necessary.

Code:

for (var i = 0; i < data1.length; i++) { 
 Id = data1[i][0];
 DataRegisto = data1[i][1];
 Cliente = data1[i][2];
 Orcamento = data1[i][3];
 Ref = data1[i][4];
 Designacao = data1[i][5];
 Quantidade = data1[i][6];
 Valor = data1[i][7];

 linha1 += `<div class="input_fields_wrap1">
<div class="form-group col-md-2">  
  <input type="text" class="form-control1" name="Refe[]" value="${Ref}">
  <span class="form-highlight"></span>
  <span class="form-bar"></span>
  <label class="label1" for="Refe">Refª</label>        
</div>
<div class="form-group col-md-2">                       
  <input type="text" class="form-control1" name="Valo[]" value="${Valor}">
  <span class="form-highlight">$</span>                     
  <span class="form-bar"></span>                        
  <label class="label1" for="Valo">Valor</label>        
</div>
<button class="btn btn-warning caixa add_field_button1"><i class="fa fa-plus-square fa-5x taman" aria-hidden="true"></i></button>
</div>`;
$("#retorc1").html(linha1);


$(document).ready(function() {
  var max_fields1 = 100; //maximum input boxes allowed
  var wrapper1 = $(".input_fields_wrap1"); //Fields wrapper
  var add_button1 = $(".add_field_button1"); //Add button ID

  var x1 = 1; //initlal text box count
  $(add_button1).click(function(e) { //on add input button click
    e.preventDefault();
    var length1 = wrapper1.find("input:text").length;

    if (x1 < max_fields1) { //max input box allowed
      x1++; //text box increment

      $(wrapper1).append('<div id="teste1"><div class="form-group col-md-2"><input type="text" class="form-control1" name="Refe[]" /><span class="form-highlight"></span><span class="form-bar"></span><label class="label1" for="Refe">Refª</label></div><div class="form-group col-md-6"><input type="text" class="form-control1" name="Designaca[]" /><span class="form-highlight"></span><span class="form-bar"></span><label class="label1" for="Designaca">Designação</label></div><div class="form-group col-md-2"><input type="text" class="form-control1" name="Qtda[]" /><span class="form-highlight"></span><span class="form-bar"></span><label class="label1" for="Qtda">Quantidade</label></div><div class="form-group col-md-2"><input type="text" class="form-control1 Preco1" name="Valo[]" value="0.00" /><span class="form-highlight">$</span><span class="form-bar"></span><label class="label1" for="Valo">Valor</label></div><button class="remove_field1" style="background-color: #313348;"><span class="fa fa-trash fa-fw" aria-hidden="true"></span></button></div>');
    }
     $('.Preco1').maskMoney({ decimal: '.', thousands: ' ', precision: 2 });
  });

  $(wrapper1).on("click", ".remove_field1", function(e) { //user click on remove text
    e.preventDefault();
    $("#teste1").remove();
    x1--;
  })
 
});

No error is returning, but when I click the button to add lines, it does nothing

I'm trying this way:

I added the onclick to the button:

<button class="btn btn-warning caixa" onclick="adcElemento();"><i class="fa fa-plus-square fa-5x taman" aria-hidden="true"></i></button>

Then I created the following function

function adcElemento() { 
    let myForm;
    myForm = document.getElementById('retorc1');
    document.body.appendChild(myForm);
    let myInput;
    myInput = document.createElement('input');
    myForm.appendChild(myInput);
    myInput.setAttribute('type', 'text');
    myInput.setAttribute('name', 'Refe[]');

}

But it does not add inputs to the form.

I was unable to implement the solution that was given by @Rounin, if anyone can help to implement it in my code I would appreciate it. — Bruno
– Bruno, Commented Oct 12, 2020 at 10:17

Rounin · Accepted Answer · 2020-10-13 18:36:50Z

1

Dynamically add inputs to a dynamic form

Create a form element:

let myForm;
myForm = document.createElement('form');

Add form element to document body:

document.body.appendChild(myForm);

Once you've got your head around creating an element and appending it to a parent element, you can approach creating an input element and appending it to the form element in precisely the same way in which you created a form element and appended it to the body element:

Create and add input element to form element:

let myInput;
myInput = document.createElement('input');
myForm.appendChild(myInput);

Creating and adding new dynamic elements to already-rendered elements is one thing, but what if you want to give your new dynamic element an attribute?

You can do it like this:

myInput.setAttribute('type', 'text');
myInput.setAttribute('value', Ref);

And what if you want to add a class to your new dynamic element?

You can do it like this:

myInput.classList.add('form-control1');

Working Example:

function adcElemento() {
    let myForm = document.getElementById('retorc1');
  
    let myInput = document.createElement('input');
    myInput.setAttribute('type', 'text');
    myInput.setAttribute('name', 'Refe[]');
    
    myForm.appendChild(myInput);
}

input {
  display: block;
  margin: 12px 0 0;
}

<form id="retorc1">
<button type="button" class="btn btn-warning caixa" onclick="adcElemento();">Click Me</button>
</form>

edited Oct 13, 2020 at 18:36

answered Oct 11, 2020 at 11:55

Rounin

29.9k13 gold badges103 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Bruno Over a year ago

I understood the explanation, but I didn't understand how to apply it to my code

Bruno Over a year ago

Do I have to create a new function to apply this code?

Rounin Over a year ago

No, not if you don't want to. Have a play in a javascript sandbox and get used to the DOM manipulation statements above. There are two dozen more, but these statements are a good place to start.

Bruno Over a year ago

I am unable to apply your solution to my code. Can you put the example how to do it with my code?

Rounin Over a year ago

Yes, you're almost there, @Bruno. I've slightly tweaked what you've done and added it to the answer above. It's important to note when you use <button>, if you don't declare <button type="button"> then you will automatically have a submit button (which you probably don't want) - so definitely get into the habit of writing <button type="button">.

|

Collectives™ on Stack Overflow

Dynamically add inputs to a dynamic form

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related