CODEWITHSUNDEEP
javascriptjqueryhtml
Erekle M.
Erekle M.

Reputation: 105

How to write data from textarea`s in to txt file

Have 5 textarea. From this 1 for question, 4 for answers

<!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="question" for question id="answer*" for answers Answers can be two or three or four

For answers added chekbox, this checkbox need for fix the correct answer If checkbox cheked I want that after clicking on the save button in the class add class "CORRECT"

Have button "Save"

I need script for save data from textareas in to txt file In this form:

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>

I hope I explained what I want to do...

At the end so I got:

TXT file with data:

   <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>

Etc ... Etc ...

Upvotes: 0

Views: 71

Answers (2)

Black Mamba
Black Mamba

Reputation: 15545

$("#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>

A reference from Saving file with pure js

Upvotes: 1

Nir Kogman
Nir Kogman

Reputation: 131

You can't save data to files using javascript (on the client side). What you need to do is create a server that saves the information, and make a request to it from the web page.

Upvotes: 0

Related Questions