1. ホーム
  2. 質問と答え
  3. テキストエリアのデータをtxtファイルに書き込む方法

テキストエリアのデータをtxtファイルに書き込む方法

2017-10-07 27 views
0

5つのテキストエリアがあります。この1からの質問のために、4答えテキストエリアのデータをtxtファイルに書き込む方法

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
Question <br /> <textarea id="question" rows="4" cols="70"></textarea> 
 
<br /><br /><br /><br /> 
 
Answer <input id="answer1" type="checkbox" name="" value=""> <textarea rows="4" cols="70"></textarea> 
 
<br /><br /> 
 
Answer <input id="answer2" type="checkbox" name="" value=""> <textarea rows="4" cols="70"></textarea> 
 
<br /><br /> 
 
Answer <input id="answer3" type="checkbox" name="" value=""> <textarea rows="4" cols="70"></textarea> 
 
<br /><br /> 
 
Answer <input id="answer4" type="checkbox" name="" value=""> <textarea rows="4" cols="70"></textarea> 
 
<br /><br /> 
 
<button type="button">Save</button> 
 
</head> 
 
<body> 
 
</body> 
 
</html>

のための答え 回答のための質問 ID = "回答*" のために= "質問" idが2つまたは3つまたは4つ

することができ

答えがchekboxを追加しました。このチェックボックスは正解を修正する必要があります チェックボックスをオンにした場合、クラスの保存ボタンをクリックした後にその欲しいものを追加します。 "正解"

は

「保存」ボタンを持っている私は、この形式ではtxtファイルへでテキストエリアからのデータ保存用のスクリプトが必要になります。

CODE 
 
     <div id="seconddiv" class="centered"> 
 
      <h2>Question</h2> 
 
      <ul class="simpleList"> 
 

 
        <li class="simpleListAnswer correct"> <span class="fa fa-square-o"></span> 
 
        <span class="simpleListText">A. Correct Answer</span></li> 
 

 
        <li class="simpleListAnswer"> <span class="fa fa-square-o"></span> 
 
        <span class="simpleListText">B. Incorrect Answer</span></li> 
 

 
        <li class="simpleListAnswer"> <span class="fa fa-square-o"></span> 
 
        <span class="simpleListText">G. Incorrect Answer</span></li> 
 
    
 
        <li class="simpleListAnswer"> <span class="fa fa-square-o"></span> 
 
        <span class="simpleListText">D. Incorrect Answer</span></li> 
 

 
      </ul> 
 
     </div>

私は私が何をしたいのか説明したいと考えています。 ...終わり

は私が得た：データと

TXTファイル：

<div id="seconddiv" class="centered"> 
     <h2>Question 1</h2> 
     <ul class="simpleList"> 

       <li class="simpleListAnswer correct"> <span class="fa fa-square-o"></span> 
       <span class="simpleListText">A. Correct Answer</span></li> 

       <li class="simpleListAnswer"> <span class="fa fa-square-o"></span> 
       <span class="simpleListText">B. Incorrect Answer</span></li> 

       <li class="simpleListAnswer"> <span class="fa fa-square-o"></span> 
       <span class="simpleListText">G. Incorrect Answer</span></li> 

       <li class="simpleListAnswer"> <span class="fa fa-square-o"></span> 
       <span class="simpleListText">D. Incorrect Answer</span></li> 

     </ul> 
    </div> 

    <div id="seconddiv" class="centered"> 
     <h2>Question</h2> 
     <ul class="simpleList"> 

       <li class="simpleListAnswer"> <span class="fa fa-square-o"></span> 
       <span class="simpleListText">A. Inorrect Answer</span></li> 

       <li class="simpleListAnswer correct"> <span class="fa fa-square-o"></span> 
       <span class="simpleListText">B. Correct Answer</span></li> 

     </ul> 
    </div> 

    <div id="seconddiv" class="centered"> 
     <h2>Question</h2> 
     <ul class="simpleList"> 

       <li class="simpleListAnswer"> <span class="fa fa-square-o"></span> 
       <span class="simpleListText">B. Incorrect Answer</span></li> 

       <li class="simpleListAnswer"> <span class="fa fa-square-o"></span> 
       <span class="simpleListText">G. Incorrect Answer</span></li> 

       <li class="simpleListAnswer correct"> <span class="fa fa-square-o"></span> 
       <span class="simpleListText">D. Correct Answer</span></li> 

     </ul> 
    </div>

等...等...

出典

2017-10-07 user3146610

答えて

0

あなたは（クライアント側）JavaScriptを使用してファイルにデータを保存することはできません。あなたがする必要があるのは、情報を保存し、Webページから情報を要求するサーバーを作成することです。

出典

2017-10-07 07:20:49

1 

$("#btn-save").click(function() { 
 
    var text = $("#textarea").val(); 
 
    var filename = $("#input-fileName").val() 
 
    var blob = new Blob([text], {type: "text/plain;charset=utf-8"}); 
 
    saveAs(blob, filename+".txt"); 
 
});
body { 
 
    padding: 1em; 
 
    background: #EEE; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/FileSaver.js"></script> 
 

 
<form role="form"> 
 
    <h3>Saving a file with pure JS!</h3> 
 
    <p>Uses HTML5 W3C saveAs() function and the <a href="https://github.com/eligrey/FileSaver.js" target="_blank">FileSaver.js</a> polyfill for this.<br> 
 
    I didn't think this was even possible without a server but the docs say it should work in IE 10+, Sweet!</p> 
 
    <div class="form-group"> 
 
    <label for="input-fileName">File name</label> 
 
    <input type="text" class="form-control" id="input-fileName" value="textFile" placeholder="Enter file name"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="textarea">Text</label> 
 
    <textarea id="textarea" class="form-control" rows="10" placeholder="Enter text to save">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae iure ab voluptate sunt reiciendis, officia, aliquam temporibus. Quo laudantium quaerat ad, deleniti optio ex, dignissimos, ea accusamus placeat tempora minima!</textarea> 
 
    </div> 
 
    <button id="btn-save" type="submit" class="btn btn-primary">Save to file</button> 
 
</form>

Saving file with pure js

から参照

出典

2017-10-07 07:22:19

関連する問題

 関連する問題