vanuit JavaScript functie PHP aanroepen?

[fleeuwen]

Mijn vraag is, hoe kan ik 1 record in een tabel toevoegen door de onclick functie te gebruiken. Want ISSET in combinatie met $_POST of $_GET lijkt niet te werken omdat er blijkbaar iets ingevuld moet zijn. En met onclick gebruik vul je niets in.

Dus dacht ik een JavaScript functie te maken. (Deze noem ik Function_check_administratie)
Maar hoe ik daarvandaan 1 record kan aanmaken is me ook niet duidelijk.

Het lijkt er op dat ik vanuit mijn JavaScript functie een stukje PHP moet draaien. Maar ook dat werkt nog niet bij mij. Wie heeft hier een tip voor mij?

Ik heb met PHP regels gegenereerd naar een HTML pagina Die zien er zo uit:

<tr class='normaaal_tabel'><td align='right' valign='middle'>
<img
src = no-check-mark-512x512.png
alt = 'Afvinken'
name = 'check_id_product'
align = 'left'
class = 'check_administratie'
onclick = 'Function_check_administratie(1617)'
>
1</td>

Door op een afbeelding te klikken wil ik dat er een record in een tabel wordt toegevoegd. De SQL-code die ik daarvoor nodig heb is:

INSERT INTO prstshp_collect_products ( id_product, collected ) VALUES ("<idproduct>", 1 );
Hierbij is <idproduct> een variabel nummer dat in dit voorbeeld 1617 zou moeten zijn.

[Belindo]

Met javascript een ajax call doen die een php uitvoert met daarin je code om de database te updaten

[fleeuwen]

Bedankt voor de snelle reactie Belindo.
Ik was er al bang voor. Ik heb nog geen ervaring met ajax.
Is er een goede site om dit onder de knie te krijgen?

Ik wil eerst een record toevoegen. Maar later moet ik inderdaad ook gaan kijken of dat het record al bestaat en als het bestaat, dan moet de 1 (uit mijn voorbeeld) een 0 worden, of omgekeerd. maar daar kom ik wel uit als ik eenmaal weet hoe ik via ajax kan praten met mijn SQL database.

[AW_Bos]

Kijk hier eens:
https://www.w3schools.com/js/js_ajax_intro.asp

Voor het gemak kan je ook de jQuery-bibliotheek gebruiken die ook ondersteuning biedt voor AJAX.

Als je een PHP-script kan maken die heel simpel iets kan controleren, dan is script in AJAX ook eenvoudig te realiseren. Het is gewoon een techniek in JavaScript, en geen programmeertaal. Tevens is het een middel en geen doel.

En een goede tip van AW_Bos: Gebruik de developer-tab in je browser. Dan kan je precies zien wat je AJAX-call precies doet.

[ Voor 45% gewijzigd door AW_Bos op 04-03-2023 22:16 ]

[CodeCaster]

Of je zet de afbeelding in een input of button die je form submit.

https://stackoverflow.com...age-into-a-button-in-html

[ Voor 48% gewijzigd door CodeCaster op 04-03-2023 22:24 ]

[fleeuwen]

Wat fijn om zo snel geholpen te worden. Ook AW_Bos, heel erg bedankt.
Ik ga er mee aan de slag. Ik laat het weten als het is gelukt.

[CodeCaster]

AW_Bos schreef op zaterdag 4 maart 2023 @ 22:12:
Kijk hier eens:
https://www.w3schools.com/js/js_ajax_intro.asp

Voor het gemak kan je ook de jQuery-bibliotheek gebruiken die ook ondersteuning biedt voor AJAX.

Ik zou W3Schools, jQuery en Ajax niet aanraden anno nu.

Gewoon fetch() en MDN/Stack Overflow, IE11 hoeft niet meer ondersteund te worden.

Ik bedoel, het kost twee klikken om dergelijke claims te vinden:

GET is simpler and faster than POST, and can be used in most cases.
[...]
Sending user input (which can contain unknown characters), POST is more robust and secure than GET.

