How to send form data using jquery ajax without submitting the form?

Question

I have a form on my page that I do not want to submit. Here is an example of what I'm trying to do basically. When I click a button, I want an ajax request to be sent but without submitting the form. This is an example format of the function which will run when my button is clicked:

function clicked()
{
     try {
            var url = "test.php?t1=1&t2=2"
            var postData = $("#myForm").serializeArray();
            $.ajax(
            {
                url : url,
                beforeSend: function (request)
                {
                  request.setRequestHeader('Content-Type', 'text/html;   charset=utf-8');
                },
                type: "POST",
                data : postData,
                contentType: false,
                processData: false,
                success:function(data, status, xhr) 
                {
                    if(status == "success")
                    {
                        alert(data); 
                       // Do something on page
                    }
                    else
                    { 
                      // Do something on page
                    }
                },
            });  
      } 
     catch (e) 
     {
        alert("Error Adding POI:\n" + e);
     }
}

When I disable the form submit using the preventDefault function, the form is not submitted. However, the form simply sends an ajax post request to my url "test.php?t1=1&t2=2" without any of the input values of my form. Without preventDefault, the form submits and navigates away from the page. No ajax request is sent. Is there any way to send the form data to the url "test.php?t1=1&t2=2" with an ajax request without submitting the form?

Thanks in advance. Any help is greatly appreciated.

Answer 1

TRY:

 $('input [type="submit"]').on('click',function(e){
    e.preventDefault();
    var url = "test.php?t1=1&t2=2"
                var postData = $('this').serialize();
                $.ajax(
                {
                    url : url,
                    beforeSend: function (request)
                    {
                      request.setRequestHeader('Content-Type', 'text/html;   charset=utf-8');
                    },
                    type: "POST",
                    data : postData,
                    success:function(data, status, xhr) 
                    {
                        if(status == "success")
                        {
                            alert(data); 
                           // Do something on page
                        }
                        else
                        { 
                          // Do something on page
                        }
                    },
                });  

    })

Answer 2

The below dirty hack may work when I dig out some details for you. Please also continue to use preventDefault to prevent the form from submiting.

//Change
var url = "test.php?t1=1&t2=2"
var postData = $("#myForm").serializeArray();

//To
var url = "test.php"
var postData = "t1=1&t2=2&" + $("#myForm").serialize();