No response from this simple jquery/ajax function

JavaScript
1 

function callSendAjax(){
  $("addProductsForm").submit(function(){
    $.post("return.php", $(this).serialize(), function(data){
      //$('#saveResult').html(data);
      alert(data);
    });
    return false;
  });
}

I practically got this code from a book which submits a form through ajax and gets the response back. But nothing happens when i click e save button. No errors no returns.

Heres the simplified HTML:


  <form action="" method="post" enctype="multipart/form-data" name="addProductsForm">
    <table>
       //some form input elements 
       <input type="button" value="Save" onclick="callSendAjax()" />
       <div id="saveResult"></div>
    </table>
  </form>

Finally heres the return.php:

<?php
  print_r($_POST);
?>

I’m supposed to get a return of all values returned displayed through $_POST, but nothing happens.

2

The code in callSendAjax() adds an event handler for the submit event of your form. It does not, execute the code in your event handler function. The code will later get executed if a submit event occurs on your form. A submit button is a common way to make a submit event.

You could also leave it as is, but just change the callSendAjax() to just send the ajax request, instead of adding an event handler.

3

Your selector is wrong

$('addProductsForm')

would select an element of TYPE addProductsForm. To select by class you need a . and to select by id you need a #. Right now your form has neither. You could select by name with:

$('form[name=addProductsForm]')
4

or if it’s just one form, $(‘form’) should do.

5

thanks so much guys.

it worked after I removed the .submit method and changed the selector.
cool…now i’m using ajax! :slight_smile:

6

thanks!
I had a similar issue and was very helpfull!