JSFiddle - React, Tailwind, and code Playground

by Asmita Jadhav

HTML

<div class="container">
      <div class="row">
          <div class="col-md-12">
            <form class="" action="" method="post">
              <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" name="emailID" id="exampleInputEmail1" placeholder="Enter email">
              </div>
              <div class="form-group">
              <legend>Choose any one form below:</legend>
              <label><input type="radio" name="optradio" value="1">Option 1</label>
              <label><input type="radio" name="optradio" value="2">Option 2</label>
              <label><input type="radio" name="optradio" value="3">Option 3</label>
              </div>
              <button type="submit" class="btn btn-primary" name="Submit">Submit</button>
            </form>
          </div>
      </div>
    </div>

JavaScript

$("button").click(function(e) {
                var emailid= document.getElementById("exampleInputEmail1").value;
                var selectedOption=$("input[name='optradio']:checked").val();
                var dt = new Array();
                dt.push(["Email ID", "Selected Option"]);
                dt.push([emailid,selectedOption]);
                var table_div=createTable(dt);
                /*var obj={
                  "email":emailid,
                  "selectedoption":selectedOption
                };*/
               var table_html = table_div.outerHTML.replace(/ /g, '%20');
               var a = document.createElement('a');
               var data_type = 'data:application/vnd.ms-excel';
               a.href = data_type + ', ' + table_html;
               a.download = 'exported_table' + '.xls';
               a.click();
               e.preventDefault();
          });

        function createTable(dt){
          var table = document.createElement("TABLE");
          var columnCount=2;
          table.border = "1";
          var row=table.insertRow(-1);
          for (var i = 0; i < columnCount; i++) {
              var headerCell = document.createElement("TH");
              headerCell.innerHTML = dt[0][i];
              row.appendChild(headerCell);
          }

          row = table.insertRow(-1);
          for (var j = 0; j < dt.length; j++) {
                var cell = row.insertCell(-1);
                cell.innerHTML = dt[1][j];
          }
        return table;
        }