[JS] Alleen cijfers invoeren bij FORM - Softwareontwikkeling

vrijdag 27 juli 2001 09:41

Acties:

0 Henk 'm!

Skate2000

Topicstarter

als ik een form maak ala:

code:

<form name=rekenform>

<input type=text name=invoer1 size=10>

<input type=text name=invoer2 size=10>

<input type=text name=invoer3 size=10>

..

enz.. Hoe zou ik er dan voor kunnen zorgen, dat ik alleen maar cijfers in zo'n hokje kan plaatsen? Dat het hokje dus niet reageert op alfanumerieke invoer?

Als ik op diverse websites kijk, dan zie ik altijd dat je in alle hokjes voor cijfers (telefoonnummer, huisnummer e.d.) ook gewoon letters kan zetten, dit moet toch wel te voorkomen zijn?

Of moet ik het maar doen zoals ik het deed, en met nadruk vermelden dat er alleen maar cijfers geaccepteerd worden?

Zou een beetje jammer zijn nl..

vrijdag 27 juli 2001 09:43

Acties:

0 Henk 'm!

Anoniem: 11648

Skate2000: Hoe zou ik er voor kunnen zorgen, dat ik alleen maar cijfers in zo'n hokje kan plaatsen? Dat het hokje dus niet reageert op alfanumerieke invoer?

Dat kan niet. Je kunt wel telkens bij het veranderen van de waarde van het veld kijken of het laatste teken een cijfer is en zoniet het laatste teken eraf halen oid.

vrijdag 27 juli 2001 09:44

Acties:

0 Henk 'm!

4of9

probeer het eens met de functie isNaN()

zoiets als

code:

if (isNaN(tmpValue)) {
            tmpValue = 0;
            jeIDvanjeInputbox.value = '';
        } else {
            blaat....
        }

Aspirant Got Pappa Lid | De toekomst is niet meer wat het geweest is...

vrijdag 27 juli 2001 09:48

Acties:

0 Henk 'm!

Skate2000

Topicstarter

Op vrijdag 27 juli 2001 09:44 schreef 4of9 het volgende:
probeer het eens met de functie isNaN()

zoiets als
code:
1
2
3
4
5
6
if (isNaN(tmpValue)) {
            tmpValue = 0;
            jeIDvanjeInputbox.value = '';
        } else {
            blaat....
        }

Hey, da's idd een leuke..

ff poken, dankje, als ik nog hulp nodig heb dan roep ik wel..

* Skate2000 waardeert behulpzame tweakers wel, dus als je een beter ID hebt, post it!!

Edit: Damn, ik denk dat iemand het toch meer moet voorkauwen, als ik er dit van maak:

code:

if (isNaN(tmpValue)) {
            tmpValue = 0;
            invoer1.value = '';
        } else {
            invoer1.value = 'invoer1';
        }

dan verslikt hij zich nog steeds.

Zie ik nou iets over het hoofd, of isset gewoon HEEL moeilijk.

vrijdag 27 juli 2001 09:59

Acties:

0 Henk 'm!

4of9

nee het is niet heel erg moeilijk.

Je moet alleen wel ff je variabeen definen ik zal ff een stukje pasten:

code:

            tmpNode = document.all.item('IDvanjeINPUTBOX');
        tmpValue = tmpNode.value;
        if (isNaN(tmpValue)) {
            tmpValue = 0;
            tmpNode.value = '';
        } else {
            tmpNode.value = blaat; 
        }

Aspirant Got Pappa Lid | De toekomst is niet meer wat het geweest is...

vrijdag 27 juli 2001 10:00

Acties:

0 Henk 'm!

Scare360

Ja dat kan wel... men maakt een observer functie ... die controleert wat een gebruiker intypt.

function observer(object,inputString) {
if (isNaN(inputString)) {
document.form1.object.value = "";
alert('Invalid input');
return false;
}
return true
}

<input type=text name=invoer1 size=10 onKeyUp="observer('invoer1',document.form1.invoer1.value);return true">

Iedere keer als de gebruiker iets invoert etc wordt gecontroleerd op de invoerstring...

succes

vrijdag 27 juli 2001 10:01

Acties:

0 Henk 'm!

chem

Reist de wereld rond

move p&w > w&g

Klaar voor een nieuwe uitdaging.

vrijdag 27 juli 2001 10:12

Acties:

0 Henk 'm!

Skate2000

Topicstarter

Waarom W&G?? Naja, het zal wel, het heeft niets met Graphics te maken, en design ook niet, maar meer met coding toch??

* Skate2000 snapt Chem niet..

Ontopic:
Ik heb even een uitgekleede versie gemaakt van m'n HTML bestand:

code:

<html>
<head><title>Testform</title>


