JSFiddle - React, Tailwind, and code Playground

by nitinjs

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <form id="form-ws-f1" class="col-md-4">
      <input type="text" class="form-control" name="t1" id="t1" />
      <input type="submit" value="submit"/>
    </form>
    <form id="form-ws-f2" class="col-md-4">
      <input type="text" class="form-control" name="t2" id="t2" />
      <input type="submit" value="submit"/>
    </form>
    <form id="form-ws-f3" class="frm col-md-4">
      <input type="text" class="form-control" name="t3" id="t4" />
      <input type="submit" value="submit"/>
    </form>
  </div>
</div>

JavaScript

(function ( $ ) {
          $.fn.submitify = function() {
            var $this = $(this);
              $this.on('submit', function(event) {
              event.preventDefault();
              const formData = new FormData(this);
              const json = JSON.stringify(Object.fromEntries(formData));
              console.log(json);
              //ws.send(json);
          }); 
              return this;
          };
      }(jQuery));

      $(document).ready(function(){
        $('[id^=form-ws-]').submitify();
      });