Saurabh Srivastava Saurabh Srivastava - 4 months ago 19
HTML Question

How to save selected radiobutton to a text file using html codes

I used a code from another thread on this website to save form data to text file on local hard disk. For text field it worked fine but when i tried to save the data of a radiobutton it didn't happen i tried several combinations but still it didn't worked.
The Code Used by me is as below



<!DOCTYPE html>
<html>
<head>
<style>
form * {
display: block;
margin: 10px;
}
</style>
<script language="Javascript" >
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' +
encodeURIComponent(text));

pom.setAttribute('download', filename);

pom.style.display = 'none';
document.body.appendChild(pom);

pom.click();

document.body.removeChild(pom);
}
</script>
</head>
<body>
<form onsubmit="download(this['name'].value, this['text'].value)">
<input type="text" name="name" value="test.txt">
<textarea rows=3 cols=50 name="text">PLEASE WRITE ANSWER HERE. </textarea>
<input type="radio" name="radio" value="Option 1" onclick="getElementById('problem').value=this.value;"> Option 1<br>
<input type="radio" name="radio" value="Option 2" onclick="getElementById('problem').value=this.value;"> Option 2<br>
<input type="text" name="problem" id="problem">
<input type="submit" value="SAVE">
</form>
</body>
</html>





My email id is
saurabhsrivastava37@gmail.com

Answer

That's because you need to pass this parameter to the function download too.

<!DOCTYPE html>
<html>
  <head>
    <style>
      form * {
        display: block;
        margin: 10px;
      }
    </style>
    <script language="Javascript" >
      function download(filename, text, text1) {
        var pom = document.createElement('a');
        pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + 
                         encodeURIComponent(text) + '\n' + encodeURIComponent(text1));
        
        pom.setAttribute('download', filename);

        pom.style.display = 'none';
        document.body.appendChild(pom);

        pom.click();

        document.body.removeChild(pom);
      }
    </script>
  </head>
  <body>
    <form onsubmit="download(this['name'].value, this['text'].value, this['problem'].value)">
      <input type="text" name="name" value="test.txt">
      <textarea rows=3 cols=50 name="text">PLEASE WRITE ANSWER HERE. </textarea>
      <input type="radio" name="radio" value="Option 1" onclick="getElementById('problem').value=this.value;"> Option 1<br>
      <input type="radio" name="radio" value="Option 2" onclick="getElementById('problem').value=this.value;"> Option 2<br>
      <input type="text" name="problem" id="problem">
      <input type="submit" value="SAVE">
    </form>
  </body>
</html>


<!DOCTYPE html>
<html>
  <head>
    <style>
      form * {
        display: block;
        margin: 10px;
      }
    </style>
    <script language="Javascript" >
      function download(filename, text, text1) {
        var pom = document.createElement('a');
        pom.setAttribute('href', ' data:text/plain;charset=utf-8 \n,' + 
                         encodeURIComponent(text1) + '\n' + encodeURIComponent(text));

        pom.setAttribute('download', filename);

        pom.style.display = 'none';
        document.body.appendChild(pom);

        pom.click();

        document.body.removeChild(pom);
      }
    </script>
  </head>
  <body>
    <form onsubmit="download(this['name'].value, this['text']. value, this['problem'].value)">
      <b>Your Name Please</b>
    <input type="text" name="name" value="test.txt">
<center><b>Part I</b></center>
<LEFT><B>QUESTION 1)</B><LEFT>
1. Which of the following devices can be used to directly image printed text?<br>
      <n><r><td><input type="radio" name="radio" value="1.OCR" onclick="getElementById('problem').value=this.value;">(a) OCR</td></r></n>
      <n><r><td><input type="radio" name="radio" value="1.OMR" onclick="getElementById('problem').value=this.value;">(b) OMR</td></r></n>
      <n><r><td><input type="radio" name="radio" value="1.MICR" onclick="getElementById('problem').value=this.value;">(c) MICR</td></r></n>
      <n><r><td><input type="radio" name="radio" value="1.ALL OF THE ABOVE" onclick="getElementById('problem').value=this.value;">(d) ALL OF THE ABOVE<BR></td></r></n>
      <n><r><td><input type="hidden" name="problem" id="problem";></td></r></n>
<center><b>Part II</b></center>
<LEFT><B>QUESTION 1)</B><LEFT>
1.  What do you understand by the term ISP?  What services does an ISP provide?
      <textarea rows=3 cols=50 name="text">PLEASE WRITE ANSWER HERE. </textarea>
      <input type="submit" value="SAVE">
    </form>
  </body>
</html>