Hinzufügen Textfeld auf die Schaltfläche klicken Sie auf mit javascript

Arbeite ich an einem web-Formular mit einem Textfeld für Haustiere und eine "hinzufügen pet" - button. Jedes mal, wenn die Schaltfläche geklickt wird, wird eine zusätzliche textbox angezeigt werden sollen, unten das original.

Ich gehe davon aus das würde erreicht werden mit einem onclick-Ereignis, aber ich kann nicht herausfinden, wie man es an die Arbeit.

Hier ist der code, den ich bisher:

    <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>

Gibt es andere Teile, um diese als gut, aber keiner von Ihnen beeinflussen dieses spezielle problem habe ich also nicht die Notwendigkeit zu sehen, enthalten den vollständigen code, da es ziemlich lange.

Anregungen sind wir sehr dankbar.

Update:
Ich merke nach der Lektüre der Antworten, die ich haben sollte mehr von meinem code, um Euch eine bessere Vorstellung von den tatsächlichen layout meiner Seite. Ich habe mehrere Textfelder in meinem Formular und die zusätzliche Textfelder angezeigt werden rechts unten die original - "Tiere" - textbox. Hier ist ein jfiddle warf ich zusammen, um Euch eine bessere Vorstellung von dem layout. http://jsfiddle.net/a5m8nqwk/

Syntax-Fehler, var copy = <input type="text">; schlecht ist JavaScript.
Es gibt verschiedene Komplikationen, die auf dieses problem. Nämlich, das hinzufügen von DOM-Elementen, anfügen von Ereignishandlern, und setzt neue Formular-element-Namen eindeutig sein und kompatibel mit dem server-scripts. Ich bin nur lassen Sie wissen.
ja, ich hauptsächlich nur damit zu tun, so würde es so etwas gibt. Es zeigte sich, die syntax-Fehler, wenn ich beschlossen, es zu versuchen, nur für den Fall.

InformationsquelleAutor Beth Tanner | 2014-10-07

2

Sie könnte leicht fügen Sie Elemente zum 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());
});
```
- Sie hatte Tippfehler, docent 🙂
- Das funktioniert auch, aber ich glaube, ich sollte geschrieben haben, mehr von meinem code. Meine Seite hat mehrere Textfelder, und wenn ich diese in die zusätzlichen Boxen positioniert sind, unter dem Formular. Gibt es eine Möglichkeit, um die zusätzlichen Textfelder zur Anzeige unter dem original ein. Ich zusammen eine Geige, um Ihnen eine bessere Vorstellung von dem layout meiner Seite. jsfiddle.net/a5m8nqwk
- jsfiddle.net/g1qswted/1
InformationsquelleAutor Sukima

Etwas wie diesem?

<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);
}

Bearbeiten: ich würde vorschlagen, mit einer Tabelle, style-input-Boxen, halten Sie in Linie. GEIGE

Genau, außer, dass ich da tatsächlich mehrere Textboxen auf meiner Seite, dies ist das hinzufügen der zusätzlichen Textfelder unterhalb des Formulars. Gibt es eine Möglichkeit, die zusätzlichen text-Felder werden angezeigt, direkt unter dem original. Ich werde zusammen ein Turnschuh, so dass Sie können erhalten eine bessere Vorstellung von dem layout meiner Seite.
jsfiddle.net/a5m8nqwk

InformationsquelleAutor akinuri

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.