search

Home  >  Q&A  >  body text

When selecting different options, the input field type can support 20 digit rupee with rupee symbol or replaced with percentage

<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>
P粉022140576P粉022140576470 days ago435

reply all(1)I'll reply

  • P粉063039990

    P粉0630399902023-08-14 14:21:09

    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);
  }
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dropdown">
  <option value="fixed">固定值</option>
  <option value="percentage">百分比</option>
</select>
<input type="text" id="inputField">

    reply
    0
  • Cancelreply