<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 >'
                 '<div >'
                 '<div >'
                 '<label >Title   count</label>'
                 '<input type="text"  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

CodePudding user response：

• I am selecting button using document.querySelector("#add").
• After that I am attaching click event on it.
• e.preventDefault() to stop default behavior of form for submitting.
• Than I am taking number value converting it to integer from string input and running for-loop.
• I am not validating user input here.
• And lastly, appending row in selected 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 ><div ><div ><label >Title   count</label><input type="text"  v-model="act"></div></div></div>`
  }
});

'<div >' '<div >' '<div >' '<label >Title   count</label>' '<input type="text"  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>