Reset Js
HTML
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://motustrength.it/MDB4.19.1-PRO/css/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="https://motustrength.it/MDB4.19.1-PRO/css/mdb.min.css">
<!-- jQuery -->
<script type="text/javascript" src="https://motustrength.it/MDB4.19.1-PRO/js/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://motustrength.it/MDB4.19.1-PRO/js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://motustrength.it/MDB4.19.1-PRO/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://motustrength.it/MDB4.19.1-PRO/js/mdb.min.js"></script>
<!----Input Field Bootstrap 4.6.0---->
<div class="input-group mb-3">
<span class="input-group-text" id="txtfocus">Peso</span>
<input class="form-control" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" maxlength="3" id="weight" name"weight1" form="bmrcalc">
<span class="input-group-text">Kg</span>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="txtfocus">Altezza</span>
<input class="form-control" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" maxlength="3" id="height" name"height1" form="bmrcalc">
<span class="input-group-text">Cm</span>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="txtfocus">Età</span>
<input class="form-control" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" maxlength="2" id="age" name"age1" form="bmrcalc">
<span class="input-group-text">Anni</span>
</div>
<div...
CSS
/*Arrow of dropdown & Input right*/
.caret {
margin-left: 10px;
}
.select-wrapper input.select-dropdown {
padding-right: 15px!important;
}
.select-dropdown.form-control {
text-align: right;
margin-right: 10px!important;
color: #0d6efd;
}
/*Font*/
.select-dropdown.form-control, .label-text {
font-weight: 500;
font-size: 15px !important;
}
/*Label Field*/
.label-text {
z-index: 0;
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
}
.group-field {
position: relative!important;
}
/*Dropdown opened top spacing*/
.dropdown-content.select-dropdown.w-100 {
top: 42px!important;
}
/*Focus Within for Label & Input*/
.group-field.select-dropdown.form-control:focus-within {
color: #0d6efd;
background-color: #fff0;
box-shadow: none !important;
font-weight: 500 !important;
}
JavaScript
// Material Select Initialization
$(document).ready(function() {
$('.mdb-select').materialSelect();
});
function resetFields() {
document.getElementById("bmrcalc").reset();
var selectsex = document.getElementById("select-sex");
selectsex.selectedIndex = 0;
}