ajax - предотвращение двойного щелчка при отправке - PullRequest
8 голосов
/ 22 июня 2011

Как я могу запретить пользователю дважды щелкнуть кнопку "Отправить" в моей форме регистрации, которая является частичным представлением AJAX?

С сожалением спрашиваю, так как об этом уже спросили. Я просто не могу найти четкий рабочий ответ сейчас, где бы я ни искал. Отключение кнопки запретить отправку. Использование var javascript clickcount + alert + return_false не сбрасывается.

Среда: asp.net mvc3

Посмотреть: Форма отображает нагрузку: @RenderPage("_SignupForm.cshtml")

Отправка с использованием:

@using (Ajax.BeginForm("Index", "Signup", null,
     new AjaxOptions
                {
                    UpdateTargetId = "signupForm", 
                    InsertionMode = InsertionMode.Replace, 
                    HttpMethod = "POST",
                    LoadingElementId="progress"
                }
     ))

Передать управление: <input type="submit" value="Sign up" />

RegistrationController:

public ActionResult Index()
{
    return View();
}

[HttpPost]
public ActionResult Index(SignupModel formvalues)
{
    Thread.Sleep(5000);

    string errors = "";
    if (TryValidateModel(formvalues))
    {
        errors = SignupAPI.Signup(formvalues); //includes custom validation
    }

    if (ModelState.IsValid == false || string.IsNullOrEmpty(errors) == false)
    {
        ViewBag.Errors = errors;
        return PartialView("_SignupForm", formvalues);
    }
    else
        return Redirect(string.Concat("http://localhost/welcome"));
}

Ответы [ 2 ]

18 голосов
/ 22 июня 2011

Попробуйте использовать следующий скрипт:

$('form').submit(function () {
    if ($(this).valid()) {
        $(':submit', this).attr('disabled', 'disabled');
    }
});

Убедитесь, что вы выполняете его также при успешном обратном вызове вашего AJAX-запроса, чтобы повторно присоединить событие submit, когда форма заменяется новым содержимымв DOM или во второй раз он может больше не работать.

0 голосов
/ 22 июня 2011

ОБНОВЛЕНИЕ: отправка не работала, потому что onclick не возвращал true

<input type="submit" value="Sign Up" onclick="this.disabled = true; return true;"/>

это отключит кнопку, и второй щелчок на кнопке не будет работать

...