Question

0

36

Views

how to create the dynamic form fields in javascript

i want to create a dynamic form like the user needs to add attribute but those attribute not defined previously he can add as many he can for example he created a dress he want to add attribute like size he will click on add attribuute that will generate an html i have did this but there i need to insert some variable so i can change the name of the attributes

var i =1;
function add_fields() {
    var emptydiv = document.createElement('div')
    emptydiv.innerHTML = '<div class="col-12 col-md-6"><div class="group"><input type="text" name="`{i}`" id="Royalties" required><span class="highlight"></span><span class="bar"></span><label>Attributes</label></div></div><div class="col-12 col-md-6"><div class="group"><input type="text" name="Size" id="Size" required><span class="highlight"></span><span class="bar"></span><label>value</label></div></div></div>'
    document.getElementById('addable').appendChild(emptydiv);
    i++;
    console.log(i)
    return emptydiv;     
    // console.log("Hello world")                   
}

what i want to change the name fields in this html by the variable i

about 1 month ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Accepted Answer · 2022-07-06T15:22:02.180Z

I believe this is what you are trying to accomplish.

I changed regular single quotes into a template literal

var i =1;
function add_fields() {
    var emptydiv = document.createElement('div')
    emptydiv.innerHTML = `<div class="col-12 col-md-6"><div class="group"><input type="text" name="${i}" required><span class="highlight"></span><span class="bar"></span><label>Attributes</label></div></div><div class="col-12 col-md-6"><div class="group"><input type="text" name="Size" id="Size" required><span class="highlight"></span><span class="bar"></span><label>value</label></div></div></div>`
    document.getElementById('addable').appendChild(emptydiv);
    i++;
    console.log(i)
    return emptydiv;     
    // console.log("Hello world")                   
}

add_fields();

<div id="addable"></div>