Search code examples
javascriptphphtmljscript

Generate .txt files from drop down list

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 enter image description here

IF THE GENERATED BUTTON PRESSED, IT WILL BE GOING LIKE THIS enter image description here

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

Solution

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