Generate .txt files from drop down list

Question

In fact this is an easy things for those who understanding html programming, but unfortunately I am not in this field...

I want to ask how to create a html file that can generate .txt in the same directory with the html file. In this case i want to use that txt for electrical home automation.

I need 2 drop down list that contain 2 option list

First is called 'LAMP' and contain 2 option : "ON" and "OFF"

second is called 'BLOWER' and also contain : "ON" and "OFF"

I also need a button. When a button is pressed, this html generates a .txt files based on the choosen option.

Check Screenshot to see my interface explanation

IF THE GENERATED BUTTON PRESSED, IT WILL BE GOING LIKE THIS

Example :

if the LAMP is ON and the BLOWER is OFF then the text in the generated file should be "10"

if the LAMP is OFF and the BLOWER is ON then the text in the generated file should be "01"

could somebody help me with the .html code ? Thankyou

HTML in itself is just markup, letting browsers understand how to display content, so it can't write to directories. You'll likely have to make a PHP script that the HTML form submits to, look up file writing in PHP. — Caleb O'Leary, Apr 18 '16 at 04:12
Are you generating the `.txt` as in purpose of configuration? If yes, you may want to look at HTML cookies to do that. — choz, Apr 18 '16 at 04:17
@choz : no it isnt for configuraton. i need that .txt to be sent via internet for turning off / on the lamp / blower — amisotcm, Apr 18 '16 at 04:23
@CalebO'Leary : i've just searched the php tutorials, none of them that i understand. my basic isn't a php or software programmer — amisotcm, Apr 18 '16 at 04:25

score 1 · Answer 1 · answered Apr 18 '16 at 04:26

1

You can utilize select element, a element with download attribute, href to set to data URI representation of text file.

var select = document.querySelector("select");
select.addEventListener("change", function(e) {
  var text = e.target.value === "LAMP" ? "10" : "01";
  var file = "data:text/plain," + text;
  var a = document.createElement("a");
  a.download = e.target.value + "-" + new Date().getTime();
  a.href = file;
  document.body.appendChild(a);
  a.onclick = function() {
    this.parentElement.removeChild(this)
  };
  a.click();
})

<label for="select">Please select an option:</label>
<select id="select">
  <option></option>
  <option value="LAMP">LAMP</option>
  <option value="BLOWER">BLOWER</option>
</select>

answered Apr 18 '16 at 04:26

guest271314

1
15
104
177

thankyou for answering. but what i mean is not like that. so the program need 2 drop list option to control 2 different device. the "LAMP" has 2 option ( on and off), so does the blower has 2 option (ON AND OFF). the generated .txt dont need to ask where it will be saved, but automatically saved based on the location of the .html .... the content on the .txt is just a binary digit, e.g. 10 , 01, 00, 11 – amisotcm Apr 18 '16 at 04:31
@mctosima _"but what i mean is not like that"_ Can you describe what you mean? See original Question at _"I want to ask how to create a html file that can generate .txt in the same directory with the html file. In this case i want to use that txt for electrical home automation. I need 2 drop down list that contain 2 option list"_ – guest271314 Apr 18 '16 at 04:33
271314 : i just edit my post and put 2 pictures.. hope it helps – amisotcm Apr 18 '16 at 04:39
@mctosima Requirement is for four options? It is not possible to save a file generated at `javascript` to a specific directory at user filesystem automatically, without user action. You could try using `webkitRequestFileSystem` to save file to browser profile directory, then run a `bash` or other script to retrieve file from browser profile directory, move to other directory. See http://stackoverflow.com/questions/36098129/how-to-write-in-file-user-directory-using-javascript/ – guest271314 Apr 18 '16 at 04:50

Himel Nag Rana · Accepted Answer · 2016-04-18T07:47:54.660

I have copied part of downloading from the above answer of @guest271314. Thanks to him for this. I believe you wanted something like this:

JSFIDDLE EXAMPLE LINK: https://jsfiddle.net/zpp4hr21/

UPDATE:

full html file code as per comment of the OP will be:

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
  <script type="text/javascript">
    $("#generate").on("click", function(e){
        var lamp = $("#lamp").val();
        var blower = $("#blower").val();

        if (lamp == "Select") {
            alert("Please select a value for LAMP");
        }

        if (blower == "Select") {
            alert("Please select a value for BLOWER");
        }

        if ((lamp != "Select") && (blower != "Select")) {
            var text = lamp.toString()+blower.toString();
            var file = "data:text/plain," + text;

            var a = document.createElement("a");
            a.download = e.target.value + "-" + new Date().getTime();
            a.href = file;
            document.body.appendChild(a);
            a.onclick = function() {
              this.parentElement.removeChild(this)
            };
            a.click();
          }
       });
</script>
</head>

<body>
   <label for="lamp">LAMP:</label>
   <select id="lamp">
      <option>Select</option>
      <option value="1">ON</option>
      <option value="0">OFF</option>
   </select>
   <br/>
   <label for="blower">BLOWER:</label>
   <select id="blower">
     <option>Select</option>
     <option value="1">ON</option>
     <option value="0">OFF</option>
   </select>
   <br/>
   <input type="button" id="generate" value="GENERATE">
</body>
</html>

thanks a lot dude. i test it from jsfiddle and it works. but how i copy the file ? i copy paste that code to .html with notepad and it doesnt works. — amisotcm, Apr 18 '16 at 07:37
well you have to wrap the jquery code within `` while putting it in html file. — Himel Nag Rana, Apr 18 '16 at 07:43

Generate .txt files from drop down list

2 Answers2

UPDATE: