JSFiddle - React, Tailwind, and code Playground

by levan gongadze

HTML

<form>
<select name="payment_type">
<option data-limit-max="150" data-limit-min="50" value="visa">Visa</option>
<option data-limit-min="300" value="mastercard">Mastercard</option>
</select>
<input type="text" placeholder="Amount" name="amount"> 

<input type="text" name="code" placeholder="promo">

<div class="error">
</div>
<input type="submit" value="submit">
</form>

JavaScript

function limit(val) {
    var limit = $('select[name="payment_type"]').find(":selected");
    $('input[type="submit"]').attr('disabled', false);
    $('.error').html('');

		if(val!='' && $('input[name="code"]').val() != '5555') {
        if(val > limit.data('limit-max')) {
          $('.error').html('maximum limit is '+limit.data('limit-max')+'');
          $('input[type="submit"]').attr('disabled', true);
        }

        if(val < limit.data('limit-min')) {
          $('.error').html('minimum limit is '+limit.data('limit-min')+'');
          $('input[type="submit"]').attr('disabled', true);
        }
    }

  }


	$('input[name="amount"]').keyup(function(){
		limit($(this).val());  
  });
  
  $('input[name="code"]').keyup(function(){
  	amount = $('input[name="amount"]').val();
		limit(amount);  
  });

  $('select[name="payment_type"]').change(function(){
  	amount = $('input[name="amount"]').val();
  	limit(amount);
  });