JSFiddle - React, Tailwind, and code Playground

by danheberden

HTML

<form id="theform" action="" method="get"> 
<input type="hidden" name="secret" value="1"> 
<input type="text" name="usertext"> 
<input type="submit" name="submit" value="Clicking will submit"> 
</form> 
 
<p id="thepara">Clicking this paragraph should, thru jQuery, turn #theform red
and call submit() on it.
If this is successful, you'll see the URL change to include
a GET string.  Otherwise, the form hasn't been submitted.  The problem is,
if the form has an &lt;input type="submit"&gt; with the attribute
name="submit", the submit() call won't submit the form.</p> 
 
<p>Edit this file and change the name attribute of the submit button to
anything other than 'submit' and the submit() call works.</p> 
 
<p><a href="http://www.evernex.com/jqb/">Click here</a> to reload the page,
clearing the GET string and turning #theform white again.</p>

JavaScript

$(document).ready(function() {
    var para = $('#thepara');
    var fizorm = $('#theform');
    var thesubmit = $('#theform input:submit');
 
    para.css('border', '1px solid blue');
    para.css('cursor', 'pointer');
    para.click(function() {
        fizorm.css('background-color', 'red'); 
        fizorm.submit();
    });
});