JSFiddle - React, Tailwind, and code Playground

by m4xout

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Song Form</title>
  <script>
    function submitForm() {
      // Get the values from the form fields
      var artistName = document.getElementById("artistName").value;
      var songName = document.getElementById("songName").value;
      var key = document.getElementById("key").value;
      var bpm = document.getElementById("bpm").value;
      
      // Get the selected checkboxes for the overall feel and feelings evoked
      var overallFeelCheckboxes = document.querySelectorAll('input[name="overallFeel"]:checked');
      var feelingsCheckboxes = document.querySelectorAll('input[name="feelings"]:checked');
      
      // Convert the checkbox values to an array
      var overallFeel = Array.from(overallFeelCheckboxes).map(function(checkbox) {
        return checkbox.value;
      });
      
      var feelings = Array.from(feelingsCheckboxes).map(function(checkbox) {
        return checkbox.value;
      });
      
      // Perform any desired actions with the form data
      // For example, you can log the values to the console
      console.log("Artist Name: " + artistName);
      console.log("Song Name: " + songName);
      console.log("Key: " + key);
      console.log("BPM: " + bpm);
      console.log("Overall Feel: " + overallFeel);
      console.log("Feelings Evoked: " + feelings);
      
      // Clear the form after submission (optional)
      document.getElementById("songForm").reset();
    }
  </script>
</head>
<body>
  <h1>Song Form</h1>
  <form id="songForm">
    <label for="artistName">Artist Name:</label>
    <input type="text" id="artistName" name="artistName" required>
    <br><br>
    <label for="songName">Song Name:</label>
    <input type="text" id="songName" name="songName" required>
    <br><br>
    <label for="key">Key:</label>
    <select id="key" name="key">
      <option value="C">C</option>
      <option value="C#">C#</option>
      <option value="Db">Db</option>
      <option value="D">D</option>
 ...