JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<form id="foo">
    <input type="submit" form="bar" value="Foo" />
</form>
<form id="bar">
    <input type="submit" form="foo" value="Bar" />
</form>

<p>Note:There are a few cases where that won't work.
For instance, a lone button element will submit a form. This doesn't cover that.
This also doesn't check to see if the form attribute value actually corresponds to a form element.
And it doesn't work for elements added dynamically.
All of those problems could be resolved with event-delegation, and checking siblings/attributes on click.</p>

JavaScript

$("form").on("submit", function ( e ) {
    e.preventDefault();
    alert( "Form " + this.id + " Submitted" ); 
});

$(":submit[form!='']").on("click", function ( e ) {
    e.preventDefault();
    $("#" + $(this).attr("form")).submit();
});