HTML (Only) FORM Based on user input-CodePudding

how do i let the user add its own custom data in html form. some businesses we deal with have multiple addresses:

Example:

How mane locations do you have: 5
the form will then populate enough input boxes for 5 different addresses.

form action="/action_page"> Orgnization Name:

Last name:

CodePudding user response：

You can run a loop that creates the Input element.

<body>
    <form action="" method="">
        <input type="number" id="noOfAddresses" style="margin-bottom: 10px;"> No. of Addresses.
        <button type="button" id="addBtn">Add</button>
        <div id="addressInputs" style="display: flex; flex-direction: column; width : 170px; gap : 10px;"></div>
    </form>

    <script>
        let addBtn = document.getElementById("addBtn"); 
        let addressInputs = document.getElementById("addressInputs"); 
    
        addBtn.addEventListener("click", ()=>{

        let noOfAddresses = parseInt(document.getElementById("noOfAddresses").value); 
        for (let i = 0; i < noOfAddresses; i  ){
            const input = document.createElement("input"); 
            addressInputs.appendChild(input); 
        }
    })

    </script>
</body>