Toon posts:

[JS] dynamische form files weer opnieuw zetten

Pagina: 1

Acties:

42 views sinds 30-01-2008
Reageer

dinsdag 15 oktober 2002 10:18

Acties:

stean

Topicstarter

heb de volgende functie:

code:

function isAmount(maxbrochure,id) { 
  theVal= eval("form1.dropdown"+id+".value");
  if (theVal > maxbrochure)
     { 
     // dit is vast en niet dynamisch self.form1.dropdown1.value = maxbrochure;
     // poging 1 self.form1.eval("dropdown"+id+"").value = maxbrochure;
     // poging 2 document.form1.dropdown[+id+].value = maxbrochure;
     
     alert('No more then '+maxbrochure+' of this brochure is allowed ') 
     }
de html:
<input type=text maxlength=3 size=5 name="dropdown1" value=1 onchange=return(isAmount(5,1))>
<input type=text maxlength=3 size=5 name="dropdown2" value=1 onchange=return(isAmount(100,2))>
<input type=text maxlength=3 size=5 name="dropdown3" value=1 onchange=return(isAmount(500,3))>

waarbij de naam van de "dropdown+id" is

maxbrochure is het aantal dat ze maximaal mogen bestellen. deze geef ik mee als eerste parameter, de tweede parameter is het id.

echter als er 10 brochures wordt ingetikt dan moet die dat checken of dit niet meer is dan het maxbrochure getal (in dit voorbeeld 5 of 100 of 500) .dit werkt prima.

echter ik wil dan dat het dynamiche formveld op de maximale aantal brochures(maxbrochure)komt te staan. zie mijn pogingen om dit dynamisch te bereiken, maar helaas. hebben jullie een idee?

dinsdag 15 oktober 2002 10:26

Acties:

Hangloozz

{ @$%&# }

dit werkt bij mij:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    <!--
    function isAmount(maxbrochure,id) { 
  theVal= eval("form1.dropdown"+id+".value");
  if (theVal > maxbrochure)
     {   
     alert('No more then '+maxbrochure+' of this brochure is allowed ') 
     document.form1.dropdown1.value = maxbrochure;
     }
}

    //-->
    </SCRIPT>
</head>

<body>
<form name="form1">
<input type="text" maxlength="3" size="5" name="dropdown1" value="1" onchange="return(isAmount(5,1))">
</form>

</body>
</html>

www.jurgroessen.nl

dinsdag 15 oktober 2002 10:27

Acties:

crisp

Devver

Pixelated

JavaScript:

1	theVal= parseInt(document.forms['form1'].elements['dropdown'+id].value, 10);

Misschien vooraf nog een check of er wel een numerieke waarde is gegeven, en onthoud: eval is vies

Intentionally left blank

dinsdag 15 oktober 2002 10:29

Acties:

stean

Topicstarter

Hangloozz: je zet nu het textfield "hard". echter wat als die 1(wat een id is) een 2 is dan werkt het niet.

dinsdag 15 oktober 2002 10:31

Acties:

stean

Topicstarter

crisp schreef op 15 oktober 2002 @ 10:27:
JavaScript:
1
theVal= parseInt(document.forms['form1'].elements['dropdown'+id].value, 10);
Misschien vooraf nog een check of er wel een numerieke waarde is gegeven, en onthoud: eval is vies

maar los ik hier mee ook het zetten van het dynamisch genereerde textfield op?

dinsdag 15 oktober 2002 10:31

Acties:

crisp

Devver

Pixelated

stean schreef op 15 oktober 2002 @ 10:29:
Hangloozz: je zet nu het textfield "hard". echter wat als die 1(wat een id is) een 2 is dan werkt het niet.

Zie daarvoor ook mijn reply, dus:

JavaScript:

1	document.forms['form1'].elements['dropdown'+id].value = maxbrochure;

want (repeat after me): eval is vies

Intentionally left blank

dinsdag 15 oktober 2002 10:33

Acties:

stean

Topicstarter

eval is vies

dinsdag 15 oktober 2002 10:34

Acties:

Verwijderd

JavaScript:

function isAmount(maxbrochure,tObj) 
{ 
    if(!isNaN(tObj.value) && (tObj.value/1)>maxbrochure)
    {
        alert("No more than " + maxbrochure + " brochures are allowed") 
        tObj.value=maxbrochure;
    }
}
de html:
<input type=text maxlength=3 size=5 name="dropdown1" value=1 onchange=return(isAmount(5,this))>
<input type=text maxlength=3 size=5 name="dropdown2" value=1 onchange=return(isAmount(100,this))>
<input type=text maxlength=3 size=5 name="dropdown3" value=1 onchange=return(isAmount(500,this))>

[ Voor 0% gewijzigd door Verwijderd op 15-10-2002 10:34 . Reden: typo ]

dinsdag 15 oktober 2002 10:37

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op 15 oktober 2002 @ 10:34:

JavaScript:

function isAmount(maxbrochure,tObj) 
{ 
    if(!isNaN(tObj.value) && (tObj.value/1)>maxbrochure)
    {
        alert("No more than " + maxbrochure + " brochures are allowed") 
        tObj.value=maxbrochure;
    }
}
de html:
<input type=text maxlength=3 size=5 name="dropdown1" value=1 onchange=return(isAmount(5,this))>
<input type=text maxlength=3 size=5 name="dropdown2" value=1 onchange=return(isAmount(100,this))>
<input type=text maxlength=3 size=5 name="dropdown3" value=1 onchange=return(isAmount(500,this))>

Oei evil:

JavaScript:

1	(tObj.value/1)>maxbrochure

en persoonlijk zou ik de numeriek check ervoor zetten en daar ook een foutmelding op geven...

Intentionally left blank

dinsdag 15 oktober 2002 10:49

Acties:

stean

Topicstarter

tot slot de hele code nog even voor de anderen

code:

<script language="JavaScript"> 
validAmount = '01234567890'; 
var theVal;
function isAmount(maxbrochure,id) { 
  theVal= eval("form1.dropdown"+id+".value");
  if (theVal=="" || theVal == 'undefined') return false; /* change to false if field MUST be filled */ 
        for (i=0;i<theVal.length;i++) { 
            if (validAmount.indexOf(theVal.charAt(i)) == -1) { 
                document.all.forwardInput.disabled = true;
                alert('Please enter a valid amount') 
                return false; 
                }
        }
        
        if (theVal > maxbrochure)
        { 
         document.forms['form1'].elements['dropdown'+id].value = maxbrochure;
         document.all.forwardInput.disabled = true;
         alert('No more then '+maxbrochure+' of this brochure is allowed ') 
        }
} 
</script>

aanpassingen/verbeteringen zie ik graag

dinsdag 15 oktober 2002 10:56

Acties:

crisp

Devver

Pixelated

eeeh, wat heb ik nou gezegd: eval is vies, en voor document.all wordt je hier gevierendeeld

kijk ook even naar de code van CJ_S, de object handle meegeven als id is in dit geval ook heel praktisch.
verder heeft

code:

1	theVal == 'undefined'

ook weinig zin, want de kans is klein dat iemand letterlijk 'undefined' gaat intypen, de waarde zal ook nooit undefined zijn in dit geval, hooguit een lege string.
Numeriek checken zou ik met de isNaN doen, maar dan nog zou ik 'm naar integer parsen voor de afvraging met maxbrochure, want ik weet niet wat '13' > 2 oplevert...

edit: laatste gaat gelukkig wel goed, maar mocht je het in een optelling nodig hebben is het altijd handig om met integers te werken. Vergelijk:
'13' + 2 == '132'
13 + 2 == 15

Intentionally left blank

dinsdag 15 oktober 2002 11:13

Acties:

Hangloozz

{ @$%&# }

stean schreef op 15 oktober 2002 @ 10:29:
Hangloozz: je zet nu het textfield "hard". echter wat als die 1(wat een id is) een 2 is dan werkt het niet.

okay, het was een schot voor de boeg.. maar wel mis

www.jurgroessen.nl

dinsdag 15 oktober 2002 11:14

Acties:

stean

Topicstarter

code:

1	theVal= eval("form1.dropdown"+id+".value");

deze regel miste ik net even. document.all is al weg. maar waarom is eval() eigenlijk vies?
kan je dat even toelichten?

dinsdag 15 oktober 2002 11:15

Acties:

Verwijderd

crisp, hoezo is:
(tObj.value/1)>maxbrochure
evil?

Het is standaard code om een stringwaarde om te zetten naar een numerieke waarde. de isNaN zorgt ervoor dat het zeker numeriek is. Het is een normale check die vaak wordt gebruikt.

Daarnaast zal theVal gelijk zijn aan de string undefined als deze niet gedeclareerd is. Maar in dat geval zal ik idd alleen theVal gebruiken en geen check aan toe voegen.

dinsdag 15 oktober 2002 11:17

Acties:

crisp

Devver

Pixelated

stean schreef op 15 oktober 2002 @ 11:14:
code:
1
theVal= eval("form1.dropdown"+id+".value");
deze regel miste ik net even. document.all is al weg. maar waarom is eval() eigenlijk vies?
kan je dat even toelichten?

Gewoon omdat het in 99% van de gevallen zonder eval kan, en daarbij is eval ook altijd trager omdat de browser een stringpresentatie moet gaan omzetten naar een object handle.

Intentionally left blank

dinsdag 15 oktober 2002 11:18

Acties:

Verwijderd

for (i=0;i<theVal.length;i++) {
if (validAmount.indexOf(theVal.charAt(i)) == -1) {
document.all.forwardInput.disabled = true;
alert('Please enter a valid amount')
return false;
}
}

staat gelijk aan de isNan(value) functie. Eval is vies omdat het code executeert. M.a.w. als er geen maxLength n staat en ik voer daar in:
confirm("hallo")

Dan krijgt ik gelijk een confirm box. Wil je dat? Ik kan dan alle code die ik wil executeren in de LIVE pagina. Security risk voor sommige pagina's. Maar aan de andere kant kan ik dat ook doen via de normale location-bar. het is in ieder geval ngeen goede practice om eval te gebruiken.

CJ

dinsdag 15 oktober 2002 11:21

Acties:

Verwijderd

if(isNaN(theVal)) document.forms[0]["forwardInput"].disabled=true;

maaruuh, dat zal alleen werken in IE4+ en NS6+.

dinsdag 15 oktober 2002 11:24

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op 15 oktober 2002 @ 11:15:
crisp, hoezo is:
(tObj.value/1)>maxbrochure
evil?

Het is standaard code om een stringwaarde om te zetten naar een numerieke waarde. de isNaN zorgt ervoor dat het zeker numeriek is. Het is een normale check die vaak wordt gebruikt.

Daarnaast zal theVal gelijk zijn aan de string undefined als deze niet gedeclareerd is. Maar in dat geval zal ik idd alleen theVal gebruiken en geen check aan toe voegen.

Het is evil omdat je misbruik maakt van de auto type-casting van javascript; niet alle talen hebben dit, en daarbij heeft js ook een parseInt functie waarmee je precies hetzelfde bereikt, en wat imho duidelijker is...
Ik gebruik dit soort truuks (want dat is het uiteindelijk) ook wel eens, maar ik zou het nooit als voorbeeld geven.

undefined != 'undefined', daar ging het om, en daarbij kan een bestaand formveld nooit undefined zijn (dan was het geen formveld)...

Intentionally left blank

dinsdag 15 oktober 2002 11:28

Acties:

Verwijderd

Het is evil omdat je misbruik maakt van de auto type-casting van javascript; niet alle talen hebben dit, en daarbij heeft js ook een parseInt functie waarmee je precies hetzelfde bereikt, en wat imho duidelijker is...

Kwestie van smaak dus :-) In JS is die mogelijkheid er wel en dus gebruik ik die waar mogelijk. Voordeel: floating point en integere waardes worden altijd correct teruggestuurd.

undefined != 'undefined', daar ging het om, en daarbij kan een bestaand formveld nooit undefined zijn (dan was het geen formveld)...

Dit geldt niet voor een normale check. In het voorbeeld is het alleen niet van belang! (dus idd).

Maar dit is een andere discussie.

dinsdag 15 oktober 2002 12:22

Acties:

stean

Topicstarter

Zijn jullie de JS goeroes?

dinsdag 15 oktober 2002 12:28

Acties:

crisp

Devver

Pixelated

stean schreef op 15 oktober 2002 @ 12:22:
Zijn jullie de JS goeroes?

Wie CJ_S is weet ik niet; hij heeft zich pas gisteren geregged zo te zien, maar lijkt me wel een goede aanwinst gezien zijn posts in deze draad

Ik ben Goeroe In Opleiding en woon in een hutje op een steenworp afstand van de Ivoren Torens

Intentionally left blank

dinsdag 15 oktober 2002 12:44

Acties:

stean

Topicstarter

beter!!! Nu bedankt allen voor jullie hulp. het was een leerzame ervaring

dinsdag 15 oktober 2002 12:59

Acties:

Verwijderd

Laat ik me dan voorstellen. Ik ben webdeveloper en word "gezien" als JS guru. Mede door mijn support aan http://www.experts-exchange.com waar ik sinds 2000 bezig ben geweest met javascript en web related vragen te beantwoorden (in javascript bijna 1300 vragen beantwoord wat mij nr.2 maakt naast de Nederlander Michel Plungjan co-auteur van Instant JavaScripts). Mijn interesse gaat nochtans niet uit naar javascript :-)

Glad to help!

dinsdag 15 oktober 2002 13:20

Acties:

stean

Topicstarter

Mijn interesse gaat nochtans niet uit naar javascript :-)

lol

Pagina: 1

Reageer