Как предотвратить отправку формы с помощью jQuery?

Question

Я получил эту форму:

<form action='/Admin/Update' method='post'> 
    <input type='text' name='dataUpdate' value=" + $temp + " /> 
    <input type='submit' value='Update'/> 
</form> 

и это JQuery:

$("form[action$='Update']").submit(function() { 
    $.post($(this).attr("action") , $(this).serialize()); 
    return false; 
}); 

Форма представляет itself..and Я хочу, чтобы вызов Ajax вместо этого.

Что я делаю неправильно ...

Если некоторые из вас знают mvc3 вы могли бы сказать мне, если это будет вызывать мое действие?

[HttpPost] 
public ActionResult Update(string data) 
{ 
    string data2 = data; 
    return View(_gMenus.GetMyMenus()); 
} 

Или это не способ передачи переменных с JQuery этому методу

UPDATE:

даже если я сделать this..there еще постбэк:

$("#submit_btn").click(function() { 

    return false; 
}); 

Может быть, мне следует использовать метод live()?

Answer 1

Попробуйте использовать event.preventDefault(), которые останавливают действие браузера.

$("form[action$='Update']").submit(function (event) { 
    event.preventDefault(); 
    $.post($(this).attr("action") , $(this).serialize()); 
    return false; 
}); 

В качестве альтернативы, вы можете изменить кнопку отправки на простой кнопки, как показано ниже,

<input type='button' id="submit_btn" value='Update'/> 

и изменить представить обработчик нажмите обработчик, как показано ниже,

$(document).ready (function() { 
    $("#submit_btn").on ('click', function() {  
    $.post($(this).attr("action") , $(this).serialize()); 
    return false; 
    }); 
}); 

Edit: Вы должны использовать .on в синтаксисе ниже для динамических элементов, (для jQuery v1.7)

$(document).ready (function() { 
    $(document).on ("click", "#submit_btn", function() {  
    $.post($(this).attr("action") , $(this).serialize()); 
    return false; 
    }); 
}); 

Использование .live для более старых версий,

$(document).ready (function() { 
    $("submit_btn").live ("click", function() {  
    $.post($(this).attr("action") , $(this).serialize()); 
    return false; 
    }); 
}); 

Answer 2

Если вы используете MVC 3, то такого рода вещи уже встроены.

Ваша форма будет

@using(Ajax.BeginForm()){ 
    // fields/inputs/submit button 
} 

Затем укажите относительные файлы Javascript.

<script src="/js/libs/jquery.validate.min.js"></script> 
<script src="/js/libs/jquery.unobtrusive-ajax.min.js"></script> 
<script src="/js/libs/jquery.validate.unobtrusive.min.js"></script> 

Это сделает то, что вам нужно. Посмотрите на Ajax.BeginForm для различных AjaxOptions, которые вы можете использовать.

Также проверьте; MVC 3 - Ajax.BeginForm does a full post back

Answer 3

(Отправлено от имени ОП).

Я понял это, он работает сейчас:

$("#submit_btn").live('click', function() { 
    alert("succeeded"); 
    $.post($(this).attr("action"), { data: $('dataUpdate').val() }); 
    return false; 
});