How to fix jQuery 'length' of undefined problem in browser mobile view?

Question

I'm create input form where user can add some text. if input value is empty, submit button is disabled, if text is entered submit button is enabled. my created code is working well, but when I use mobile or Touch view (chrome dev. tools toggle device toolbar) is not working.I think problem is Touch but i cant solve it.

$('#imgText').on('keyup keypress', function() { if($(this).val().length >= 1) { $("#generate-img").removeClass("no-click"); } }); $('#imgText').on('keyup', function() { if($(this).val().length == 0) { $("#generate-img").addClass("no-click"); } });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

croppie-generator.js throws the error, not jQuery. Please add a minimal reproducible example. — Andreas
– Andreas, Commented Jun 14, 2019 at 11:12
Who is "#imgText" and "#generate-img"? Please provide full code, I cannot help if I don't have all the data to reproduce the problem in jsFiddle. :( — Mara Black
– Mara Black, Commented Jun 14, 2019 at 11:12
If $(this).val() is undefined, just add this to your if statement: if ($(this).val() && $(this).val().length >= 1... — virgiliogm
– virgiliogm, Commented Jun 14, 2019 at 11:14
In addition, the second on-keyup could be an else block in the first one — virgiliogm
– virgiliogm, Commented Jun 14, 2019 at 11:15
There are no Keyup and KeyDown events available at mobile devices, you're event will never be fired on mobile devices. see here stackoverflow.com/questions/38989559/… — Florian de Ville
– Florian de Ville, Commented Jun 14, 2019 at 11:15

Cray · Accepted Answer · 2019-06-14 11:51:57Z

You could use jQuery's .on('input') method instead to catch changes made to field's value.

$(document).ready( function() { $('#imgText').on("input", function() { if($(this).val().length == 0) { $("#generate-img").addClass("no-click"); } else { $("#generate-img").removeClass("no-click"); } }); });

.no-click { background-color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="imgText"> <input id="generate-img" type="submit" class="no-click">

Shahjehan Ali Chughtai · Accepted Answer · 2019-06-14 12:04:36Z

You can use this method for mobile devices

$(document).ready( function() { $('#imgText').on("keyup input", function() { if($(this).val().length == 0) { $("#generate-img").addClass("no-click"); } else { $("#generate-img").removeClass("no-click"); } }); });

.no-click { background-color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="imgText"> <input id="generate-img" type="submit" class="no-click">

Collectives™ on Stack Overflow

How to fix jQuery 'length' of undefined problem in browser mobile view?

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related