When selecting different options, the input field type can support 20 digit rupee with rupee symbol or replaced with percentage
P粉022140576
2023-08-13 18:35:32
<p>If the option is selected to select fixed value, the input field type is rupee value only supports 20 digits with rupee symbol. If Percent is selected then the Rupee symbol is replaced with Percent symbol and the value type is only 2 digits to enter the value without clicking the button </p>
<p>This code of mine works fine, but I'm running into two small problems
1. If my webpage loads default value set to fixed value (but input value and rupee symbol not working</p><p>
2. If you change the value, then both work, but the value is not automatically reset to the changed state. The percentage value is no longer changed if the user selects a single percentage, please check any piece of my code
This is similar code</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html>
<head>
<title>Input field</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#dropdown').change(function() {
var selectedOption = $(this).val();
if (selectedOption === 'fixed') {
$('#inputField').attr('maxlength', '20');
$('#inputField').on('input', function() {
var value = $(this).val();
var formattedValue = '₹' value.replace(/D/g, '').replace(/(d)(?=(d{3}) (?!d))/g, '$1,');
$(this).val(formattedValue);
});
} else if (selectedOption === 'percentage') {
$('#inputField').attr('maxlength', '2');
$('#inputField').on('input', function() {
var value = $(this).val();
var formattedValue = value.replace(/D/g, '') '%';
$(this).val(formattedValue);
});
}
});
});
</script>
</head>
<body>
<select id="dropdown">
<option value="fixed">Fixed value</option>
<option value="percentage">Percentage</option>
</select>
<input type="text" id="inputField">
</body>
</html></pre>
<p><br /></p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Let's simplify things, create a separate function and apply your logic on the text field based on that function.
Example:
$('#dropdown').change(function() { var selectedOption = $(this).val(); check(selectedOption); }); $('#inputField').on('input', function() { var selectedOption = $('#dropdown :selected').val(); check(selectedOption); }); function check(inp) { var value = $('#inputField').val(); if (inp === 'fixed') { $('#inputField').attr('maxlength', '20'); var formattedValue = '₹' + value.replace(/\D/g, '').replace(/(\d)(?=(\d{3})+(?!\d))/g, ','); $('#inputField').val(formattedValue); } else { $('#inputField').attr('maxlength', '2'); var formattedValue = value.replace(/\D/g, '') + '%'; $('#inputField').val(formattedValue); } }