简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
When selecting different options, the input field type can support 20 digit rupee with rupee symbol or replaced with percentage
P粉022140576
P粉022140576 2023-08-13 18:35:32
0
1
380
<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粉022140576
P粉022140576

reply all(1)
P粉063039990
P粉0630399902023-08-14 14:21:09 1 floor

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">
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！