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.

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.

• javascript
• jquery
• ajax
• forms

• Serialize the input values in a Json string, and send it along the json request – Samy S.Rathore Commented Jul 10, 2015 at 9:46
• Instead of making a form (which you seem to not want to use), why don't you just create a div containing all your inputs with a button at the end. Then in JS, you link the button to an ajax request. – tektiv Commented Jul 10, 2015 at 9:48
• Thanks tektiv. That would work but is there any simple way to serialize the values of the inputs? Does the serialize method work on a div that has inputs in it? – Sammy Jaafar Commented Jul 10, 2015 at 9:54

2 Answers 2

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
                        }
                    },
                });  

    })

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();