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 then input field type rupees support 20 digit with rupees symbol if select percentage then replace rupees symbol

52 Views Asked by AIYUB KHAN At 12 August 2023 at 07:42

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>

Original Q&A

There are 1 best solutions below

**4b0** · Answer 1 · 2023-08-12T08:30:45.223000

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

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

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in JDEVELOPER

Related Questions in REACT-FULLSTACK

Trending Questions

Popular # Hahtags

Popular Questions