How can I export items from HTML into a .TXT file?-CodePudding

I am trying to create a HTML program that can put the selected item from the dropdown created from the <select> and <option> scripts into a .txt file. The file is on Replit, so assume the text file already exists. This is my code, so far:

<!DOCTYPE html>
<html>
  <body>
    <form action="cardspicked.txt" method="get">
      <h3>What is your favorite low elixir Clash Royale card?</h3>
      <label for="low_elixir">Choose a card:</label>
      <select name = "low_elixir" id = "low_elixir">
        <option>Heal Spirit</option>
        <option>Skeletons</option>
        <option>Electro Spirit</option>
        <option>Fire Spirit</option>
        <option>Ice Spirit</option>
        <option>Wall Breakers</option>
        <option>Bats</option>
        <option>Spear Goblins</option>
        <option>Bomber</option>
        <option>Ice Golem</option>
        <option>Goblins</option>
        <option>Rage</option>
        <option>Giant Snowball</option>
        <option>Barbarian Barrel</option>
        <option>Zap</option>
        <option>The Log</option>
      </select>
      <hr>
      <h3>What about medium elixir?</h3>
      <label for="med_elixir">Choose a card:</label>
      <select name = "med_elixir" id = "med_elixir">
        <option>Knight</option>
        <option>Ice Wizard</option>
        <option>Mega Minion</option>
        <option>Dart Goblin</option>
        <option>Goblin Gang</option>
        <option>Miner</option>
        <option>Minions</option>
        <option>Bandit</option>
        <option>Princess</option>
        <option>Guards</option>
        <option>Archers</option>
        <option>Firecracker</option>
        <option>Royal Ghost</option>
        <option>Elixir Golem</option>
        <option>Skeleton Barrel</option>
        <option>Fisherman</option>
        <option>Skeleton Army</option>
        <option>Battle Healer</option>
        <option>Zappies</option>
        <option>Skeleton King</option>
        <option>Hunter</option>
        <option>Valkyrie</option>
        <option>Flying Machine</option>
        <option>Mighty Miner</option>
        <option>Electro Wizard</option>
        <option>Magic Archer</option>
        <option>Night Witch</option>
        <option>Inferno Dragon</option>
        <option>Battle Ram</option>
        <option>Mini P.E.K.K.A</option>
        <option>Musketeer</option>
        <option>Baby Dragon</option>
        <option>Golden Knight</option>
        <option>Skeleton Dragons</option>
        <option>Dark Prince</option>
        <option>Night Witch</option>
        <option>Lumberjack</option>
        <option>Cannon</option>
        <option>Tombstone</option>
        <option>Mortar</option>
        <option>Bomb Tower</option>
        <option>Tesla</option>
        <option>Furnace</option>
        <option>Goblin Cage</option>
        <option>Goblin Drill</option>
        <option>Goblin Barrel</option>
        <option>Royal Delivery</option>
        <option>Tornado</option>                     
        <option>Earthquake</option>
        <option>Arrows</option>
        <option>Clone</option>
        <option>Fireball</option>
        <option>Freeze</option>
        <option>Poison</option>
      </select>
      <hr>
      <h3>High elixir?</h3>
      <label for="high_elixir">Choose a card:</label>
      <select name = "high_elixir" id = "high_elixir">
        <option>Barbarians</option>
        <option>Royal Hogs</option>
        <option>Giant</option>
        <option>Prince</option>
        <option>Wizard</option>
        <option>Ram Rider</option>
        <option>Cannon Cart</option>
        <option>Rascals</option>
        <option>Witch</option>
        <option>Minion Horde</option>
        <option>Executioner</option>
        <option>Balloon</option>
        <option>Archer Queen</option>
        <option>Bowler</option>
        <option>Electro Dragon</option>
        <option>Elite Barbarians</option>
        <option>Goblin Giant</option>
        <option>Sparky</option>
        <option>Royal Giant</option>
        <option>Giant Skeleton</option>
        <option>Mega Knight</option>
        <option>P.E.K.K.A</option>
        <option>Royal Recruits</option>
        <option>Lava Hound</option>
        <option>Electro Giant</option>
        <option>Golem</option>
        <option>Three Musketeers</option>
        <option>Goblin Hut</option>
        <option>Inferno Tower</option>
        <option>Elixir Collector</option>
        <option>X-Bow</option>
        <option>Barbarian Hut</option>
        <option>Graveyard</option>
        <option>Lightning</option>
        <option>Rocket</option>
      </select>
      <hr>
        <button type="submit" value="Submit" />Submit</button>

     </form>
  </body>
</html>

I have checked many websites, including this one, to find an answer to this question, but none have been able to help me. Try to help, if possible.

CodePudding user response：

You can not do this on HTML alone as HTML is not a programming language. You will need to use some JS which can be achieved like this:

    
    const fs = require('fs');
    var data = document.getElementById("low_elixir").options[].text;

    fs.writeFile('data.txt', data, (err) => {
        if (err) throw err;
    })

      <select name = "low_elixir" id = "low_elixir">
            <option>Heal Spirit</option>
            <option>Skeletons</option>
            <option>Electro Spirit</option>
            <option>Fire Spirit</option>
            <option>Ice Spirit</option>
            <option>Wall Breakers</option>
            <option>Bats</option>
            <option>Spear Goblins</option>
            <option>Bomber</option>
            <option>Ice Golem</option>
            <option>Goblins</option>
            <option>Rage</option>
            <option>Giant Snowball</option>
            <option>Barbarian Barrel</option>
            <option>Zap</option>
            <option>The Log</option>
          </select>

CodePudding user response：

HTML is not a programming language; it is a markup language. You cannot use algorithms or anything else you would use in a traditional programming language in HTML.
JavaScript is client-side only. It is impossible to store anything on the server side from the client side using pure JavaScript; you need PHP for this. The only exception is if you have a backend running Node.js.

Check out this article for more info on server- vs. client-side programming.

In order to add such functionality using PHP, you would need to send a PHP POST request to the file on the server you want to add to. To learn more about PHP and form control using PHP, I suggest this article.