I have an input field where the value will change automatically when an option is selected. How to write code so that it works the same way when the radio input option is selected?
function changeIncreaseMode() {
let selectMode = $("#selectMode").val();
let multiplier = $("#multiplier").val();
if(selectMode == 'usingMultiplier'){
var increase = (multiplier/100) + 1;
} else {
var increase = (multiplier - 1) * 100;
}
$("#multiplier").val(parseFloat(increase).toFixed(2));
}<!DOCTYPE html>
<html>
<body>
<div class="form-group">
<label for="multiplier">Increase on loss:</label>
<input type="text" class="form-control" id="multiplier" value="2" placeholder="Enter multiplier" pattern="^\d*(\.\d{0,8})?$" required />
<select id="selectMode" onchange="changeIncreaseMode();">
<option value="usingMultiplier">X</option>
<option value="usingPercentage">%</option>
</select>
</div>
<!-- increase using multiplier or percentage -->
<div class="custom-control custom-radio custom-control-inline small">
<input type="radio" id="usingMultiplier" name="usingMultiplier" class="custom-control-input" checked>
<label class="custom-control-label" for="usingMultiplier">using multiplier <i class="fas fa-times"></i></label>
</div>
<div class="custom-control custom-radio custom-control-inline small">
<input type="radio" id="usingPercentage" name="usingMultiplier" class="custom-control-input">
<label class="custom-control-label" for="usingPercentage">using percentage <i class="fas fa-percentage"></i></label>
</div>
<!-- end increase using multiplier or percentage -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>and then i have also prepared a code that will calculate and display the results when the submit button is clicked. the code snippet looks like this :
base_bet = multiplier * base_bet; //increase loss using multiplier/first-code
base_bet = multiplier / 100 * base_bet + base_bet; //increase loss using percentage/second-code
How to make when selected the first option then the calculation uses the first code, if selected the second option then the calculation uses the second code?
I'm very grateful before and after.
I will be pleasure if this code can help you.
function changeIncreaseMode() {
let selectMode = $("#selectMode").val();
let multiplier = $("#multiplier").val();
if(selectMode == 'usingMultiplier'){
var increase = (multiplier/100) + 1;
} else {
var increase = (multiplier - 1) * 100;
}
$("#multiplier").val(parseFloat(increase).toFixed(2));
}
function changeIncreaseModeByRadio() {
const isMultiplier = $("#usingMultiplier").is(':checked');
const isPercentage = $("#usingPercentage").is(':checked');
const multiplier = $("#multiplier").val();
let increase = 0;
if(isMultiplier){
increase = (multiplier/100) + 1;
}
else if(isPercentage){
increase = (multiplier - 1) * 100;
}
$("#multiplier").val(parseFloat(increase).toFixed(2));
}<!DOCTYPE html>
<html>
<body>
<div class="form-group">
<label for="multiplier">Increase on loss:</label>
<input type="text" class="form-control" id="multiplier" value="2" placeholder="Enter multiplier" pattern="^\d*(\.\d{0,8})?$" required />
<select id="selectMode" onchange="changeIncreaseMode();">
<option value="usingMultiplier">X</option>
<option value="usingPercentage">%</option>
</select>
</div>
<!-- increase using multiplier or percentage -->
<div class="custom-control custom-radio custom-control-inline small">
<input type="radio" id="usingMultiplier" name="usingMultiplier" class="custom-control-input" onChange="changeIncreaseModeByRadio();" checked>
<label class="custom-control-label" for="usingMultiplier">using multiplier <i class="fas fa-times"></i></label>
</div>
<div class="custom-control custom-radio custom-control-inline small">
<input type="radio" id="usingPercentage" name="usingMultiplier" class="custom-control-input" onChange="changeIncreaseModeByRadio();">
<label class="custom-control-label" for="usingPercentage">using percentage <i class="fas fa-percentage"></i></label>
</div>
<!-- end increase using multiplier or percentage -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>