Jak dodać nowe pole tekstowe po kliknięciu przycisku

Question

Chcę utworzyć formularz dla mojego klienta. Mój klient wymaga stworzenia dla niego dynamiki. Załóżmy, że chcę wstawić 1 rekord w głównej tabeli mysql i nagrać wiele rekordów w tabeli pomocniczej, która ma klucz odwołania do głównej tabeli. Nie wiem, ile rekordów w stosunku do głównego stołu, może jednego na raz lub wielu rekordów na raz. Chcę to zrobić w jednym formularzu. Jeśli klikniesz przycisk Dodaj więcej, pojawi się inne pole tekstowe, aby wstawić więcej danych. jak mogę to zrobić ?????

Answer 1

To nie jest związane z php, musisz dynamicznie dodawać do formularza przy użyciu javascript.

Answer 2

It would be possible using pure javascript 

jak ten

<input type="button" onclick="addInput()"/> 

<span id="responce"></span> 
<script> 
var countBox =1; 
var boxName = 0; 
function addInput() 
{ 
    var boxName="textBox"+countBox; 
document.getElementById('responce').innerHTML+='<br/><input type="text" id="'+boxName+'" value="'+boxName+'" " /><br/>'; 
    countBox += 1; 
} 
</script> 

Answer 3

Jest to możliwe poprzez jquery/javascript.

Więc można użyć tego odnośnika: http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/

Wystarczy spróbować !!

Answer 4

oto kod:

function generateTextBox() 
    { 

    var mainDiv=document.getElementById('options'); 
    alert(mainDiv); 
    var newBreak=document.createElement('br'); 
     mainDiv.appendChild(newBreak); 
    for(var i=1;i<=4;i++) 
     { 

    var newTextBox=document.createElement('input'); 
    var newBreak1=document.createElement('br'); 
    var newBreak2=document.createElement('br'); 
    var newBreak3=document.createElement('br'); 
    var text = document.createTextNode("Option"+i); 


    newTextBox.type='text'; 

    newTextBox.setAttribute('id','txtAddr'+i); 
     alert(newTextBox+"2"); 
     mainDiv.appendChild(text); 
    mainDiv.appendChild(newTextBox); 
    mainDiv.appendChild(newBreak1); 
    mainDiv.appendChild(newBreak2); 
    mainDiv.appendChild(newBreak3); 


    } 
}