<script language="javascript">

function afronden(x)
{   return Math.round(x*100)/100}


function reken() {
invoer1 = parseInt(document.rekenform.invoer1.value);
invoer2 = parseInt(document.rekenform.invoer2.value);
invoer3 = parseInt(document.rekenform.invoer3.value);
oplossing = invoer1*(invoer2-invoer3)*0.0175;


if (isNaN(oplossing) || oplossing == "Infinity")
    document.rekenform.uitkmst.value = "";
else
    document.rekenform.uitkmst.value = afronden(oplossing);}

</script></head>

<BODY>

<form name=rekenform>


<table>

<tr valign="top"><td width=150>
Variabele</td>
<td nowrap>
Pas hier toe:</td></tr>

<tr valign="top"><td id="cel2">
Dit:</td>
<td>
<input type=text name=invoer1 size=10></td></tr>

<tr valign="top"><td nowrap>
<b>x</b> (dit</td>
<td>
<input type=text name=invoer2 size=10></td></tr>

<tr valign="top"><td>
<b>-</b> dit)</td>
<td>
<input type=text name=invoer3 size=10 onBlur="reken()"></td></tr>

<tr valign="top"><td id="cel2">
<b>x</b> 1,75%</td>
<td>


</td></tr>

<tr valign="top"><td id="cel2" nowrap>
<b>= Uitkomst:</b></td>
<td>
<input type=text name=uitkmst size=10></td></tr>

</table>

 <input type=reset name="reset"  Value="Schonen">

</form>

</td></tr></table>

</body></html>

als ik hier nou (in het <script> gedeelte)

code:

