dongqu3623 2013-10-28 19:26
浏览 48
已采纳

如何使用ajax将文本输入字段附加到表单而不丢失表单上的用户输入?

I've been searching the internet and StackOverflow for a solution, but I haven't come up with one yet. I have a form to start with:

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

When the "Add New Question" button is pressed, it executed this 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();
}

That javascript is in turn getting a new input field from question.php, which is a very simple php script:

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

Now, everything is working fine at first glance. When I press the button, a new question field is generated and appended to the form. However, if I were to have any values in any of the question text boxes prior to pressing the button, all that data disappears, even though intuitively, that shouldn't be the case. To add to the fun, this only happens in Chrome and Firefox. For some reason Internet Explorer 9 works as intended.

Clearly I'm doing something wrong, but I can't figure out what it may be. I haven't worked with AJAX in quite some time, and would appreciate any help on this one. Thanks!

  • 写回答

1条回答 默认 最新

  • duanpu6319 2013-10-28 19:54
    关注

    Instead of using innerHTML you can use insertAdjacentHTML at least in Chrome and Firefox.

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

    Read more about it from this MDN page.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 无线电能传输系统MATLAB仿真问题
  • ¥50 如何用脚本实现输入法的热键设置
  • ¥20 我想使用一些网络协议或者部分协议也行,主要想实现类似于traceroute的一定步长内的路由拓扑功能
  • ¥30 深度学习,前后端连接
  • ¥15 孟德尔随机化结果不一致
  • ¥15 apm2.8飞控罗盘bad health,加速度计校准失败
  • ¥15 求解O-S方程的特征值问题给出边界层布拉休斯平行流的中性曲线
  • ¥15 谁有desed数据集呀
  • ¥20 手写数字识别运行c仿真时,程序报错错误代码sim211-100
  • ¥15 关于#hadoop#的问题