JSFiddle - React, Tailwind, and code Playground

HTML

<form id="myForm" action="javascript:">
  <input name="a" value="hello">
  <input name="b">
  <input type="checkbox" name="c" value="there">
  <input type="checkbox" checked name="d" value="there">
  <textarea name="e">hello</textarea>
  <textarea name="f"></textarea>
  <input type="submit" name="x" value="y">
  <input type="submit" name="x">
</form>

<div>Normal: <span id="normal"></span></div>
<div>Hash': <span id="hash"></span></div>
<div>Tom's: <span id="tom"></span></div>
<div>Rich's: <span id="rich"></span></div>

JavaScript

$('#myForm').submit(function() {
	$('#normal').text($(this).serialize());

	$('#tom').text($(this).find(':input[value!=""]').serialize());
  $('#rich').text($(this).find(':input')
    .filter(function(index, element) {
        return $(element).val() != '';
    })
    .serialize()
  );
  
	$('#hash').text($.grep(
    $(this).serialize().split('&'),
    function(part) { return part[part.length - 1] != '='; }
  ).join('&'));
});

$('[type="submit"]')[0].click();