JSFiddle - React, Tailwind, and code Playground
HTML
<fieldset class="submittable">
<legend>First-Example</legend>
<input type="text" />
<select><option>1</option><option>2</option></select>
<textarea></textarea>
<a class="button-submit" id="pc-submit" href="#">Submit Me</a>
</fieldset>
<fieldset class="submittable">
<legend>Second-Example</legend>
<input type="text" />
<select><option>1</option><option>2</option></select>
<textarea></textarea>
<a class="button-submit" id="pc-submit" href="#">Submit Me</a>
</fieldset>
CSS
input, select
{
margin:2px 0;
width:100px;
padding:2px;
}
textarea
{
margin:2px 0;
padding:2px 0;
display:block;
width:205px;
}
fieldset
{
padding:10px;
background:#F4F8FB;
margin:10px 0;
}
a.button-submit
{
background:#eee;
padding:2px;
border:solid 1px #ccc;
color:#333;
text-decoration:none;
}
JavaScript
//Submit on Enter
$(".submittable input, .submittable textarea, .submittable select").live('keypress', function (e) {
//Look for a button with class buttonSubmit
if ($(this).parents('.submittable').find('.button-submit').length <= 0)
return true;
//Check if the perssed key is enter, keycode 13
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$(this).parents('.submittable').find('.button-submit').click();
return false;
} else {
return true;
}
});
function submittedBitches(ctx) {
console.log("Submit Happened");
alert("I was submitted bitches! {" + $(ctx).parent().children("input").val() + "}{" + $(ctx).parent().children("select").val() + "}{" + $(ctx).parent().children("textarea").val() + "}");
}
$(document).ready(function() {
$("#pc-submit").click(function() {
submittedBitches(this)
});
$("#pc-submit2").click(function() {
submittedBitches(this)
});
});