W3Schools verkondigt al ruim twintig jaar absolute bagger.

[ Voor 33% gewijzigd door CodeCaster op 04-03-2023 22:30 ]

[fleeuwen]

CodeCaster schreef op zaterdag 4 maart 2023 @ 22:21:
Of je zet de afbeelding in een input of button die je form submit.

https://stackoverflow.com...age-into-a-button-in-html

CodeCaster, Dit klinkt voor mij als een beter oplossing Bedankt hiervoor.
Maar ik heb daar nog niet een goed beeld bij. Als ik het goed begrijp roep ik dan vanuit BUTTON de PHP-code op en het werkt?

Kan ik dan gewoon deze code gebruiken?

if ( isset( $_post['check_id_product']))
{
$idproduct = $_post['check_id_product'];
$query3 = "INSERT INTO prstshp_collect_products ( id_product, collected ) VALUES ($idproduct, 1 );";
mysqli_query($con, $query3);
header("Location: " . $_SERVER['PHP_SELF']);
exit();
}

Of heb je een hint?

[8088]

Als het zonder de pagina te herladen moet, kijk dan in plaats van AJAX eens naar de modernere fetch API. Tutorials in overvloed: https://www.startpage.com...script%20fetch%20tutorial

[CodeCaster]

fleeuwen schreef op zaterdag 4 maart 2023 @ 22:33:
[...]


CodeCaster, Dit klinkt voor mij als een beter oplossing Bedankt hiervoor.
Maar ik heb daar nog niet een goed beeld bij. Als ik het goed begrijp roep ik dan vanuit BUTTON de PHP-code op en het werkt?

Kan ik dan gewoon deze code gebruiken?

if ( isset( $_post['check_id_product']))
{
$idproduct = $_post['check_id_product'];
$query3 = "INSERT INTO prstshp_collect_products ( id_product, collected ) VALUES ($idproduct, 1 );";
mysqli_query($con, $query3);
header("Location: " . $_SERVER['PHP_SELF']);
exit();
}

Of heb je een hint?

Geef elke regel in je tabel z'n eigen form, en laat dat plaatje het submitten.

Over je PHP-code: gebruik geparameteriseerde queries en lees over SQL injection.

[fleeuwen]

Nee, ik denk wel dat de pagina herladen moet worden, want afhankelijk van de mutatie die ik doe, moet ook de afbeelding aangepast worden.

[8088]

fleeuwen schreef op zaterdag 4 maart 2023 @ 22:37:
Nee, ik denk wel dat de pagina herladen moet worden, want afhankelijk van de mutatie die ik doe, moet ook de afbeelding aangepast worden.

Een afbeelding aanpassen/vervangen kan ook met javascript zonder de pagina te herladen. Maar misschien is het goed om eerst de basis te bouwen met gebruikmaking van een formulier en het herladen van de pagina, en daarna eventueel uit te breiden met javascript.

[PhilipsFan]

Met een AJAX call roep je gewoon een 'web'pagina aan op je server. Daarin kan php-code worden uitgevoerd. Die webpagina kan dan afhankelijk van de uitkomst van de code, een tekst teruggeven. Bijvoorbeeld 'OK' als het gelukt is, en 'OEPS' als het niet gelukt is. In je javascript kun je vervolgens, afhankelijk van die tekst, met een if statement het juiste plaatje laden door de src-property van het image te veranderen.

[AW_Bos]

CodeCaster schreef op zaterdag 4 maart 2023 @ 22:22:

W3Schools verkondigt al ruim twintig jaar absolute bagger.

Vroeger was het bagger, maar tegenwoordig valt het wel mee, vind ik. Ik geef toe: Het is wel erg basic. Dus als je meer over een bepaalde functie wilt weten, dan moet je zelf maar even verder inlezen.

[ Voor 6% gewijzigd door AW_Bos op 04-03-2023 22:54 ]

[fleeuwen]

INPUT had ik eerder al geprobeerd, maar nu heb ik het met BUTTON gedaan, en nu lukt het wel.

Allemaal heel erg bedankt voor het meedenken.