Question 216538 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – issue with ajax working on page load but not on button click

I’ve been playing around with ajax for awhile, to get some info out of a database. I finally got it to work in my testfile, so I copied the code to my real file. It worked. And then it didn’t. To be specific, when I use my code when the document finishes loading, it works fina and as expected, but when I click on a button, it does not. The ajax.php file isn’t the issue, it works both in the document load and when I call it directly from my browser. So what’s the issue here?

Working code:

<html>
<body>
<form method="POST" action="testsi2.php">
<p><button id="submitOV">submit this</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">

jQuery(document).ready(function () {
    console.log("page loaded");
    var selectedVak = 7;
    var selectedKlas = 2;
    var selectedJaar = 2023;
    console.log("prepping ajax call");
    var url = "ajax.php?vak=" + selectedVak + "&klas=" + selectedKlas + "&jaar=" + selectedJaar + "&task=4";
    console.log("calling " + url);
    $.ajax(url, { success: function(data) { 
                console.log("AJAX call was successful.");
                console.log("Data from the server = " + data);
            },
            error: function() { console.log("There was some error performing the AJAX call."); } }
    );
});

</script>

This echoes in the console, as expected:

page loaded
prepping ajax call
calling ajax.php?vak=7&klas=2&jaar=2023&task=4
AJAX call was successful.
Data from the server = 6-3-5-4-3-

The 6-3-5-4-3- is exactly the response I want, so that’s all fine.

And this does not:

<html>
<body>
<form method="POST" action="testsi2.php">
<p><button id="submitOV">submit this</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">

$("#submitOV").click(function(event) {
    console.log("button clicked");
    var selectedVak = 7;
    var selectedKlas = 2;
    var selectedJaar = 2023;
    console.log("prepping ajax call");
    var url = "ajax.php?vak=" + selectedVak + "&klas=" + selectedKlas + "&jaar=" + selectedJaar + "&task=4";
    console.log("calling " + url);
    $.ajax(url, { success: function(data) { 
                console.log("AJAX call was successful.");
                console.log("Data from the server = " + data);
            },
            error: function() { console.log("There was some error performing the AJAX call."); } }
    );
});

As you can see, the only thing changed is calling the ajax when I click the button instead of loading the page, and the first console.log() entry.

This time, I get

button clicked 
prepping ajax call 
calling ajax.php?vak=7&klas=2&jaar=2023&task=4
There was some error performing the AJAX call.

I have found this one: Ajax working on pageload but not on button click but that doesn’t seem to fix the issue.

Tags:

2

Answers


  1. 0

    That’s because clicking the button sends a request to testsi2.php and reloads the page, and your AJAX request gets aborted. If you move the button out of the form, it works fine.

    Login or Signup to reply.
  2. 0

    The action attribute tells the form which page to post the data to when the form is submitted. There’s no code preventing this from happening, so even though your request likely goes through as expected, the browser is also navigating to this page, because that’s what it’s been told to do.

    You should listen to the submit event of the form itself, rather than the click event of the button. This will have a couple benefits: it will let you use event.preventDefault() to prevent the page redirect as long as JavaScript is enabled, and it will also make it so other methods of form submission (enter key, etc.) are also intercepted.

    It would look something like this:

    <form id="form" method="POST" action="testsi2.php">
    <p><button type="submit">submit this</button>
</form>

...

<script>
$("#form").on("submit", function(event) {
    event.preventDefault(); // prevent the page redirect
    // your submit handler here
});
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search