CODEWITHSUNDEEP
javascriptphpjqueryajax
thisisready
thisisready

Reputation: 633

Using return false is stopping my AJAX call from executing, removing it fixes it but then the page refreshes

I am using jQuery to AJAX POST a form and do not want the page to refresh. I have added return false command which prevents the page from refreshing but then the AJAX POST doesn't happen. If I remove the return false command, my AJAX POST is successful but the page refreshes. What am I doing wrong?

PHP code:

<form name="frmfeedback" id="frmfeedback" method="POST">
    <label>This answer was helpful</label>
    <input class="test" type="text" name="test" value=""/>
    <input class="hidden" id="fbackqueryval" type="text" name="fbackqueryval" value="1"/>
    <input class="btntick" type="submit" name="fbackresponse" value="Positive" onclick="submitdata()">
    <input class="btncross" type="submit" name="fbackresponse" value="Negative" onclick="submitdata()">
</form>

JS code:

function submitdata()
{
    $('#frmfeedback').on('click', function(e){
        e.preventDefault();
        $.ajax({
            method: "POST",
            url: "/",
            data: { fbackqueryval: "1"}
        }).done(function( msg ) {
            alert( "Data Saved" );
            return false;
        });
    });
}

Upvotes: 0

Views: 553

Answers (5)

Matteo Gaggiano
Matteo Gaggiano

Reputation: 1305

You have three ways to do this.

First way Stop the submitdata returning false (remove it from done callback)

function submitdata() {
    $('#frmfeedback').on('click', function(e) {
        e.preventDefault();
        $.ajax({
                method: "POST",
                url: "/",
                data: {
                    fbackqueryval: "1"
                }
            })
            .done(function(msg) {
                alert("Data Saved");
            });
    });
    return false;
}

Second way Change type button to type=button instead of type=submit

<input class="btntick" type="button" name="fbackresponse" value="Positive" onclick="submitdata()">
<input class="btncross" type="button" name="fbackresponse" value="Negative" onclick="submitdata()">

Third way Add return false to onClick attribute:

<input class="btntick" type="submit" name="fbackresponse" value="Positive" onclick="submitdata();return false;">
<input class="btncross" type="submit" name="fbackresponse" value="Negative" onclick="submitdata();return false;">

As mentioned by others, you are making a double-call to your route /

You can do it as:

$(document).ready(function() {
    $('input[type=button][name=fbackresponse]').on('click', function(e) {
        fbackqueryval = $(this).val();
        $.ajax({
            method: "POST",
            url: "/",
            data: {
                fbackqueryval: fbackqueryval
            }
        })
        .done(function(msg) {
            alert("Data Saved");
        });
    });
});

<input class="btntick" type="button" name="fbackresponse" value="1">
<input class="btncross" type="button" name="fbackresponse" value="-1">

Upvotes: 1

thisisready
thisisready

Reputation: 633

All the comments combined eventually made the solution click.

Main learning points are:

  1. Don't wrap the form elements in a tag. I'll have to look into whether that breaks web standards and what happens when JS is not available but for the purposes of what I'm building, this is good enough
  2. Because the code suggestions were fundamentally changing what and how I was posting data back to the server, this meant I had to adjust my PHP code for processing the incoming data. The reason it wasn't working for me is because I was looking for a POST value that I was no longer sending.

I haven't figured out how to create one function for dealing with the two different buttons so I have two functions linked to the two buttons: fbackPositive() and a fbackNegative().

JS code:

function fbackPositive() {
  $.ajax({
          method: "POST",
          url: "index.php",
          data: {
              fbackqueryval: "1",
              fbackresponse: "Positive"
          }
      })
      .done(function(msg) {
          alert("Data Saved");
      });

  return false;
}

function fbackNegative() {
  $.ajax({
          method: "POST",
          url: "index.php",
          data: {
              fbackqueryval: "1",
              fbackresponse: "Negative"
          }
      })
      .done(function(msg) {
          alert("Data Saved");
      });

  return false;
}

HTML:

<input class="" id="fbackqueryval" type="text" name="fbackqueryval" value="1"/>
<button class="btntick" type="button" name="fbackresponse" value="Positive" onclick="fbackPositive()">
<button class="btncross" type="button" name="fbackresponse" value="Negative" onclick="fbackNegative()">

Upvotes: 0

Vural
Vural

Reputation: 8748

It is refreshing the page, because you are submitting the form.

if you want to make an AJAX-Call, you do not need to submit a form.

Just change your code like below:

JQuery:

  $('.myAjaxButton').on('click', function(e){
     e.preventDefault();

      $.ajax({
        method: "POST",
        url: "/myAjax.php",
        data: { fbackqueryval: "1"}
      })
      .done(function( msg ) {
          alert( "Data Saved" );
      });
  });

and html:

    <label>This answer was helpful</label>
    <button class="btntick myAjaxButton">Positive</button>
    <button class="btncross myAjaxButton">Negative</button>

You can check: https://jsfiddle.net/32dLa1wh/

If it doesn't work for you, you should debug your php file (in example myAjax.php)

Upvotes: 1

Norkos
Norkos

Reputation: 171

The return must be outside the done-callback. So submitdata must return false to stop the submit-event.

Changing the type of the buttons will not fix the problem when the user press enter inside a input field.

Upvotes: 0

Mayank Vadiya
Mayank Vadiya

Reputation: 1451

you need to change button type

<input class="btntick" type="button" name="fbackresponse" value="Positive" onclick="submitdata()">
<input class="btncross" type="button" name="fbackresponse" value="Negative" onclick="submitdata()">

Upvotes: 0

Related Questions