Hinzufügen eines Textfeld, bei Klick auf eine Schaltfläche mit javascript

Unten habe ich die javascript und html, die ich momentan in meinem Projekt. Ich möchte eine text-input-Feld, das aussieht wie das erste im html-code erscheint direkt unterhalb es nach den 'HINZUFÜGEN' - Schaltfläche geklickt wird.

Im moment den zusätzlichen text-Felder angezeigt, aber Sie scheinen unter der Schaltfläche "Hinzufügen" und Sie erscheinen neben einander, nicht unter einander.

<script>    
    function add_field() 
    {
        var form = document.getElementsByTagName('form')[0],
        input = document.createElement('input');
        input.setAttribute('type', 'text');
        input.setAttribute('name', 'item');
        form.appendChild(input);
    };
</script>
<form name="input" method="get">
    <div class="ui-input-text">
        <input type="text" name="item"><br>
        <div data-role="navbar">
            <button type="button" onclick="add_field()">ADD</button><br>
        </div>
    </div>
</form>
InformationsquelleAutor user3161496 | 2014-01-04
  1. 3

    Dies ist eine einfache demonstration, die erreicht, was Sie suchen:

    <form name="input" method="get">
  <input type="text" name="item">
</form>
<button type="button" onclick="add_field()">ADD</button>

    css:

    input {
  display: block;
}

    Einige hilfreiche Hinweise:

    Nicht verwenden <br> für die Abstände der Elemente. Verwenden Sie stattdessen die css-Stile wie display: block und margin.

    Inline-js (wie onlick in Ihre html) kann einige unangenehme Nebenwirkungen und ist nicht eine gute Praxis für eine Vielzahl von Gründen, Lesen Sie einige dieser Ergebnisse: https://www.google.com/search?q=Why+ist+inline+js+schlecht%3F

    Statt inline-js, Sie könnten dies tun:

    //get button reference
var myBtn = document.getElementById('myBtn');

//add click function
myBtn.addEventListener('click', function(event) {
  addField();
});

    Haben Sie einige div tags in Ihrem Formular schließen außerhalb der form. Wenn ein element beginnt innerhalb eines anderen Elements, sicher sein, um es zu schließen vor dem schließen des parent-Elements.

    Hier ist eine demo von alle diesem: http://jsbin.com/igoVoTEr/1/edit

    Wenn Sie die-Taste, um im inneren der form, die Sie einfügen könnte der Eingänge, bevor es, wie dieser:

    function addField() {
  var input = document.createElement('input');
  //insert before the button
  form.insertBefore(input, myBtn);
}

    Live-demo hier: http://jsbin.com/igoVoTEr/2/edit

    InformationsquelleAutor m59
Schreibe einen Kommentar