jQuery formulier submitten

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • WHMCSAddons

    Vanwege een vraag over jQuery op ictscripters heb ik besloten een klein maar bescheiden stukje blog te schrijven over het submitten van een formulier via jQuery.
    Hou er rekening mee dat dit slechts een heel simpel voorbeeld is, je kan dit namelijk op verschillende manieren doen, voorbeeld: post, get, ajax enz.

    HTML Code:
    Hier gaan we een voorbeeld opmaken voor de html code, dit is vrijwel de basis voor iedere beginnende programmeur.

    HTML Source Code

    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>jQuery formulier submit</title>
    6. </head>
    8. <body>
    9. <!-- Hieronder komt het bericht wanneer dit succesvol is -->
    10. <div id="message" style="display:none"></div>
    12. <!-- Formulier wat we gaan versturen -->
    13. <form id="myForm" method="post" action="">
    14. <label for="website">
    15. <input type="text" name="website" id="website">
    16. </label>
    17. <label for="dropdown">
    18. <select name="dropdown" id="dropdown">
    19. <option value="1">Option 1</option>
    20. <option value="2">Option 2</option>
    21. <option value="3">Option 3</option>
    22. </select>
    23. </label>
    24. <input type="submit" name="submit" value="Verstuur">
    25. </form>
    26. </body>
    27. </html>
    Display All


    jQuery Code:
    Om jQuery uit te kunnen voeren hebben we de library hiervan nodig.
    Zelf gebruik ik vaak de eigen download, dit voorkomt onder andere laad tijd.
    Je kan de jQuery library hier downloaden, of via Google de CDN gebruiken, die vind je hier.

    Ik zal niet veel uitleggen over het starten van een jQuery stuk, dit begrijpt iedereen ga ik hiervan uit.
    Mocht je hier niet uitkomen raad ik je aan deze documentatie door te lezen zodat het wat duidelijker wordt.

    JavaScript Source Code

    1. $(document).ready(function() {
    2. $('#myForm').submit(function(e) {
    3. e.preventDefault();
    4. $.ajax({
    5. type: "POST",
    6. url: "http://www.domeinnaam.nl/php-bestand.php",
    7. data: $('#myForm').serialize(),
    8. success: function(data) {
    9. $('#message').html(data);
    10. $('#myForm')[0].reset();
    11. }
    12. });
    13. });
    14. });
    Display All


    Regel 2:
    Hier controleren wij of het formulier een submit heeft ontvangen van de bezoeker.

    Regel 3:
    Een betere uitleg hierover is op deze pagina te vinden, kan dit zelf niet uitleggen.

    Regel 6:
    Is de URL waar het PHP bestand staat, jQuery zal verbinding maken met dit PHP bestand.

    Regel 7:
    Het PHP bestand gaat alle gegevens ontvangen, deze gegevens worden verstuurd via de "data" parameter.

    Regel 9:
    Dit zal de id="message" opvullen met de terug gestuurde waarde, je kan hiervoor de echo functie van PHP gebruiken.

    Regel 10:
    Persoonlijk gebruik ik dit om het formulier te resetten naar zijn standaard waarde, aangeraden is om een Captcha hiernaast te gebruiken.


    Slotwoord:
    Mochten er nog vragen zijn beantwoord ik deze graag in een reply, andere leden zijn natuurlijk ook welkom om feedback te geven of eventuele verbeteringen.

    1,826 times read

Comments 8

  • FangorN -

    Dit gaat trouwens over AJAX-calls op *hetzelfde* domein. Dit vanwege de same-origin policy. Als je cross-domain AJAX requests gaat doen dan moet dit middels JSONP (in te vullen in de dataType-parameter) en heeft vaak nog wat meer voeten in de aarde (soms moet je volgens mij aan de remote site aangeven welke lokale callback-functie deze aan zou moeten roepen).

  • Dees -

    Ik heb gebruik zelf een plugin die in een regel al de jQuery uitvoert om een heel formulieren te submitten. malsup.com/jquery/form/

  • Frenzo.Brouwer -

    Vraag over regel 6:
    Hoe ziet dat php bestand er dan als volgt uit.

    • K.Rens -

      Dit kan gewoon standaard een basis php bestand zijn dat de gegevens van de velden in je formulier interpreteert.

      Bv:
      je hebt een input veld genaamd "naam", dan kun je de gegevens zo laten outputten:
      <?php
      echo htmlspecialchars(addslashes($_POST['naam'])); ?>

    • FangorN -

      Dit hangt van het type respons af. Dit zou je aan moeten geven door middel van een Content-Type header(). Wat hierbij ook enorm belangrijk is dat je deze voorziet van een character encoding. Met deze character encoding moet ook rekening gehouden worden bij gebruikmaking van bepaalde functies (zoals htmlspecialchars, zoals K.Rens hier boven (niet) doet).

  • K.Rens -

    Altijd goed om even op te frissen in mijn geheugen. Zeer helder en duidelijk artikel, bedankt!

  • M.Martens -

    Duidelijk uitgelegd en zeker zinvol om te lezen. Het duimpje omhoog is in deze zeker verdient.

  • Reza -

    Alles is mooi geschreven, duidelijk uitgelegd en een goede opmaak.