Form submit redirecting to page instead of loading its contents via AJAX

Question

I have jQuery code that should load the contents of 'submittest.php' into the p#formMessage element.

When the user clicks submit they are redirected to submittest.php and what they entered as username is printed which is not the desired result as the username should be outputted below the form and the user should never be redirected to submittest.php

I have tried a few things, like using classes instead of ids, which did not work. I have tried adding quotation marks in almost every possible permutation. I have directly copied code from online and only changed variable names. I am very confused about what the problem is.

$(document).ready(function() {
  $("form").submit(function(event) {
    event.preventDefault();
    var name = $("#username").val();
    var email = $("#password").val();
    var message = $("#passwordConfirm").val();
    var submit = $("#adminSubmit").val();

    $("#formMessage").load("submittest.php", {
      name: name,
      email: email,
      message: message,
      submit: submit
    });
  });
});

<script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>

<form action="submittest.php" method="post">
  <label for="username"> enter your new username: </label><br>
  <input type="text" id="username" name="username"><br>

  <label for="password">enter your new password:</label><br>
  <input type="text" id="password" name="password"><br>

  <label for="passwordConfirm"> confirm your password: </label><br>
  <input type="text" id="passwordConfirm" name="passwordConfirm"><br>

  <input type="submit" class="adminSubmit" name="adminSubmit" value="Create your account">

  <p id="formMessage"></p>
</form>

submittest.php just looks like this:

<?php echo $_POST["username"] ?>

edit 2: i changed the way i get jquery by CDN, which DOES go before the other code, and the code goes before the form, and all console errors have gone but i still get the problem that unwanted redirection happens even with updated code

Check for errors in the console caused by other parts of your code. The form should not be being submit as you call `preventDefault()` — Rory McCrossan, Dec 20 '22 at 11:23
Debug your form submit handler. Change `$("form").submit(function(event) {` to `$("form").submit(function(event) { console.log("submit"); debugger; return false; ` - this should a) disable the form submit (and your post) and b) put a line in the console (press F12) and c) break into the debugger in the browser (F12 in the browser). If this doesn't happen then your form submit handler is not firing. Maybe you have some other error such as jquery not loading. Are there any errors in the console? — freedomn-m, Dec 20 '22 at 11:23
@mplungjan doesn't sound like it's getting that far as it's doing the classic submit form instead of ajax issue. — freedomn-m, Dec 20 '22 at 11:31
That would have been prevented on the preventDefault since it is in the top of the function — mplungjan, Dec 20 '22 at 11:34
@mplungjan looks that way, unless the event is not firing at all. Unclear what OPs issue is exactly. load not posting *will* be an issue though, ofc. — freedomn-m, Dec 20 '22 at 11:35
yes there is an error in the console, i've updated my question. — Nathan Guthrie, Dec 20 '22 at 11:48
i now no longer have any console errors, but my code still has the same undesirable output — Nathan Guthrie, Dec 20 '22 at 12:59

mplungjan · Answer 1 · 2022-12-20T11:55:07.443

If you have an error with $ not defined, make sure you have

<script src="https://code.jquery.com/jquery-3.6.2.min.js"></script>

defined before running any jQuery. If you have downloaded jQuery and have <script src="myfolder/jquery.js"></script>, then look in the network tab to see if it is found where the browser expects it to be.

The next issues are

.load is not posting.

Also you are not sending username

Possibly you have more than one form tag on the page?

Try this instead:

$(function() {
  $("form").on("submit", function(event) {
    event.preventDefault();
    var username = $("#username").val();
    var email = $("#password").val();
    var message = $("#passwordConfirm").val();
    var submit = $("#adminSubmit").val();

    $.post("submittest.php", {
      username: username,
      email: email,
      message: message,
      submit: submit
    }, function(data) {
      $("#formMessage").text(data);
    });
  });
});

there is only one form on the page, but i am getting an error in the console before and after updating my code, which i have updated my question with, thanks for your help though — Nathan Guthrie, Dec 20 '22 at 11:50

Form submit redirecting to page instead of loading its contents via AJAX

1 Answers1