<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<form>
num: <input type="number" name="a" id="num"><br>
<button onclick="addnewrow()">Add</button>
</form>
function addnewrow(num) {
var num = document.getElementById('num').value
var count = 1
for (i = 0; i <=num; i++)
{
var newrow = '<div class="row">'
+ '<div class="col-md-4">'
+ '<div class="form-group label-floating">'
+ '<label class="control-label">Title + count</label>'
+ '<input type="text" class="form-control" v-model="act" >'
+ '</div>'
+ '</div>'
+ '</div>';
count++:
return newrow;
}
}
This html code is supposed to take in an input number in the first form the output that number of form rows, however this doesn't work how can this be amended for it to work
document.querySelector("#add").click event on it.e.preventDefault() to stop default behavior of form for submitting.for-loop.main div using innerHTML.const main = document.querySelector("#main");
const addButton = document.querySelector("#add");
addButton.addEventListener("click", (e) => {
e.preventDefault();
var num = parseInt(document.getElementById('num').value);
for (i = 1; i <= num; i++) {
main.innerHTML += `<div class="row"><div class="col-md-4"><div class="form-group label-floating"><label class="control-label">Title + count</label><input type="text" class="form-control" v-model="act"></div></div></div>`
}
});'<div class="row">'+'<div class="col-md-4">'+'<div class="form-group label-floating">'+'<label class="control-label">Title + count</label>'+'<input type="text" class="form-control" v-model="act" >'+'</div>'+'</div>'+'</div>';<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
num: <input type="number" name="a" id="num"><br>
<button id="add">Add</button>
<div id="main"></div>
</form>