how to create the dynamic form fields in javascript

Question

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

There's no such thing. Either you find the element(e.g getElementById, querySelector, ...) and change the attribute or completely replace it. note: id should be unique per document (id="Royalties" add numbers to it or use classes instead). But if you want to render HTML from a string just use template literal instead of regular single quote. like var a = `<input name="${somevar}">` — n1md7
– n1md7, Commented Dec 23, 2021 at 8:44

n1md7 · Accepted Answer · 2021-12-23 09:19:12Z

1

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>

answered Dec 23, 2021 at 9:19

n1md7

3,5292 gold badges19 silver badges37 bronze badges

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

Collectives™ on Stack Overflow

how to create the dynamic form fields in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related