How can I create a dynamic form using JavaScript?

How can I create a dynamic form using JavaScript?

You can create a dynamic form by using JavaScript to manipulate the DOM. Start by creating a basic HTML form and then use JavaScript to add or remove fields based on user interaction.

Can you show me a simple example?

Sure! Here's a basic example:

<form id="dynamicForm">
  <input type="text" name="name" placeholder="Your Name" />
  <button type="button" onclick="addField()">Add Field</button>
</form>
<script>
function addField() {
  const form = document.getElementById('dynamicForm');
  const newField = document.createElement('input');
  newField.type = 'text';
  newField.placeholder = 'Additional Field';
  form.appendChild(newField);
}
</script>

What if I want to remove a field?

You can modify the addField function to keep track of the fields and remove the last one added. Here's an updated example:

let fields = [];

function addField() {
  const form = document.getElementById('dynamicForm');
  const newField = document.createElement('input');
  newField.type = 'text';
  newField.placeholder = 'Additional Field';
  fields.push(newField);
  form.appendChild(newField);
}

function removeField() {
  const form = document.getElementById('dynamicForm');
  if (fields.length > 0) {
    form.removeChild(fields.pop());
  }
}