1

現在、さまざまなイベントを制御する JavaScript を使用して HTML ページを作成しています。

ユーザーが [送信] をクリックすると、ページはサーバーからの応答を自動的に読み込みます (これは、サーバーに送信された XML と結果の応答を表示するために使用されるテスト ページです)。ユーザーがフォームに戻って、選択した値を確認できるようにしたい (3 つのドロップダウン - 別の選択によって制御される 3 つのテキストボックス - ドロップダウンによって制御される値、およびロードされるテキスト領域)ユーザーが input type="file" を使用して選択したテキスト ファイル)。

このページは、ユーザーが簡単にフォームに戻って応答に戻ることができる場合にのみ役立ちます。Cookie を使用して値を保存し、ユーザーがページに戻ったときに値を入力にロードしようとしましたが、コードが機能しません。

Garlic.jsを使用するだけでなく、インターネットでいくつかの異なる例を試しましたが、何を試しても、ブラウザーで「戻る」をクリックしてフォームが読み込まれると、すべての入力がなくなります。さまざまなスクリプトをテストしたところ、コードに何らかの間違いがあることに気付きました。これらの関数を作業中のドロップダウン関数と同じスクリプト領域内に含めると、フォーム全体が壊れてしまいます。

Cookie メソッドを含むスクリプトは次のとおりです。

ジャバスクリプト

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 を含む) プロパティで fillFromCookies() を呼び出し textarea ..onload="fillFromCookies();"ます。(HTML コードの最後の要素です)。

私は JavaScript に比較的慣れていないので、コードに関するコメントは大歓迎です。

4

2 に答える 2

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 に答える