Skip to content

Instantly share code, notes, and snippets.

@rotexdegba

rotexdegba/html5-input-type-number-2-decimal-places.html

Last active July 8, 2019 20:00
Show Gist options
  • Save rotexdegba/3ec2eb996c3df00c1176ce754b6f06eb to your computer and use it in GitHub Desktop.
Save rotexdegba/3ec2eb996c3df00c1176ce754b6f06eb to your computer and use it in GitHub Desktop.
Download ZIP
Html5 Input field for currency to 2 decimal places
Raw
html5-input-type-number-2-decimal-places.html
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form method="post" id="add-edit-form" class="add-edit-form" enctype="multipart/form-data" action="http://localhost:8887/listing-types/edit/2">
<label for="name">Name<span style="color: red;"> *</span></label>
<input type="text" id="name" name="name" value="Bronze" maxlength="255" required="required" />
<label for="price_per_year">Price Per Year<span style="color: red;"> *</span></label>
<input type="number" id="price_per_year" name="price_per_year" value="295.99" maxlength="12" required="required" step="0.01" placeholder="0.00" />
<input type="submit" id="save-button" name="save-button" value="Save" />
<input type="submit" id="cancel-button" name="cancel-button" value="Cancel" />
</form>
<script>
$('input#save-button').on(
'click',
function(event) {
if( document.querySelector('#add-edit-form').checkValidity() ) {
//console.log($('#price_per_year').val());
var price_to_2_decimals =
parseFloat($('#price_per_year').val()).toFixed(2);
//console.log(price_to_2_decimals);
$('#price_per_year').val(price_to_2_decimals);
} // if( document.querySelector('#add-edit-form').checkValidity() )
} // function() {....
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment