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 如何用Labview在myRIO上做LCD显示?(语言-开发语言)
  • ¥15 Vue3地图和异步函数使用
  • ¥15 C++ yoloV5改写遇到的问题
  • ¥20 win11修改中文用户名路径
  • ¥15 win2012磁盘空间不足,c盘正常,d盘无法写入
  • ¥15 用土力学知识进行土坡稳定性分析与挡土墙设计
  • ¥70 PlayWright在Java上连接CDP关联本地Chrome启动失败,貌似是Windows端口转发问题
  • ¥15 帮我写一个c++工程
  • ¥30 Eclipse官网打不开,官网首页进不去,显示无法访问此页面,求解决方法
  • ¥15 关于smbclient 库的使用