Jquery Ajax Post Alert is Noth Showing the Returned Data, it is showing the current page source

Question

I am not getting the expected result when trying to post a form using ajax.

I have a simple form. I also have a jquery script to submit the form so I can try to pre-validate a captcha text box before submitting the form. I know this is something simple, but it's driving me nuts.

What is supposed to do is post to a php page to validate the captcha and other information. Currently for testing, I have my php page just simply output "Test Return Data" then the jquery is supposed to do a simple alert message.

Unfortunately, the return I am getting appears to be the html from the current page not the text being returned.

I do not know if it makes a difference, but I am trying to post to a different page for validation other than what the post in the form says.
If it was working correctly (the way I am trying to get it to work), I would get an alert that says "Test Return Data". My best guess is that I have some kind of syntax error that I am not seeing, or I am going about everything wrong.

I am using jquery-3.7.1.min.js.

What is even more frustrating is that it works on my machine (localhost) in both Edge and Duck-Duck_Go browsers, but not from the server (hosted at HostGator).

Here is a simplified version of the form:

    <form id="LogInForm" name="LogInForm" method="post" action="DoLogin.php" title="Log in to access members only features">

    <label for="UName" id="UNameLbl" class="bregLbl">Email Address</label>
    <input type="text" id="UName" name="UName" />
    
    <label for="PWord" id="PWordLbl" class="bregLbl">Password</label>
    <input type="password" id="PWord" name="PWord" />

    <label for="ValidationTxt" id="ValidationTxtLbl" class="bregLbl">Captcha</label>    
    <img src="ValidationImg.php?CB=<?php echo $CB; ?>" id="LogInFormCaptcha" /> &nbsp;
    &nbsp;
    <input type="text" id="ValidationTxt" name="ValidationTxt" />

    <input class="send" type="submit" id="LoginButton" name="LoginButton" value="Log In"  title="Click Here To Log In" />
    
    </form>

Here is my jquery script:

    $("#LogInForm").on("submit", function(e){
       e.preventDefault();
      var unameval = $.trim($("#UName").val());
      var pwordval = $.trim($("#PWord").val());
      var valtxtval = $.trim($("#ValidationTxt").val());

   if (unameval.length == 0 || pwordval.length == 0 || valtxtval.length == 0)
   {        
      $("#LogInErrMsgBar").show();
      $("#LogInErrMsgTxt").html("<ul><li>Please complete all form fields</li><ul>");
   }
   else
   {
      var PostData = {uname: unameval,pword: pwordval,valtxt: valtxtval};
      $.post("loginvalidations.php", PostData, function(result){
      alert(result);
      });
   }    
   });

Here is loginvalidations.php:

<?php
echo "Test Return Data";
?>

Here is a screenshot of what I am seeing from when it at my host.It is like the jquery is posting to the same page as the form instead of loginvalidations.php.

Here is what I see from localhost, which is what it's supposed to do.

The whole thing can be seen at https://wvsr.club/login

Answer 1

Well, this is embarrassing... The problem was not with my code. The problem was actually with my .htaccess file. I have the entry:

RewriteRule login login.php [L] 

Because the page I was trying to post to is loginvalidations.php and that "login" is the beginning of loginvalidations, the form was indeed posting to itself. I have remedied that by making sure that I do have a rule to catch loginvalidations before login.

I knew it was going to be something incredibly stupidly simple.