Div Laden beim Absenden (Ajax, JQuery)

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Div Laden beim Absenden (Ajax, JQuery)

    Hallo,

    ich habe die Forensuche bemüht aber leider ist alles was ich finden konnte nicht mehr Zeitgemäß, läuft ohne JQuery oder die Artikel sind nicht mehr verfügbar (Lexikon).
    Daher hoffe ich man kann mir hier helfen.

    Ich möchte beim Absenden eines Formular das die Ausgabe in einem DIV geschieht, ohne Seitenreload.
    Formular und PHP Script sind bereits fertig. Im Grunde soll er beim Abenden die User ID an user.php?id=1 schicken und das Ergebnis in einem DIV ausgeben lassen.

    Leider bekomme ich das nicht so ganz hin.

    HTML-Quellcode

    1. <form id="contactForm" action="" method="POST">
    2. <div class="row">
    3. <div class="form-group">
    4. <div class="col-md-6">
    5. <label>{$LANG.USER_ID} <strong>*</strong></label>
    6. <input type="text" maxlength="100" class="form-control" name="userid" id="userid" required >
    7. </div>
    8. </div>
    9. </div>
    10. </form>

  • Dazu benutzt die Ajax-Funktion von jQuery und musst halt den Submit abfangen:

    JavaScript-Quellcode

    1. $("#contactForm").submit(function(e) {
    2. $.ajax({
    3. type: "GET",
    4. url: "user.php",
    5. data: $("#contactForm").serialize(),
    6. success: function(data) {
    7. $("#IdDesDivs").html(data);
    8. }
    9. });
    10. e.preventDefault();
    11. });
    Alles anzeigen

    Ich vermute, dass der GET-Parameter von user.php?id=1 bereits die User-Id ist? Dann solltest du den Namen des Input-Felds auf "id" ändern.

  • Hi.

    Dies hab eich versucht aber leider läd er die ganze Seite neu.
    Nein, die id an der URL ist ein anderer Parameter.


    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <script type="application/javascript">
    5. $("#contactForm").submit(function(e) {
    6. $.ajax({
    7. type: "GET",
    8. url: "user.php",
    9. data: $("#contactForm").serialize(),
    10. success: function(data) {
    11. $("#IdDesDivs").html(data);
    12. }
    13. });
    14. e.preventDefault();
    15. });
    16. </script>
    18. </head>
    20. <body>
    21. <form id="contactForm" action="" method="POST">
    22. <div class="row">
    23. <div class="form-group">
    24. <div class="col-md-6">
    25. <label>s <strong>*</strong></label>
    26. <input type="text" maxlength="100" class="form-control" name="userid" id="userid" required >
    27. </div>
    28. </div>
    29. </div>
    30. </form>
    31. <script src="theme/style/jquery/jquery.js"></script>
    32. </body>
    33. </html>
    Alles anzeigen
    die user.php hat zu Testzwecken den Inhalt echo 'true'

  • Okay, dann binde doch jQuery ein, bevor du jQuery-Funktionen benutzt.

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    3. <meta charset="UTF-8">
    4. <head>
    5. </head>
    6. <body>
    7. <form id="contactForm" action="user.php?id=1" method="POST">
    8. <div class="row">
    9. <div class="form-group">
    10. <div class="col-md-6">
    11. <label>s <strong>*</strong></label>
    12. <input type="text" maxlength="100" class="form-control" name="userid" id="userid" required >
    13. </div>
    14. </div>
    15. </div>
    16. </form>
    17. <script src="theme/style/jquery/jquery.js"></script>
    18. <script type="text/javascript">
    19. $("#contactForm").submit(function(e) {
    20. $.ajax({
    21. type: "POST",
    22. url: "user.php?id=1",
    23. data: $("#contactForm").serialize(),
    24. success: function(data) {
    25. $("#IdDesDivs").html(data);
    26. }
    27. });
    28. e.preventDefault();
    29. });
    30. </script>
    31. </body>
    32. </html>
    Alles anzeigen