tmpNode = document.all.item(invoer1);
        tmpValue = (tmpNode.value
        if (isNaN(tmpValue)) {
            tmpValue = 0;
            tmpNode.value = '';
        } else {
            tmpNode.value = blaat; 
        }

tussenzet, dan werkt het niet.. of moet ik nog meer variabelen veranderen? Invoer 1 lijkt me genoeg, of is dat niet zo?

Mijn nadeel is altijd dat ik perfect snap wattik zelf heb gemaakt, maar als iemand dan een aan vulling voor me heeft, dan begrijp ik het pas als het helemaal werkt.. damn..

vrijdag 27 juli 2001 10:22

Acties:

0 Henk 'm!

4of9

je bent zoiezo in je script een aantal { vergeten dus dat gaat niet werken.

tmpNode = document.all.item(invoer1);

invoer 1 moet het ID zijn van je inputbox zijn en niet de NAME.

code:

if (isNaN(oplossing) || oplossing == "Infinity")
    document.rekenform.uitkmst.value = "";
else
    document.rekenform.uitkmst.value = afronden(oplossing);}

wat doet dit stukje code volgens jou?
de uitkomst zal nooit geen nummer zijn (isNaN = isNOTaNUMBER) dus met die functie hoef je alleen maar je invoer te checkken en niet je uitkomst lijkt mij...

Aspirant Got Pappa Lid | De toekomst is niet meer wat het geweest is...

vrijdag 27 juli 2001 10:28

Acties:

0 Henk 'm!

Skate2000

Topicstarter

Ff met Cursief tussen getypt..

Op vrijdag 27 juli 2001 10:22 schreef 4of9 het volgende:
je bent zoiezo in je script een aantal { vergeten dus dat gaat niet werken.

Waarom werkt het nu wel dan, zonder jouw stukje??

tmpNode = document.all.item(invoer1);

invoer 1 moet het ID zijn van je inputbox zijn en niet de NAME.

Wat is het verschil??
code:
1
2
3
4
if (isNaN(oplossing) || oplossing == "Infinity")
    document.rekenform.uitkmst.value = "";
else
    document.rekenform.uitkmst.value = afronden(oplossing);}
wat doet dit stukje code volgens jou?
de uitkomst zal nooit geen nummer zijn (isNaN = isNOTaNUMBER) dus met die functie hoef je alleen maar je invoer te checkken en niet je uitkomst lijkt mij...

Dit stukje code zorgt ervoor dat als er iets wordt uitgerekend wat oneindig is of als er iets wordt uitgerekend wat niet kan, datter geen "NaN" in het output veld komt te staan.. Als ik nl. ipv 6, 5 en 4 in de hokjes A, B en C invul, dan zou er "NaN" uitkomen..

Dit wil ik voorkomen, en daarom niets..

Maar beter is natuurlijk dat er niet eens Alfanumerieke zaken ingevuld kunnen worden, daarom moet het anders..

..Maar hoe?? Ik ga verder met poken, en houd dit topic in de gaten... (4of9, alvast bedankt, je rulet!)

vrijdag 27 juli 2001 10:39

Acties:

0 Henk 'm!

4of9

voor het verschil tussen ID en Name moet je ff een handleiding HTML erop na slaan (kan ik je niet echt vertellen eigenlijk

)

een oneindige berekening? dit snap ik niet helemaal (maar als je het zelf snapt is wel oke denk ik)

mischien dat je de string eerst naar een floating getal moet converten met
ParseFloat()

met de functie die ik je net gegeven heb voorkom je foute input door de waarde te vervangen voor een lege string (tmpNode.value = '';) maar je kunt dit ook vervangen voor een alert of iets dergelijks als je dat liever hebt, in mijn toepassing voldoet mijn manier dus je moet het wel een beetje customizen...

succes!

ow en die vergeten {
if (isNaN(oplossing) || oplossing == "Infinity"){
document.rekenform.uitkmst.value = "";
}else {
document.rekenform.uitkmst.value = afronden(oplossing);}
zoiets leek mij logischer mischien dat ik iets over het hoofd zie (tis alweer vrijdag he?

)

Aspirant Got Pappa Lid | De toekomst is niet meer wat het geweest is...

vrijdag 27 juli 2001 10:40

Acties:

0 Henk 'm!

Scare360

Astub.

<html>
<head><title>Testform</title>

<script language="javascript">

////////////////////
//Observer class
//////////

//Validates userInput
function observer(object,inputString) {
if (isNaN(inputString)) {
switch (object) {
case 'invoer1' : document.rekenform.invoer1.value = ""; break;
case 'invoer2' : document.rekenform.invoer2.value = ""; break;
case 'invoer3' : document.rekenform.invoer3.value = ""; break;
}
alert('Invalid input');
return false;
}
return true
}

//////////

////////////////////
//Calculate class
//////////

function afronden(x)
{ return Math.round(x*100)/100}

function reken() {
invoer1 = parseInt(document.rekenform.invoer1.value);
invoer2 = parseInt(document.rekenform.invoer2.value);
invoer3 = parseInt(document.rekenform.invoer3.value);
oplossing = invoer1*(invoer2-invoer3)*0.0175;

if (isNaN(oplossing) || oplossing == "Infinity")
document.rekenform.uitkmst.value = "";
else
document.rekenform.uitkmst.value = afronden(oplossing);}

</script></head>

<BODY>

<form name=rekenform>

<table>

<tr valign="top"><td width=150>
Variabele</td>
<td nowrap>
Pas hier toe:</td></tr>

<tr valign="top"><td id="cel2">
Dit:</td>
<td>
<input type=text name=invoer1 size=10 onKeyUp="observer('invoer1',document.rekenform.invoer1.value);return true"></td></tr>

<tr valign="top"><td nowrap>
<b>x</b> (dit</td>
<td>
<input type=text name=invoer2 size=10 onKeyUp="observer('invoer2',document.rekenform.invoer2.value);return true"></td></tr>

<tr valign="top"><td>
<b>-</b> dit)</td>
<td>
<input type=text name=invoer3 size=10 onBlur="reken()" onKeyUp="observer('invoer3',document.rekenform.invoer1.value);return true"></td></tr>

<tr valign="top"><td id="cel2">
<b>x</b> 1,75%</td>
<td>

</td></tr>

<tr valign="top"><td id="cel2" nowrap>
<b>= Uitkomst:</b></td>
<td>
<input type=text name=uitkmst size=10></td></tr>

</table>

<input type=reset name="reset" Value="Schonen">

</form>

</td></tr></table>

</body></html>

vrijdag 27 juli 2001 10:49

Acties:

0 Henk 'm!

Skate2000

Topicstarter

Op vrijdag 27 juli 2001 10:40 schreef paulgielens het volgende:
Astub.

...

Dankuw.

Heej, heel gaaf.. ik ga weer verder..

vrijdag 27 juli 2001 13:35

Acties:

0 Henk 'm!

Pelle

🚴‍♂️

Op vrijdag 27 juli 2001 10:12 schreef Skate2000 het volgende:
Waarom W&G?? Naja, het zal wel, het heeft niets met Graphics te maken, en design ook niet, maar meer met coding toch??

* Skate2000 snapt Chem niet..

* Pelle snapt Chem wel

Van http://gathering.tweakers.net/index.php :

Webdesign & Graphics
Hét forum voor webdesign, (D)HTML, Javascript, graphics, 3D-rendering, Flash en alles wat ermee te maken heeft.

vrijdag 27 juli 2001 14:21

Acties:

0 Henk 'm!

4of9

leuk dat jij het wel snapt Pelle,

alleen is het een beetje offtoppic geloof ik...

Aspirant Got Pappa Lid | De toekomst is niet meer wat het geweest is...