[js] Variabele veldnaam bij request

[StephanVierkant]

Ik ben momenteel bezig met een klein bestelformuliertje. Daarbij wil ik dat de prijs met een ajax-request wordt geladen in de tabel, zodat het (sub)totaalbedrag gelijk te zien is. Ik maak gebruik van de tutorial van W3Schools.com.

Ik heb de html-code iets aangepast. De request gaat verder prima, ik krijg netjes een prijs in een vakje, maar in de verkeerde. Indien ik in het tweede veld iets invul, wil ik in vakje prijs2 het bedrag krijgen. Ik krijg het helaas niet voor elkaar.

Ik heb nu dit aangepast:

HTML:

<form name="myForm">
Aantal: <input type="text" name="aantal1" onkeyup="ajaxFunction(1, this.value);" />
Subtotaal: <input type="text" name="prijs1" />

Aantal: <input type="text" name="aantal2" onkeyup="ajaxFunction(2, this.value);" />
Subtotaal: <input type="text" name="prijs2" />
</form>

JavaScript:

function ajaxFunction(product, aantal)
{
    //knip
    
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState==4)
        {
            document.myForm.prijs + product .value=xmlhttp.responseText 
        }
    }

Dit werkt echter niet. Op de plek waar nu 'prijs + product' staat moet dus 'prijs1' of 'prijs2' komen te staan, maar ik heb geen idee hoe ik dat voor elkaar krijg. Kan iemand mij verder helpen?

oops, het is wel ajax maar toch clientside lijkt me, verkeerde subforum?

[ Voor 3% gewijzigd door StephanVierkant op 09-07-2009 17:44 ]

[MueR]

offtopic:
Voor het verkeerde forum moet je een topic-report () aanmaken

Kijk eens goed hoe je string concatenation in javascript moet aanpakken. Dat is niet simpelweg "prijs + product en javascript vind op magische wijze wel wat een variabele en wat een string is".

[RobIII]

PRG >> WEB

[Verwijderd]

Stephan4kant schreef op donderdag 09 juli 2009 @ 17:43:

HTML:

<form name="myForm">
Aantal: <input type="text" name="aantal1" onkeyup="ajaxFunction(1, this.value);" />
Subtotaal: <input type="text" name="prijs1" />

Aantal: <input type="text" name="aantal2" onkeyup="ajaxFunction(2, this.value);" />
Subtotaal: <input type="text" name="prijs2" />
</form>

JavaScript:

function ajaxFunction(product, aantal)
{
    //knip
    
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState==4)
        {
            document.myForm.prijs + product .value=xmlhttp.responseText 
        }
    }

document.myForm.prijs bestaat niet, product.value of whatever het zou moeten zijn bestaat ook niet. Wellicht wil je meer de kant op van:

JavaScript:

document.myForm.prijs1.value = 1+1; //

Sowieso vraag ik me af waarom je ajax daarvoor wil gebruiken, de benodigde gegevens heb je volgens mij al in je html staan...

[StephanVierkant]

Dit is natuurlijk een versimpelde weergave van wat ik wil. Ik wil graag AJAX gebruiken omdat er nog meer berekeningen komen (kwantumkorting bijvoorbeeld).

document.myForm.prijs1 bestaat wel, er hoeft alleen nog maar het artikelnummertje achter. Ik heb nu prijs.concat(product), maar dat werkt ook niet .

[Mike2k]

kan je niet een ID aan het formpje hangen en dan GetElementById gebruiken ?

Of, met Jquery:

code:

$("#idvanhetveld").text("ditwordterdaningevuld");

[Walance]

Je kunt niet op die manier iets aanroepen, zoals MueR al zei...
Je kunt beter je html elementen een id geven ipv name en dan zoiets doen:

JavaScript:

document.getElementById("prijs" + product).value = xmlhttp.responseText;

//edit: te laat...
maar nog wel een toevoeging: je kunt misschien beter ook controleren of het element wel bestaat nadat je getElementById hebt gebruikt, zodat je geen foutmeldingen krijgt als er een verkeerde waarde bij product is ingevuld.

[ Voor 33% gewijzigd door Walance op 09-07-2009 18:26 ]

[Leftblank]

Ook een tip wanneer je nog relatief nieuw bent met Javascript; installeer de developer tools in IE8 of Firebug in Firefox, dan kun je 'live' in je browser gewoon Javascript laten runnen en krijg je ook meteen te zien wat wel en wat niet kan.

[_Thanatos_]

Leftblank schreef op donderdag 09 juli 2009 @ 20:31:
Ook een tip wanneer je nog relatief nieuw bent met Javascript; installeer de developer tools in IE8 of Firebug in Firefox, dan kun je 'live' in je browser gewoon Javascript laten runnen en krijg je ook meteen te zien wat wel en wat niet kan.

Maar voor wat wel en niet netjes is, zijn er tutorials. Van een debugger leer je de taal nml niet. Daar kun je alleen ontzettend goed van leren prutsen als je net begint, en dat moet je echt voorkomen

[StephanVierkant]

Mijn dank allemaal voor de reacties! Ik ben een stuk verder gekomen. Mijn javascript-kennis is toch de bottleneck voor mijn ajax-skills.

Ik loop nu tegen een ander probleem aan. Ik wil nu graag het totaalbedrag van beide producten realtime uitrekenen. Via Google heb ik niets kunnen vinden, en via wat php-sites kreeg ik ook geen antwoord.

Uiteraard is het niet bedoeld als script-request, maar wie kan mij aan een voorbeeld/tutorial helpen?

[RobIII]

Stephan4kant schreef op maandag 13 juli 2009 @ 15:51:
Uiteraard is het niet bedoeld als script-request, maar wie kan mij aan een voorbeeld/tutorial helpen?

Again: Wat heb je (lees: relevante(!) code graag), wat werkt er niet, waarom denk je dat 't niet werkt etc. etc. etc. Het optellen van 2 variabelen is toch zeker geen rocket science? Dus: waar knelt het dan wel?

[ Voor 3% gewijzigd door RobIII op 13-07-2009 15:55 ]

[StephanVierkant]

RobIII schreef op maandag 13 juli 2009 @ 15:54:
[...]

Again: Wat heb je (lees: relevante(!) code graag), wat werkt er niet, waarom denk je dat 't niet werkt etc. etc. etc. Het optellen van 2 variabelen is toch zeker geen rocket science? Dus: waar knelt het dan wel?

Het probleem is dat ik niet echt relevant code heb . Ik weet niet hoe ik dit moet aanpakken.

In PHP weet ik dat je zoiets als array_sum($prijs); kunt doen, maar hoe werkt dit in JS? Het probleem is daarbij vooral dat de waarden afhankelijk zijn wat de user doet.

[RobIII]

Je post toch gewoon via AJAX die aantallen? En je hebt de prijzen van de producten? Dan is het toch gewoon:

code:

totaal = 0
for each product in cart
  totaal += aantal * product->prijs
next
echo totaal

En als je het niet middels AJAX doet kun je client-side met JS natuurlijk net-zo die prijzen berekenen.

[ Voor 27% gewijzigd door RobIII op 13-07-2009 16:09 ]

[MueR]

Je wil je berekeningen niet laten doen door javascript. Daar is je PHP/ASP/WhatEver backend voor. Dus ik zie niet in waarom je een probleem zou hebben met het berekenen van een prijs in PHP. Tenzij je, net als met javascript, weinig kaas gegeten hebt van PHP.

[RobIII]

MueR schreef op maandag 13 juli 2009 @ 16:11:
Je wil je berekeningen niet laten doen door javascript.

Mwa, dat moet je nuanceren. Voor een snelle indicatie van 't totaalbedrag voor de gebruiker kan het prima client-side zonder moeilijk te doen met AJAX enzo. Maar je moet er natuurlijk niet blind van uit gaan en die bedragen overnemen op je facturen nee

[StephanVierkant]

MueR schreef op maandag 13 juli 2009 @ 16:11:
Je wil je berekeningen niet laten doen door javascript. Daar is je PHP/ASP/WhatEver backend voor. Dus ik zie niet in waarom je een probleem zou hebben met het berekenen van een prijs in PHP. Tenzij je, net als met javascript, weinig kaas gegeten hebt van PHP.

Het gaat erom dat ik kwantumkorting wil gaan toepassen, waardoor ik de prijs per artikel door php wil laten berekenen.

De totaalprijs kan wat mij betreft gewoon met JS, zonder Ajax o.i.d. Uiteraard bereken ik de uiteindelijke prijs alsnog met php voordat 'ie op de factuur komt.

[ Voor 7% gewijzigd door StephanVierkant op 13-07-2009 16:16 ]

[RobIII]

Ik kan je alleen maar adviseren gewoon eens te beginnen en te kijken waar je tegen aan loopt; je zegt wel dat 't geen scriptrequest is maar zo komt het nu wel behoorlijk over. Verdiep je gewoon in de materie en begin gewoon. Als je ergens tegen aan loopt zien we graag concrete vragen en code waar we een degelijk antwoord op kunnen geven

[StephanVierkant]

Het probleem is dat het script slechts dat ene product bekijkt waar de aanvraag voor wordt gedaan. Het script moet dus de waarden uit die velden oppikken. Ik zat zelf aan zoiets te denken:

JavaScript:

function ajaxFunction(product, aantal)
{
    //knip
    
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState==4)
        {
            document.getElementById("prijs_" + product).innerHTML = xmlhttp.responseText;

            //totaalprijs
            document.getElementById("prijs_" + product).innerHTML = sum(prijs);
        }
    }

[RobIII]

Stephan4kant schreef op maandag 13 juli 2009 @ 16:27:

JavaScript:

document.getElementById("prijs_" + product).innerHTML = sum(prijs);

Waar haal je het idee vandaan van 't bestaan van een sum() functie in JS? En waarom return je niet gewoon het totaal vanuit PHP als je toch een AJAX request doet?

Again: verdiep je nou gewoon eens in de materie; je hebt, klaarblijkelijk, geen benul van waar je mee bezig bent. Hoe verwacht je dan dat wij je kunnen helpen zonder dat we je topic als scriptrequest mogen beschouwen?

[ Voor 8% gewijzigd door RobIII op 13-07-2009 16:30 ]

[MueR]

RobIII schreef op maandag 13 juli 2009 @ 16:13:
[...]

Mwa, dat moet je nuanceren. Voor een snelle indicatie van 't totaalbedrag voor de gebruiker kan het prima client-side zonder moeilijk te doen met AJAX enzo. Maar je moet er natuurlijk niet blind van uit gaan en die bedragen overnemen op je facturen nee

Dat zeg ik

[Castor385]

In plaats van:

//totaalprijs
document.getElementById("prijs_" + product).innerHTML = sum(prijs);


Doe je iets als:

herberekenTotaal();

En dan maak je een functie:

function herberekenTotaal() {
totaal = 0;
loopje over alle subtotaalvelden {
totaal += subtotaal;
}
totaalveldophetscherm.value = totaal;
}

[Verwijderd]

als je i.p.v.
document.myForm.prijs + product .value=xmlhttp.responseText

dit doet
eval("document.myForm.prijs" + product + ".value=xmlhttp.responseText");

Doet ie het al beter denk. Alleen eval() is nooit de juiste oplossing, zodra je het nodig denkt te hebben doe je al het een en ander wat fout qua ontwerp van je code.