Отключить кнопку отправки, чтобы предотвратить двойной щелчок, но только после успешной проверки формы - PullRequest
Новая
       25

Отключить кнопку отправки, чтобы предотвратить двойной щелчок, но только после успешной проверки формы

1 голос
/ 21 октября 2011

В настоящее время на моей странице есть кнопка отправки, которая отключается при нажатии, чтобы предотвратить двойную отправку. 

<tr:commandButton onclick="this.disabled=true;" />

Однако, если в форме есть ошибки, пользователь не сможет повторно отправить форму, так как кнопка отправки отключена.

Можно ли как-то отключить кнопку отправки, только когда она очищает проверку формы?

К вашему сведению, моя страница выглядит примерно так: 

<rich:tabPanel headerAlignment="left" switchType="client" width="100%">
    <rich:tab label="#{cfsMsgs.main_tab_label}" name="mainTab">
        <rich:spacer height="20" />
        <ui:include src="add_main.xhtml" />
    </rich:tab>
    <rich:tab label="#{cfsMsgs.qualification_tab_label}" name="qualificationTab">
        <rich:spacer height="20" />
        <ui:include src="add_qualification.xhtml" />
    </rich:tab>

    <!-- ...and so on... -->

И на каждой вкладке есть набор методов проверки, таких как 

<tr:inputText ...>
    <tr:validateRegExp pattern="^\S.*" ... />
</tr:inputText>

... и 

<tr:inputText validator="#{backingBean.validate}" ...>
</tr:inputText>

Можно ли установить для моей кнопки что-то вроде onclick = "this.disabled = [индикатор ошибки страницы, например, page.hasError или что-то подобное] "?

РЕДАКТИРОВАТЬ 1: Альтернативой является повторная визуализация кнопки, если страница не может быть отправлена. Я внес изменения в свой код следующим образом: 

<tr:commandButton onclick="this.disabled=true;" id="btnSubmit">
    <a4j:support event="oncomplete" reRender="btnSubmit" ajaxSingle="true" oncomplete="alert('done!');" />
</tr:commandButton>

Событие oncomplete в a4j: support для меня, чтобы увидеть, было ли это сделано. Однако когда я попытался запустить это, я не увидел никаких предупреждений. Значит ли это, что я здесь что-то не так делаю?

Ответы [ 3 ]

0 голосов
/ 25 июня 2012

Тег кнопки: 

<asp:Button ID="Submit" runat="server" Text="Submit"
            Width="150" OnCommand="GoFromHere" CommandArgument="2"
            OnClientClick="disableSubmitButtons()" />

В HTML: 

<input type="submit" value="Submit" onclick="disableSubmitButtons()" />
<script type="text/javascript">
//disable the button and do nothing if user clicks a second time
function disableSubmitButtons() {
    event.srcElement.onclick = doDisable;
}
function doDisable(){
    event.srcElement.disabled=true;
}

</script>
0 голосов
/ 26 июня 2012

Это работает очень хорошо для меня (на основе javaScript): 

//Initialize our submit flag to false
var formSubmitted = false;

/**
 * Prevent from submitting a form more than once
 * @returns {Boolean}
 */
function submitForm()
{   
  //has the form been submitted before?
  if( formSubmitted == true )
  {
     alert("This form has already been submitted!");
     return false;
  }
  formSubmitted = true;

  return true; // Submit form
}

И применить его в commandButton: 

<h:commandButton action="#{bean.action}" onclick="return submitForm();"/>
0 голосов
/ 21 октября 2011

Я не совсем уверен, но вы пробовали: 

<tr:commandButton onsubmit="this.disabled=true;" />
...