Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 74353

Textbox enabled based on Select dynamically and apply validation on textbox

$
0
0

Want enable textbox based on dropdown select dynamic id generated. Textbox and Select box id is generated dynamically like.. amount1, amount2, amount3 and apply validation on textbox with maximum of 3000 amount. For Example : Ehen user select, value as "Fines" in textbox value should allow between 1 to 3000 and text. if select values as other then "Fines" then no validation on textbox.

My Javascript Code :

var $ = jQuery;
$(document).ready(function() {
  $('.amount').attr('disabled', true);
  $(".amount").css({ "backgroundColor": "#eee" });
});

$(document).ready(function () {
    $('input[name=amount]').keyup(function () {
        var total_items = 100;
        for (rowNum = 1; rowNum <= total_items; rowNum++) {
            var selectvl = $("#exp_id" + rowNum).val();
            if (selectvl == '10') {
                if ($(this).val() < 3001 && $(this).val() > 1) {
                    $('#msg').fadeOut('slow');
                } else {
                    $('#msg').fadeIn('slow');
                }
                } 
            }   
    });

    $('body').on('change', '.exp_id', function () {
        var total_items = 100;
        for (rowNum = 1; rowNum <= total_items; rowNum++) {
        const toChangeElement = $(event.target).parent().next().children();
            const exp_id = event.target.value;
            if (this.value == '10') {
                $("#amount" + rowNum).attr('max', '3000');
                $("#amount" + rowNum).attr('min', '1');
                $('#msg').fadeIn('slow');
                $("#msg").html("Enter amount below AED 3000. !!");
                $("#amount" + rowNum).css({ "backgroundColor": "#ffffff" );
                toChangeElement.removeAttr('disabled');
                toChangeElement.css('backgroundColor', "#ffffff");
                toChangeElement.focus();
                return false;
            } else {
                $('#msg').fadeOut('slow');
                $("#amount" + rowNum).attr('max', '10000');
                $("#amount" + rowNum).attr('min', '1');
                $("#amount" + rowNum).css({"backgroundColor": "#ffffff"});
                toChangeElement.removeAttr('disabled');
                toChangeElement.css('backgroundColor', "#ffffff");
                toChangeElement.focus();
            }
        }
    });
});     

My jsfiddle link


Viewing all articles
Browse latest Browse all 74353

Trending Articles