$.ajax( type: "POST" POST method to php

Question

I'm trying to use the POST method in jQuery to make a data request. So this is the code in the html page:

<form>
Title : <input type="text" size="40" name="title"/>
<input type="button" onclick="headingSearch(this.form)" value="Submit"/><br /><br />
</form>
<script type="text/javascript">
function headingSearch(f)
{
    var title=f.title.value;
    $.ajax({
      type: "POST",
      url: "edit.php",
      data: {title:title} ,
      success: function(data) {
        $('.center').html(data); 
      }
    });
}
</script>

And this is the php code on the server :

<?php

$title = $_POST['title'];
if($title != "")
{
    echo $title;
}

?>

The POST request is not made at all and I have no idea why. The files are in the same folder in the wamp www folder so at least the url isn't wrong.

Answer 1

try this

$(document).on("submit", "#form-data", function(e){
    e.preventDefault()
    $.ajax({
        url: "edit.php",
        method: "POST",
        data: new FormData(this),
        contentType: false,
        processData: false,
        success: function(data){
            $('.center').html(data); 
        }
    })
})

in the form the button needs to be type="submit"