Home/ Questions/Q 8612283
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T04:35:18+00:00

I would like to have an Add another field button that creates a text

  • 0

I would like to have an Add another field button that creates a text field <input type="text" name="pet"> each time that button is pressed.

I currently have this code:

<html>
<head>
<script>    
function add_field() 
{
  document.write( '<input type="text" name="pet">' );
};
</script>
</head>
<body>

<form name="input" method="get">
Favourite pets:<br> 
<input type="text" name="pet">
<button type="button" onclick="add_field()">Add another field</button><br>
<input type="submit" value="Submit"><br>
</form>

</body>
</html>

But when I press the Add another field button I just get a page with only a text field, all my other content disappears. How do I still keep my other html content while adding another text field?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This line:

    document.write( '<input type="text" name="pet">' );

    Will replace the entire document with the inserted markup. If you want to append the input field, you need to find the form you want to append to, create the input field and append it. Try something like:

    var form = document.getElementsByTagName('form')[0],
    input = document.createElement('input');

input.setAttribute('type', 'text');
input.setAttribute('name', 'pet');
form.appendChild(input);

    This will insert the input in the end of the form. You can use other methods, such as insertBefore to place the input field where you want it.

    Or use jQuery.

    • 0