JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<p>Using the input values</p>
<form name="form-values">
<input class="pull-left" type="submit" value="Save" />
<input class="pull-right" type="submit" value="Update" />
</form>
<div class="clearfix"></div>
<br />
<br />
<p>Using a custom data-type attribute</p>
<form name="form-data">
<input class="pull-left" type="submit" data-type="I want to be saved" value="Save" />
<input class="pull-right" type="submit" data-type="Gots to update!" value="Update" />
</form>
<div class="clearfix"></div>
</div>
CSS
body, html {
font-family: arial;
width: 100%;
height: 100%;
background: #3d3d3d;
}
div.container {
padding: 10px;
width: 300px;
font-size: 12px;
margin: 50px auto;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #e9eaee;
border: 2px solid #ffffff;
box-shadow: 1px 2px 6px rgba(0,0,0, 0.5);
-moz-box-shadow: 1px 2px 6px rgba(0,0,0, 0.5);
-webkit-box-shadow: 1px 2px 6px rgba(0,0,0, 0.5);
}
input[type="submit"] {
padding: 6px 15px;
margin: 15px;
}
.pull-left { float: left; }
.pull-right { float: right; }
.clearfix { display: block; clear: both; content: ""; }
JavaScript
$(document).ready(function(){
// Set a variable, we will fill later.
var value = null;
// On submit click, set the value
$('input[type="submit"]').click(function(){
value = $(this).val();
});
// On data-type submit click, set the value
$('input[type="submit"][data-type]').click(function(){
value = $(this).data('type');
});
// Use the set value in the submit function
$('form').submit(function (event)
{
event.preventDefault();
alert(value);
// do whatever you need to with the content
});
});