The follwing ajax script isn't sending data to php, the page just reloads & form input values are passed onto the url.

Script

<script>
  $("#addProducts").submit(function(event) {
     var str = $("addProducts").serialize();
     event.preventDefault();
     $.ajax({
        type: "POST",
        url: "subAddProduct.php",
        data:str
     })
  });
</script>

HTML Form

<form enctype="multipart/form-data" id="addProducts">
...
</form>

There's already a problem in your code: $("addProducts").serialize(); should be $("#addProducts").serialize();.

I just ran some tests. The problem is because you try to bind your function before your document is ready. Please replace your code by the code below:

$(document).ready(function() {
    $("#form1").submit(function(event) {
         var str = $("#form1").serialize();
         event.preventDefault();
         $.ajax({
            type: "POST",
            url: "test.php",
            data: str
        });
    });
});

About what Zeeshan Bilal and pvorb said, I'm afraid it's false. submit() is the right function to use (see jQuery documentation).

Description: Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.

more