JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

 

<form id="batteryform" class = "js-battery-form" action="/home" method="POST">

  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <label class="input-group-text form-control-sm" for="battery_size">Battery size</label>
    </div>
    <select class="custom-select custom-select-sm" id="battery_size", name="battery_size">
      <option value="1.2">1.2kWh</option>
      <option value="2.4">2.4kWh</option>
      <option value="3.6" selected>3.6kWh</option>
      <option value="4.8">4.8kWh</option>
      <option value="7.2">7.2kWh</option>
    </select>
  </div>

<button type="submit" id='btnFetch' class="btn btn-primary btn-sm btn-block">Submit Query </button>

</form>

JavaScript

$(document).ready(function() {
    $("#btnFetch").click(function() {
      // disable button
      $(this).prop("disabled", true);
      // add spinner to button
      $(this).html(
        `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> A enviar dados...`
      );
    });
});