sending form data to server by ajax

Question

I am new with ajax and want to make a to-do-list.

for add-form submit method() ,I have an if-else .the else works and give me alert in its situation but if doesnt work I think it's about my post method.

by the way it's my jquery code :

$('#add_task').submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
var title = $('#task_title').val();
if(title){
 //ajax post the form
 $.post("/add", {title: title}).done(function(data) {
   $('#add_task').hide("slow");
   $("#task_list").append(data);
 });
}
 else{
   alert("Please give a title to task");
}
});

and when I click on my add btn the console output shows me a 404 not found error and refer to this line of my jquery main file that I download from http://code.jquery.com/jquery-latest.min.js: it is :

f.send(a.hasContent&&a.data||null),b=function(c,e){var h,i,j;if(b&&    (e||4===f.readyState))if(delete Xc[g],b=void     0,f.onreadystatechange=m.noop,e)4!==f.readyState&&f.abort();

it's my controller :

  public function postAdd() {
  if(Request::ajax()){
    $todo = new Todo();
    $todo->title = Input::get("title");
    $todo->save();
    $last_todo = $todo->id;
    $todos = Todo::whereId($last_todo)->get();
    return View::make("ajaxData")
    ->with("todos", $todos);
 }
}

and my route:

Route::controller('/', 'TodoController');

thanks for time

Answer 1

Change "submit button" to simple button and change as below.

$('#add_task').click(function() {
    var titleField = $('#task_title');
    if(titleField.length > 0){
        $.post("/add", {title: titleField.val()}).done(function(data) {
            $('#add_task').hide();
            $("#task_list").append(data);
        });
    } else {
        alert("Please give a title to task");
    }
    return false;
});