3

これらのフォーム入力をファイル (XML など) に保存して、後でフォームで再度使用できるようにしたいと考えています。

<html>
    <body>
        <form action="demo_form.asp">
            First name: <input type="text" name="FirstName" value="Mickey"><br>
            Last name: <input type="text" name="LastName" value="Mouse"><br>
            <input type="submit" value="Submit">
        </form>

        <p>Click the "Submit" button and the form-data will be sent to a page on the server called "demo_form.asp".</p>

    </body>
</html>

これを達成する最も簡単な方法は何ですか？PHP または ASP.NET を使用できません。

4

5 に答える 5

2

ファイルシステムにデータを保存するサーバー側の言語を使用していない限り（XMLファイルを保存したいという意味だと思います）、不可能です。JavaScript アプリケーションには、ファイル システムに書き込む機能がありません。

代わりに、 HTML5 のストレージ機能を使用できます。また、「HTML5 ストレージを使用してフォームからデータを保存する方法」をご覧ください。

于 2014-07-22T16:08:11.613 に答える
1

以下のコード例では、ページのフィールドからデータを取得し、ユーザーのローカル ボックスに直接 txt ファイルに書き出すことができます。私は現在、自分が取り組んでいるプロジェクトの XMl に書き出す方法を探していますが、少なくともテキスト ファイルに書き出したいデータを取得できます。

var userInput = document.getElementById("userInputId").value;

var fileURL = 'data:application/notepad;charset=utf-8,' + encodeURIComponent(userInput);
var fileName = "test.txt";


if (!window.ActiveXObject) {
  var save = document.createElement('a');
  save.href = fileURL;

  save.target = '_blank';
  save.download = fileName || 'unknown';

  var event = document.createEvent('Event');
  event.initEvent('click', true, true);
  save.dispatchEvent(event);
  (window.URL || window.webkitURL).revokeObjectURL(save.href);
}

// for IE
else if (!!window.ActiveXObject && document.execCommand) {
  var _window = window.open(fileURL, '_blank');
  _window.document.close();
  _window.document.execCommand('SaveAs', true, fileName || fileURL)
  _window.close();
}
于 2014-10-31T20:43:00.800 に答える
1

データをサーバーに保存する必要がある場合は、サーバー側のツール ASP.NET または PHP が必要になります。

ただし、後でフォームで使用できるように、データを XML 形式で保存したいとおっしゃいました。後で同じページでデータを使用して、次のように XML に入れることができます。

interval=setInterval(function(){
    first=$('[name*="FirstName"]').val();
    last=$('[name*="LastName"]').val();
    output='<data><first>'+first+'</first><last>'+last+'</last></data>';
    $('#output').text(output);
},200);

http://jsfiddle.net/pA8nC/

しかし、あなたがそれをしたい理由が思い浮かびません！プレーンな JavaScript または JQuery を使用して値に直接アクセスできます。

JQuery:

firstName=$('[name*="FirstName"]').val();
lastName=$('[name*="LastName"]').val();

JS:

firstName=document.form.FirstName.value;
lastName=document.form.LastName.value;
于 2014-07-22T16:42:49.863 に答える
0

この JavaScript は、フォームが送信されると、フォームのデータのファイル ダウンロードをトリガーします (フォームごとに)。スキーマがどのように見えるかわからないため、XML は使用しません (また、xhr を使用してシリアル化されたフォームの文字列をすばやく投稿できるのに対して、XML が有用かどうか疑問に思います)。

http://jsfiddle.net/CKvcV/

(function () {
   var makeTextFile = function (text) {
        var data = new Blob([text], {type: 'text/plain'});
        return window.URL.createObjectURL(data);
      },
      serializeForm = function(form, evt){
        var evt    = evt || window.event;
        evt.target = evt.target || evt.srcElement || null;
        var field, query='';
        if(typeof form == 'object' && form.nodeName == "FORM"){
            for(i=form.elements.length-1; i>=0; i--){
                field = form.elements[i];
                if(field.name && field.type != 'file' && field.type != 'reset'){
                    if(field.type == 'select-multiple'){
                        for(j=form.elements[i].options.length-1; j>=0; j--){
                            if(field.options[j].selected){
                                query += '&' + field.name + "=" + encodeURIComponent(field.options[j].value).replace(/%20/g,'+');
                            }
                        }
                    }
                    else{
                        if((field.type != 'submit' && field.type != 'button') || evt.target == field){
                            if((field.type != 'checkbox' && field.type != 'radio') || field.checked){
                                query += '&' + field.name + "=" + encodeURIComponent(field.value).replace(/%20/g,'+');
                            }   
                        }
                    }
                }
            }
        }
        return query.substr(1);
    }
   , _onsubmit = function() {
        var _href = makeTextFile(serializeForm(this));
        var _a = document.createElement("A");
        _a.setAttribute('download', 'export.txt');
        _a.setAttribute('target', '_blank');
        _a.href = _href;
        _a.click();
        window.URL.revokeObjectURL(_href);
        //return false;
    };

    [].forEach.call(
        document.querySelectorAll('form'),
        function(f) { f.onsubmit = _onsubmit; }
        );
})();

これをブックマークレットなどに組み込みます。ただし、タイピングの手間を省きたい場合は、値をファイルではなく localStorage に格納することをお勧めします。データを再利用する方法については言及していません。動的ファイルアップローダーを構築してユーザーに正しいファイルを見つけさせるよりも、localStorage からデータを取得する方がはるかに簡単です。

于 2014-07-22T16:59:21.760 に答える