CODEWITHSUNDEEP
javascripthtmljquerywordpressevent-binding
Richu
Richu

Reputation: 13

jQuery on() Method with 'keyup' and 'change' arguments doesn't work on mobile devices

I'm trying to disable a submit button to check if all the input fields are filled before submitting. The code below works fine on desktop, but it is not working on mobile devices. Am I missing something?

jQuery(function($) {
$('button.wof-btn-submit').attr('disabled', true);
$('[data-wof-field~="primary_email"]').on('keyup change drop paste', function(event) { 
 
        validateInputs();
    });
​
    $('[data-wof-field~="text_2"]').on('keyup change drop paste', function(event) {
        validateInputs();
    });
​
    $('[data-wof-field~="number_1"]').on('keyup change drop paste', function(event) {
        validateInputs();
    });
​
    $('[data-wof-field~="text_1"]').on('keyup change drop paste', function(event) {
        validateInputs();
    });
​
    function validateInputs(){
        var disableButton = false;
​
        var val1 = $('[data-wof-field~="primary_email"]').val();
        var val2 = $('[data-wof-field~="text_2"]').val();
        var val3 = $('[data-wof-field~="number_1"]').val();
        var val4 = $('[data-wof-field~="text_1"]').val();
​
        if(val1.length == 0 || val2.length == 0 || val3.length == 0 || val4.length == 0)
            disableButton = true;
​
        $('button.wof-btn-submit').attr('disabled', disableButton);
    }
});

Here is the link

Thanks in advance,

Upvotes: 1

Views: 176

Answers (1)

fatm
fatm

Reputation: 455

jQuery(function($) {
  $('button.wof-btn-submit').attr('disabled', true);
  $('[data-wof-field~="primary_email"]').on('keyup change drop paste', function(event) {

    validateInputs();
  });
  $('[data-wof-field~="text_2"]').on('keyup change drop paste', function(event) {
    validateInputs();
  });
  $('[data-wof-field~="number_1"]').on('keyup change drop paste', function(event) {
    validateInputs();
  });
  $('[data-wof-field~="text_1"]').on('keyup change drop paste', function(event) {
    validateInputs();
  });

  function validateInputs() {
    var disableButton = false;

    var val1 = $('[data-wof-field~="primary_email"]').val();
    var val2 = $('[data-wof-field~="text_2"]').val();
    var val3 = $('[data-wof-field~="number_1"]').val();
    var val4 = $('[data-wof-field~="text_1"]').val();

    if (val1.length == 0 || val2.length == 0 || val3.length == 0 || val4.length == 0) {
      disableButton = true;
      $('button.wof-btn-submit').attr('disabled', 'disabled')
    }

    if (!disableButton) {
      $('button.wof-btn-submit').removeAttr('disabled');
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wof-form-wrapper">
  <div class="wof-error wof-fgcolor" style="color:#dd0000;border-color:#dd0000;display: none;"></div>

  <div class="wof-form-fields">
    <div>
      <input type="email" placeholder="Your email" data-wof-field="primary_email" class="wof-input" name="wof-email">
    </div>
    <div>
      <input type="text" placeholder="Phone Number" data-wof-field="text_2" class="wof-input">
    </div>
    <div>
      <input type="number" placeholder="Transaction Number" data-wof-field="number_1" class="wof-input">
    </div>
    <div>
      <input type="text" placeholder="Full Name" data-wof-field="text_1" class="wof-input">
    </div>
  </div>

  <button class="wof-btn-submit wof-color-2" type="submit" disabled="disabled">
    <span>Try your luck</span>
    <div class="wof-loader" style="display: none;">
      <div class="b1"></div>
      <div class="b2"></div>
      <div></div>
    </div>
  </button>

  <div class="wof-response"></div>
</div>

Upvotes: 1

Related Questions