Как добавить текстовое поле ввода в форму с помощью ajax без потери ввода пользователя в форме?

Question

Я искал интернет и StackOverflow для решения, но я еще не придумал его. У меня есть форма, чтобы начать с:

<div class="container_12"> 
<div id="masthead" class="grid_12"> 
<br/><h1>Form Builder</h1>  
</div> 
<div id="main-content" class="grid_8" style="margin-top:-5px"> 
    <form action="" id="form" name="form"> 
     <div id="formbuilder" name="formbuilder"> 
     <label>Question:</label><input type="text" name="question1" id="question1"/><br/> 
     </div> 

     <button type="button" onClick="loadXMLDoc()">Add New Question</button> 
     <input type="submit" name="submit" id="submit"/> 
    </form> 
</div> 
<div id="sidebar" class="grid_4"> 
</div> 

При нажатии кнопки «Добавить вопрос» нажата, он выполнил эту JavaScript:

var count = 1; //only executed once on the initial load. 
function loadXMLDoc() //executed every time the button is pressed. 
{ 
    count++; 
    var xmlhttp; 
    if(window.XMLHttpRequest) 
    {//code for anything better than IE6 
    xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    {//IE6 or lower 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() 
    { 
     if(xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      document.getElementById("formbuilder").innerHTML += xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET", "question.php?c=" + count, true); 
    xmlhttp.send(); 
} 

Это Javascript, в свою очередь, получая новый поле ввода из question.php, которое представляет собой очень простой скрипт php:

<? 
    echo '<label>Question:</label><input type="text" name="question'.$_GET['c'].'" id="question'.$_GET['c'].'"/><br/>'; 
    ?> 

Теперь все работает отлично на первый взгляд. Когда я нажимаю кнопку, создается новое поле вопроса и добавляется к форме. Однако, если бы я должен был иметь какие-либо значения в любом текстовом поле вопроса до нажатия кнопки, все эти данные исчезают, хотя и интуитивно, что этого не должно быть. Чтобы добавить в удовольствие, это происходит только в Chrome и Firefox. По какой-то причине Internet Explorer 9 работает по назначению.

Ясно, что я делаю что-то неправильно, но я не могу понять, что это может быть. Я не работал с AJAX в течение довольно долгого времени, и был бы признателен за любую помощь в этом. Благодаря!

Answer 1

Вместо использования innerHTML вы можете использовать insertAdjacentHTML хотя бы в Chrome и Firefox.

document.getElementById("formbuilder").insertAdjacentHTML("beforeend", xmlhttp.responseText) 

Подробнее об этом MDN page.