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
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>