Waarde controle en inkleuren werkt niet 100% met javascript.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pascal Schuffelers

Pascal Schuffelers

22/03/2019 07:40:46
Quote Anchor link
Ik heb op mijn pagina een controle op mijn input velden zitten.
Hij controleert aan de hand van de ingelezen waarde of het ingevulde waarde er tussen in ligt.
Echter ik heb een fenomeen, ook vermoedelijk te begrijpen, dat hij sommige input velden rood kleurt terwijl niets is ingevuld.

Mijn code die ik hiervoor bv gebruik is deze.:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
if (t1 == 0 && t2 == 0) { $('#KleurL').css({'backgroundColor':'white'});  }
    else if (isNaN(get_value) || get_value < t1 || get_value > t2) {
        $('#KleurL').css({'backgroundColor':'red'});
        }  else { //$("#KleurL").addClass('green');
        $('#KleurL').css({'backgroundColor':'white'});
        } ;


Als beide ingelezen waarde (t1 en t2) beide 0 zijn doet hij niets, blijft de achtergrond van de input veld wit, dat is goed.
Maar als de grenzen bv 0 en 20 en ingevulde waarde buiten de grenzen valt van t1 en t2 kleurt hij ook rood, dat is goed en als ik niks invul blijft hij wit, vermoedelijk, naar mijn mening ziet hij de begin waarde als 0 aan als niks is ingevuld.
Maar als ik grenzen heb van 70 en 80 , dan kleurt hij zonder iets in te vullen al rood.

Hopelijk is mijn vraagstelling duidelijk en is dit eventueel op te lossen?
Gewijzigd op 22/03/2019 07:42:09 door Pascal Schuffelers
 
PHP hulp

PHP hulp

19/03/2024 08:57:05
 
Rob Doemaarwat

Rob Doemaarwat

22/03/2019 08:07:29
Quote Anchor link
En wat is de waarde van get_value dan (waar komt deze waarde vandaan; op welke event voer je dit uit)?
 
Pascal Schuffelers

Pascal Schuffelers

22/03/2019 11:48:25
Quote Anchor link
Rob Doemaarwat op 22/03/2019 08:07:29:
En wat is de waarde van get_value dan (waar komt deze waarde vandaan; op welke event voer je dit uit)?


get_value is de waarde die hij uitleest wat je invult in het input field.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
var get_value = $("#KleurL").val();  
 
Thomas van den Heuvel

Thomas van den Heuvel

22/03/2019 13:40:57
Quote Anchor link
Pascal Schuffelers op 22/03/2019 07:40:46:
dan kleurt hij zonder iets in te vullen al rood.

Komt dat niet gewoon doordat isNaN(get_value) dan true oplevert?
 
Pascal Schuffelers

Pascal Schuffelers

22/03/2019 13:47:19
Quote Anchor link
Thomas van den Heuvel op 22/03/2019 13:40:57:
Pascal Schuffelers op 22/03/2019 07:40:46:
dan kleurt hij zonder iets in te vullen al rood.

Komt dat niet gewoon doordat isNaN(get_value) dan true oplevert?


Als ik die weg laat doet hij namelijk ook hetzelfde.
 
Thomas van den Heuvel

Thomas van den Heuvel

22/03/2019 15:34:28
Quote Anchor link
Zet je get_value wel ergens expliciet om naar een integer met parseInt()? Alle formulierinhoud is per definitie van het type string geloof ik. JavaScript is (nogal) typegevoelig.
Gewijzigd op 22/03/2019 15:35:42 door Thomas van den Heuvel
 
Pascal Schuffelers

Pascal Schuffelers

23/03/2019 06:51:31
Quote Anchor link
Thomas van den Heuvel op 22/03/2019 15:34:28:
Zet je get_value wel ergens expliciet om naar een integer met parseInt()? Alle formulierinhoud is per definitie van het type string geloof ik. JavaScript is (nogal) typegevoelig.


Nee dat had ik niet gedaan, nu net even gedaan en nu kleuren alle vakken rood en de ene wel en de andere niet, dus ik ga ervan uit dat die controle nu niet correct is.

Vraag, die parseInt() rond die af op hele getallen? merk dat hij op hele getallen wel werkt maar niet achter de komma of moet deze ook omgezet worden .: var t1 = document.getElementById('emp_RColorLMin').innerHTML;


[update]
Opgelost met parseFloat :D
Moet je wel gelijk geven Javascript is wel heel erg gevoelig voor fouten :S
Gewijzigd op 23/03/2019 08:21:02 door Pascal Schuffelers
 
Thomas van den Heuvel

Thomas van den Heuvel

23/03/2019 16:46:11
Quote Anchor link
Nah, JavaScript is gewoon (veel) strict(er). Waarschijnlijk was je strings aan het vergelijken in plaats van getallen. Dan geldt een andere (alfabetische) sorteringsvolgorde waardoor het lijkt alsof de resultaten willekeurig zijn.

Vergelijk:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<title>sortering test</title>
</head>

<body>
<script type="text/javascript">
var test1 = '3.14'; // let op quotes
var test2 = '12'; // alles wat uit een formulier komt is per definitie van het type string

alert(test1 < test2); // levert false, immers 3 komt alfabetische gezien na 1
alert(parseFloat(test1) < parseFloat(test2)); // levert true, immers 3.14 is kleiner dan 12
</script>
</body>
</html>
Gewijzigd op 23/03/2019 23:48:44 door Thomas van den Heuvel
 
Pascal Schuffelers

Pascal Schuffelers

23/03/2019 19:40:22
Quote Anchor link
In ieder geval heb ik weer wat bij geleerd, thx.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.