Как предотвратить отправку формы с помощью 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;
});

Форма отправляется сама ... и я хочу, чтобы она вместо этого была вызовом ajax.

Что я делаю не так ...

Если кто-то из вас знает, что mvc3 подскажет, вызовет ли это мое действие?

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

Или это не так?отправить переменные с помощью jQuery этому методу

ОБНОВЛЕНИЕ:

, даже если я сделаю это ... есть еще обратная передача:

    $("#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;
  });
});

Редактировать: Вы должны использовать .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 делает полный пост обратно

Answer 3

(Опубликовано от имени ФП) .

Я понял это, теперь работает:

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