0

I'm working on a web form with a textbox for pets and an "add pet" button. Each time the button is clicked, an additional textbox should be displayed below the original one.

I'm assuming this would be accomplished with an onclick event, but I can't figure out how to get it to work.

Here is the code I have so far:

    <html>
    <head>
     <title>Project 4</title>
    </head>

    <body>
            <form name="myForm" onsubmit="return validateForm()">
            Pets: <input type="text" id="pets"> 
            <input type="button" id="addPet" value="Add Pet">
            <br>
            </form>
        <script type="text/javascript">
            function makeCopy() {
                var copy = <input type="text">;
                return copy;
            }
        </script>
    </body>
</html>

There are other pieces to this as well, but none of them affect this particular problem I am having so didn't see the need to include the full code as it's fairly long.

Any suggestions are greatly appreciated.

Update: I realize after reading the answers that I should've included more of my code to give you guys a better idea of the actual layout of my page. I have several text fields in my form and need the additional textboxes to be displayed right below the original "pets" textbox. Here's a jfiddle I threw together to give you guys a better idea of the layout. http://jsfiddle.net/a5m8nqwk/

Improve this question
3
  • 1
    Syntax error, var copy = <input type="text">; is bad JavaScript. Commented Oct 7, 2014 at 1:59
  • There are several complications on this problem. Namely, adding DOM elements, attaching event handlers, and setting new form element names to be unique and compatible with your server scripts. I'm just letting you know. Commented Oct 7, 2014 at 2:04
  • @Sukima, yeah, I mainly just put that in there so there would be something there. It showed the syntax error when I decided to try it just in case. Commented Oct 7, 2014 at 2:06

3 Answers 3

Reset to default
3

Something like this?

<form name="myForm" id="myForm" onsubmit="return validateForm()">
    Pets: <br />
    <input type="text" id="pets" />
    <input type="button" id="addPet" value="Add Pet" />
    <br/>
</form>



document.getElementById("addPet").onclick = function() {
    var form = document.getElementById("myForm");
    var input = document.createElement("input");
    input.type = "text";
    var br = document.createElement("br");
    form.appendChild(input);
    form.appendChild(br);
}

Edit: I'd suggest using a table to style the input boxes, keep them in line. FIDDLE

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Exactly, except that since I actually have several textboxes on my page, this is adding the additional textboxes below the form. Is there a way to to have the additional text fields display directly below the original. I'll put together a fiddle so you can get a better idea of the layout of my page.
1

You could easily add elements to the DOM:

function createPetField() {
  var input = document.createElement('input');
  input.type = 'text';
  input.name = 'pet[]';
  return input;
}

var form = document.getElementById('myForm');
document.getElementById('addPet').addEventListener('click', function(e) {
  form.appendChild(createPetField());
});
Improve this answer

2 Comments

You had typo, docent :-)
This works, but I guess I should have posted more of my code. My actual page has several textboxes, and when I add this in, the additional boxes are positioned below the form. Is there a way to get the additional textboxes to display below the original one. I put together a fiddle to give you a better idea of the layout of my page. jsfiddle.net/a5m8nqwk
0 

function add(type) {

    //Create an input type dynamically.
    var element = document.createElement("input");
    var text = document.getElementById("textId");

    //Append the element in page (in span).
    text.appendChild(element);

}
 h1 {
            color: #0000ff;
        }
<h1>KIAAT</h1>
    <b>Adding textbox on button click with javascript</b>
    <br><br>
<form>
    <input placeholder="text" name="element" hidden> </input>
    <input type="button" value="Click Me" onclick="add(document.forms[0].element.value)"/>
    <span id="textId">&nbsp;</span>
</form>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.