1

インターネットと 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 は、非常に単純な php スクリプトである question.php から新しい入力フィールドを取得しています。

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

現在、一見するとすべてが正常に機能しています。ボタンを押すと、新しい質問フィールドが生成され、フォームに追加されます。ただし、ボタンを押す前に質問テキスト ボックスのいずれかに値を入力した場合、そのデータはすべて消えますが、直感的にはそうではありません。さらに面白いことに、これは Chrome と Firefox でのみ発生します。何らかの理由で、Internet Explorer 9 は意図したとおりに動作します。

明らかに私は何か間違ったことをしていますが、それが何であるかはわかりません。私はかなり長い間 AJAX を扱っていませんでしたが、これについて何か助けていただければ幸いです。ありがとう！

4

1 に答える 1

1

innerHTML を使用する代わりに、少なくとも Chrome と Firefox では insertAdjacentHTML を使用できます。

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

詳細については、このMDN ページを参照してください。

于 2013-10-28T19:54:26.280 に答える