Question

我目前正在编写一个HTML页面，其中包含一些控制各种事件的JavaScript。

当用户单击“提交”时，页面会自动从服务器加载响应（这是一个用于显示发送到服务器的XML的测试页面以及生成的响应）。我希望用户能够切换回表单并查看他们选择的值（3x下拉列表 - 一个由另一个选择控制，3x文本框 - 由下拉列表控制的值，以及从中加载的文本区域用户使用input type =“file”选择的文本文件。

此页面仅在用户可以切换回表单然后轻松返回响应时才有用。我试图使用cookie来保存值，然后在用户返回页面时将它们加载到输入中，但我的代码拒绝工作。

我在互联网上尝试了几个不同的例子，以及使用Garlic.js，但无论我尝试什么，当我在浏览器中单击“返回”并加载表单时，我的所有输入都消失了。我已经测试了各种脚本并意识到我的代码中存在某种错误，因为当我将这些函数包含在与我的工作下拉函数相同的脚本区域中时，整个表单会中断。

以下是包含cookie方法的脚本：

的 JAVASCRIPT 的

function persist() {
    removeAllCookies();
    var fValues[] = new Array();
    var expiry = new Date(today.getTime() + 3600 * 1000); // 1 hour expiry 
    fValues[0] = document.getElementByName('calcType').value;
    fValues[1] = form.action.value;
    fValues[2] = document.getElementByName('transform').value;
    fValues[3] = document.getElementByName('calcResponse').value;
    fValues[4] = document.getElementByName('source').value;
    fValues[5] = document.getElementById('area').value;
    var i = 0;
    for (i = 0; i <= 6; i++) {
        element = fValues[i];
        writeCookie(i, element, expiry);
    }
}

function fillFromCookies() {
    var a = getCookie("0");
    var b = getCookie("1");
    var c = getCookie("2");
    var d = getCookie("3");
    var e = getCookie("4");
    var f = getCookie("5");
    if (b != null && f != null) {
        document.getElementByName('calcType').value = a;
        form.action.value = b;
        document.getElementByName('transform').value = c;
        document.getElementByName('calcResponse').value = d;
        document.getElementByName('source').value = e;
        document.getElementById('area').value = f;
    }
}

function writeCookie(id, value, expiry) {
    cookievalue = (value + ";");
    document.cookie = id + "=" + cookievalue + "; path=/; expires=" + expiry.toGMTString();
}

function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) c_end = document.cookie.length;
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}

function deleteCookie(name) {
    var expired = new Date(today.getTime() - 24 * 3600 * 1000); 
    document.cookie = name + "=null; path=/; expires=" + expired.toGMTString();
}

function removeAllCookies() {
    deleteCookie("0");
    deleteCookie("1");
    deleteCookie("2");
    deleteCookie("3");
    deleteCookie("4");
    deleteCookie("5");
}

HTML （用于测试目的）

    calcType<br/>
    <textarea name="calcType" cols="150" rows="2">-</textarea><br/><br/>
    transform<br/>
    <input type="text" name="transform" size="50" value="-"/><br/><br/>
    calcResponse<br/>
    <input type="text" name="calcResponse" size="50" value="-"/><br/><br/>
    source<br/>
    <input type="text" name="source" size="50" value="-"/><br/><br/>
    test<br/>
    <input type="text" name="test" size="50" value="test"/><br/><br/>
    environment         
        <select id="Environment">
            <option>Pick one</option>
            <option>TEST</option>
        </select><div>
    product
        <select id="Product">
            <option>Pick one</option>
            <option>TEST</option>
        </select><div>
    brand
        <select id="Brand">
            <option>Choose Product First</option>
            <option>TEST</option>
        </select>
    <textarea id = "area" onload = "fillFromCookies();" name="calcData" cols="150" rows="50">

我将persist（）函数称为：<form ..onsubmit="persist()"...>

我在文本区域调用fillFromCookies（）（包含所选文件中的txt） textarea ..onload="fillFromCookies();"财产。（它是HTML代码中的最后一个元素）。

我对javascript相对较新，所以对代码的任何评论都是受欢迎和赞赏的。

Answer 1

我不确定您的要求是什么，但我的建议是使用ajax将表单发布到服务器，这样就可以保留表单，因为没有帖子/回叫来处理。你调用另一个页面，然后返回你的xml，我相信你可以用JQuery解析，但如果你只能使用javascript，你仍然可以这样做，但它会更多涉及。

$.ajax({url : url, dataType: "xml", success : function(data) { }, 
    error : function(request, status, error) { }
});

如果由于某种原因发布页面非常重要，那么您可以在将表单发送到客户端之前使用动态html填充表单，具体取决于您使用的服务器端技术如何执行此操作会有所不同。不幸的是，如果不了解更多，我无法帮助你。

最后这里有一个关于在javascript中设置cookie的教程。希望这可以帮助： http://sicanstudios.com/post/set-cookies-javascript/

Answer 2

我一直在努力使用Cookie，甚至考虑使用AJAX将响应返回到单独的文本框。经过大量的研究后，我找到了一种非常方便的方法来保持表格的完整性，以便比较响应和输入：在单独的选项卡中打开响应。

通过将target="_blank"添加到表单标记中，服务器返回的XML现在显示在新选项卡中。 Cookie本来是一种方式，但是由于纯Javascript和不同的JQuery插件，我遇到了很多问题（由于初学者的理解）。

表格值在提交后保留为cookie页面更改

2 个答案: