[JavaScript/SQL] query uitvoeren met OnClick

[Flying35]

Hallo Tweakers,

Ik heb een tabel gemaakt met hier enkele gegevens in. met daarachter een knopje om de aantallen te veranderen. Als je op deze knop drukt zou er een update query uitgevoerd moeten worden op de database. Het werkt nu met een apart php bestandje waarin ik dit doe, maar ik wil het graag direct de javascript functie hebben zonder over te moeten schakelen naar een apart php bestand.

De twee codes zien er nu als volgt uit.


_{while (list($id,$naam,$voorraad,$bestelgrootte,$doelvoorraad,$prijs,$aantal) = mysql_fetch_row($res))
$inkvm .= "<tr><td>".$id.
"</td><td>".$naam.
"</td><td>".$voorraad.
"</td><td>".$bestelgrootte.
"</td><td>".$doelvoorraad.
"</td><td>".$prijs.
"</td><td>
<input type='text' value='".$aantal."' id='".$id."' size='2' disabled=disabled/>
</td><td>
<img src='style/edit-button.png' title='Aanpassen' OnClick=\"document.getElementById('$id').disabled=false;\"/>
<img src='style/save.png' title='Wijziging opslaan' OnClick=ajGet('ivsm-wijzigen.php?id=$id&aantal='+document.getElementById('$id').value); document.getElementById('$id').disabled=true; name='".$id."'; />
<!-- <img src='style/save.png' title='Wijziging opslaan' OnClick=\"ajGet('ivsm-wijzigen.php'); document.getElementById('$id').disabled=true;\" name='".$id."'/> -->
<img src='style/delete.png' title='Verwijderen' OnClick=\"document.getElementById('$id').disabled=false;\"/>
</td></tr>";}


waarin dit het gedeelte is waarover ik het heb:

_{OnClick=ajGet('ivsm-wijzigen.php?id=$id&aantal='+document.getElementById('$id').value);}


en het php bestand:

<sub><?php
$nid = $_GET["id"];
$naantal = $_GET["aantal"];

$wijzig ="UPDATE care_medicijnen SET aantal=$naantal WHERE $nid=id";
if(isset($_GET["id"])) {
mysql_query($wijzig);
}
?></sub>


Ik dacht aan iets zoals dit (maar het werkt niet):
_{OnClick="UPDATE care_medicijnen SET aantal=$aantal WHERE $id=id";}

Ik weet dat het een beetje onoverzichtelijk is maar als iemand het toch begrijpt en mij hier verder in kan helpen zou ik het zeer waarderen.

alvast bedankt

[zwittrooper]

Kan helaas niet, JavaScript is alleen cliënt-side, en draait dus niet aan de kant van de server. Om dit te kunnen doen moet je JavaScript gebruiken in combinatie met een server-side framework/taal.

[Flying35]

Oke bedankt zwittrooper voor de snelle reactie. Dan zal ik het toch moeten proberen met een apart php script

[OkkE]

Met AJAX kan je via Javascript toch een php-bestand laden zonder dat de pagina ververst. Het is (ik vind) trouwens altijd beter om wijzigingen via POST methode te doen ipv GET.

[NMe]

Het zou nogal een beveiligingsissue zijn als je vanuit javascript zomaar even een query zou kunnen doen. Wat let mij om met FireBug in je script te rommelen en zo troep in je database te zetten of je database te verwijderen met een DROP? (Dat laatste alleen als je rechten brak staan ingesteld natuurlijk.)

Code post je trouwens met de code-tag, niet met de small-tag. Dan is het ook niet, zoals je zelf zegt, onoverzichtelijk. Pas je het zelf even aan?

[com2,1ghz]

OkkE schreef op woensdag 30 november 2011 @ 11:40:
Met AJAX kan je via Javascript toch een php-bestand laden zonder dat de pagina ververst. Het is (ik vind) trouwens altijd beter om wijzigingen via POST methode te doen ipv GET.

Dan moet je ook vertellen waarom.

GET method is handig als je parameters in de URL wilt meegeven.
Dus dan krijg je zoiets:
http://test.nl/?naam=piet&werk=webdeveloper

Deze parameters gaan nooit verloren tezij je de url aapast.

POST method gaan de requests meteen naar de server en zijn dus niet zichtbaar voor de client. Het probleem hierbij is dat de waarden verloren gaan wanneer je terug naar dezelfde pagina gaat waar die POST waarden nodig zijn.
Bij inlogformulieren wordt een wachtwoord altijd met een POST verstuurd. Wanneer je de pagina ververst zal je een melding krijgen dat er een POST is uitgevoerd en wordt er gevraagd of je die waarden nogmaals wilt versturen(de browser heeft het dus ergens opgeslagen)

Je zou dus zelf moeten nadenken waarvoor je kiest. Het is niet zo dat een POST beter is. Soms is een GET handiger maar dat is allemaal afhankelijk van de situatie.
^{Zolang je maar geen wachtwoorden verstuurd met GET}

[Flying35]

Oke bedankt voor de informatie, ik weet alleen nog niet hoe ik dit moet doen. Het php bestand werkt namelijk ook nog niet helemaal naar behoren. Als ik het alleen oproep doet hij het goed maar wanneer ik hem via de onclick event aanroep dan krijgt de variable 'aantal' ?undefined ('8?undefined') achter het nummer wat ik het ingevoerd.

[OkkE]

com2,1ghz schreef op woensdag 30 november 2011 @ 12:09:
[...]

Je zou dus zelf moeten nadenken waarvoor je kiest. Het is niet zo dat een POST beter is. Soms is een GET handiger maar dat is allemaal afhankelijk van de situatie.

Wijzigingen (permanent, in je back-end) doe je met POST, onder andere zodat wanneer een link doorgestuurd, geindexeerd of in favorieten gezet wordt, de bewerking niet zomaar nog een keer uitgevoerd wordt.

[NMe]

Wachtwoorden versturen via POST is echt niet veiliger dan via GET. Nee, je ziet bij een POST je wachtwoord niet in de URL, maar je ziet het wél gewoon plain text in de request staan. SSL is wat je request veiliger maakt, niet het feit dat je POST gebruikt.

POST gebruik je over het algemeen voor formulieren, en dan met name bij formulieren waarvan je wilt dat ze niet per ongeluk uitgevoerd worden. Mutaties in de database wil je nóóit via GET laten lopen.

Flying35 schreef op woensdag 30 november 2011 @ 12:25:
Oke bedankt voor de informatie, ik weet alleen nog niet hoe ik dit moet doen. Het php bestand werkt namelijk ook nog niet helemaal naar behoren. Als ik het alleen oproep doet hij het goed maar wanneer ik hem via de onclick event aanroep dan krijgt de variable 'aantal' ?undefined ('8?undefined') achter het nummer wat ik het ingevoerd.

Daar wil ik best mee helpen maar niet voordat je je code leesbaar gemaakt hebt met code-tags. Ik ga me niet blind staren.

edit:
Hint: ID's mogen in HTML niet volledig numeriek zijn volgens de spec, er gelden zo'n beetje dezelfde naamgevingsrestricties als voor variabelen in PHP of javascript. Je getElementById kan daar niet mee overweg vermoed ik.

[ Voor 48% gewijzigd door NMe op 30-11-2011 12:31 ]

[Flying35]

Oke ik heb nu alle overbodige informatie weggehaald en enkel de code laten staan die van belang is hierdoor is het makkelijker om te zien hoe het nou in zijn werk gaat.

Eerst heb ik een invoerveld die een variable value en id krijgt.

PHP:

<input type='text' value='".$aantal."' id='".$id."'/>

Als ik de variable aangepast heb en op de knop aanpassen klik roept deze een OnClick event op welke weer het php bestand aanroept met daarin de query. dat gebeurt zo.

PHP:

<img src='style/save.png' OnClick=ajGet('ivsm-wijzigen.php?id=$id&aantal='+document.getElementById('$id').value); name='".$id."'; />

Dit is dan het php bestand wat geladen wordt.

PHP:

<?php
$id = $_GET["id"];
$aantal = $_GET["aantal"];

$wijzig ="UPDATE care_medicijnen SET aantal=$aantal WHERE id='$id'";
if(isset($_GET["id"])) { 
echo " is gezet $id - $aantal";
mysql_query($wijzig); 
}
?>

De echo laat vervolgens dit zien: "is gezet 4160962 - 8?undefined"

Hopelijk is het zo duidelijk

Alvast bedankt voor het kijken naar de code.

[NMe]

Nogmaals, gebruik [code]- of [code=taal]-tags als je code post. Dit is niet alleen onleesbaar klein maar ook gewoonweg onleesbaar.

[ Voor 38% gewijzigd door NMe op 30-11-2011 12:54 ]

[Flying35]

zo aangepast

[OkkE]

Nog wat punten...

- Een ID in html mag niet alleen een getal zijn
- Gebruik POST ipv GET
- Zoek even op SQL-injection
- Gebruik een algemene functie waar je het ID aan meegeeft, die steeds de value van de input ophaalt en de php-file opend.

[Joolee]

Flying35 schreef op woensdag 30 november 2011 @ 12:47:

PHP:

<img src='style/save.png' OnClick=ajGet('ivsm-wijzigen.php?id=$id&aantal='+document.getElementById('$id').value); name='".$id."'; />

Zoals je ziet heb je hier een syntax foutje in je Javascript zitten.
Je moet HTML attribuut waarden wel tussen " en " zetten. Niet tussen ' en ' en ook niet volledig weglaten dus.

[ Voor 14% gewijzigd door Joolee op 30-11-2011 13:09 ]

[Flying35]

Het is me nu gelukt als ik ajGet vervang door window.open. dan werkt hij goed.

code:

OnClick=\"window.open('ivsm-wijzigen.php?id=$id&aantal='+document.getElementById('$id').value)\";

[NMe]

Dan doe je geen AJAX-request meer though?

[Flying35]

ja dat klopt maar nu werkt het, het is alleen jammer dat ik ervoor een aparte tab voor moet openen en dat hij niet werkt door op dezelfde pagina te blijven.