1

我目前正在编写一个 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()"...>

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

我对 javascript 比较陌生，因此欢迎和赞赏对代码的任何评论。

4

2 回答 2

0

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

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

于 2013-07-08T15:10:12.693 回答
0

我不确定您的要求是什么，但我的建议是使用 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/

于 2013-07-08T10:42:56.760 回答