Div Laden beim Absenden (Ajax, JQuery)

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

  • 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 Source Code

    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 Source Code

    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. });
    Display All

    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 Source Code

    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>
    17. </head>
    18. <body>
    19. <form id="contactForm" action="" method="POST">
    20. <div class="row">
    21. <div class="form-group">
    22. <div class="col-md-6">
    23. <label>s <strong>*</strong></label>
    24. <input type="text" maxlength="100" class="form-control" name="userid" id="userid" required >
    25. </div>
    26. </div>
    27. </div>
    28. </form>
    29. <script src="theme/style/jquery/jquery.js"></script>
    30. </body>
    31. </html>
    Display All
    die user.php hat zu Testzwecken den Inhalt echo 'true'
  • Okay, dann binde doch jQuery ein, bevor du jQuery-Funktionen benutzt.

    HTML Source Code

    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>
    Display All