Question posted in
You can find the official documentation here.

jQuery Ajax Call refreshes the page

I have looked at suggested pages and used searched but cant find out solution. I have very simple code jQuery below, where it gets the IDs (array) of check-boxes and send to report.php page through Ajax, below is my code that works fine:

$('#report').submit(function (event) {
    $.ajax({
        url: "report.php",
        data: $('.ids:checked'),
        type: "post",
        dataType: "json",
        success: function(data) {
            //alert(data);
            if(data.success == 1) {
              //upon success
            } else {
              // upon error
            }
        }
    });
    event.preventDefault();
});

however I want to include a textarea which as ID as message, below is my html code:

     <textarea id="message" name="message"></textarea>

if I change the "data" variable and add "message" in it, it refreshes the page upon submit:

     data: {ids: $('.ids:checked'), message: $("#message").val(text)},

How can I receive both array of IDs and Message variables without refreshing the page and working with Ajax. Any help or guidance would be appreciated. thanks

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you everyone for your help, I really appreciate this friendly community. The problem was I had array of checkboxes IDs which when passing to data was creating problem, so I found the following solution

    var IDs = $('.ids:checked').map(function() {
    return this.value;
}).get();

    and then pass this value

    data: { ids: IDs, message:$("#message").val()},

  2. 0

    Not the ajax call but the submit is refreshing the page. So change the submit-button in your form to an ordinary button with type="button", listen for the click on that button (instead of the submit event) and prevent inputs to submit the form by pressing "Enter"

    HTML:

    <button type="button" id="submit_button">submit</button>

    JS:

    $('#submit_button').on('click', function (event) {
    $.ajax({
        url: "report.php",
        data: $('.ids:checked'),
        type: "post",
        dataType: "json",
        success: function(data) {
            //alert(data);
            if(data.success == 1) {
              //upon success
            } else {
              // upon error
            }
        }
    });
    event.preventDefault();
});

$('input').on('keydown', function(e) {
    if (e.key == 'Enter') {
        e.preventDefault();
        return false;
    }
});
    Login or Signup to reply.
  3. 0

    Passing a jQuery object as a data item to $.ajax will cause an error, event.preventDefault(); will not get called, and then your form submits and reloads the page(or load another page).
    If you want to see the error put event.preventDefault();
    Use the .val() method to get values to pass in the data object to pass to $.ajax

    $('#report').submit(function (event) {
    event.preventDefault();
    $.ajax({
        url: "report.php",
        data: {ids: $('.ids:checked').val(), message: $("#message").val()},
        type: "post",
        dataType: "json",
        success: function(data) {
            //alert(data);
            if(data.success == 1) {
              //upon success
            } else {
              // upon error
            }
        }
    });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search