if select option select fixed then input field type rupees support 20 digit with rupees symbol if select percentage then replace rupees symbol

Question

if select option select fixed value then input field type rupees value support only 20 digit with rupees symbol. if select percentage then replace rupees symbol with percentage of symbol and value type only 2 digit input value with percentage symbol without click a button

my this code working properly but i am facing two small problem .1 if my webpage load default value set fixed (but input value and rupees symbol not working
.2 if change value then working both condition but value not reset automatically changing state. and if user select percentage single then not change percent value again please check anyone of my code here is the similar my code

 <!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>

but if i am select percentage value and i am clicking backspace button then value not cut of automatically — AIYUB KHAN
– AIYUB KHAN, Commented Aug 12, 2023 at 8:43
and also not remove percentage if i am pressing backspace then cut value and after putting value automatically insert percent symbol in value last — AIYUB KHAN
– AIYUB KHAN, Commented Aug 12, 2023 at 8:59

4b0 · Accepted Answer · 2023-08-12 10:33:17Z

Lets make things easier and create separate function and based upon that function apply your logic on text field.

Example:

var selectedOption = '';
$('#dropdown').change(function() {
  selectedOption = $(this).val();
  check(selectedOption);
});
$('#inputField').on('input', function() {
  selectedOption = $('#dropdown :selected').val();
  check(selectedOption);
});

function check(inp) {
  var _inp = $('#inputField');
  var value = _inp.val();
  if (inp === 'fixed') {
    _inp.attr('maxlength', '20');
    var formattedValue = '₹' + value.replace(/\D/g, '').replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
    _inp.val(formattedValue);
  } else {
    _inp.attr('maxlength', '2');
    var formattedValue = value.replace(/\D/g, '') + '%';
    _inp.val(formattedValue);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dropdown">
  <option value="fixed">Fixed Value</option>
  <option value="percentage">Percentage</option>
</select>
<input type="text" id="inputField">

Collectives™ on Stack Overflow

if select option select fixed then input field type rupees support 20 digit with rupees symbol if select percentage then replace rupees symbol

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related