【问题标题】:Change button class when form inputs are valid当表单输入有效时更改按钮类
【发布时间】:2012-04-01 20:34:34
【问题描述】:

我有一个提交表单的按钮。

<input type="button" class="disabled" id="submitbutton" name="Continue" title="Continue" value="Continue"  onclick="NextPage('CON');" /> 

我想根据表单中输入的值自动将按钮的类别从“禁用”更改为“启用”(其中有很多组合,即我不能将它们全部列出为需要一个值 - 输入是否是强制性的有条件)。

我想在 JavaScript/Ajax/JQuery 中执行此操作,以便在所有必需的输入有效时立即更改按钮类,而不是进行某种刷新以进行服务器端验证。

我不确定从哪里开始:

我有类似的东西

function ChangeButton()
{
if (document.forms[0].QUESTIONID.value != "") && (document.forms[0].QUESTIONIDTWO.value != "") etc etc.... 
{
document.getElementById('submitbutton').class = 'enabled'; 
}
}

但我无法让它工作——它只适用于第一个值——我在下拉菜单上放了一个 onchange="ChangeButton()" 来验证。

如果有人能给我一些建议,我将不胜感激!

感谢您到目前为止的帮助 - 括号似乎是我失败的地方:

 function ChangeButton()
{
if 
((document.forms[0].IPR_TITL.value != "") && (document.forms[0].IPR_FNM1.value != "")                  && (document.forms[0].IPR_FNM1.value != "") && (document.forms[0].IPR_SURN.value != "") && (document.forms[0].IPR_GEND.value != "") && (document.forms[0].IPR_DOB.value != "") && (document.forms[0].IPQ_CRIM.value != "") && (document.forms[0].IPQ_ETHC.value != "") && (document.forms[0].IPQ_DSBC.value != "") && (document.forms[0].IPQ_MARK1.value != "") && (document.forms[0].IPQ_NATC.value != "") && (document.forms[0].IPQ_COBC.value != "") && (document.forms[0].IPQ_COD.value != "") && (document.forms[0].IPQ_FIVE.value != "") && (document.forms[0].IPQ_PERM.value != "") && (document.forms[0].IPQ_VISF.value != "") && (document.forms[0].IPQ_A_USD.value != "") && (document.forms[0].IPR_HAD1.value != "") && (document.forms[0].IPR_HAD3.value != "") && (document.forms[0].IPR_HTEL.value != "") && (document.forms[0].IPR_HAEM.value != "") && (document.forms[0].IPQ_FEES.value != "") && (document.forms[0].IPQ_REF1TIT.value != "") && (document.forms[0].IPQ_REF1ORG.value != "") && (document.forms[0].IPQ_REF1POS.value != "") && (document.forms[0].IPQ_REF1AL1.value != "") && (document.forms[0].IPQ_REF1AL3.value != "") && (document.forms[0].IPQ_REF1AL5.value != "") && (document.forms[0].IPQ_REF1EMA.value != "") && (document.forms[0].IPQ_DISC.value != ""))
&&
((document.forms[0].IPQ_PERM.value != "") && (document.forms[0].IPQ_FIVE.value != "N")) 
&&
((document.forms[0].IPQ_AGNT.value != "") && (document.forms[0].IPQ_A_USD.value != "Y")) 
&&
((document.forms[0].IPQ_CSTRT.value != "") && (document.forms[0].IPQ_A_USD.value != "N") && (document.forms[0].IPQ_CENDD.value != "") && (document.forms[0].IPQ_CAD1.value != "") && (document.forms[0].IPQ_CAD3.value != "") && (document.forms[0].IPQ_CAD4.value != "") && (document.forms[0].IPQ_CAPC.value != "") && (document.forms[0].IPQ_CTEL.value != ""))
&&
((document.forms[0].IPQ_AWDB.value != "") && (document.forms[0].IPQ_FEES.value != "") && (document.forms[0].IPQ_FEES.value != "Private Funds Self or Family") && (document.forms[0].IPQ_AWDS.value != ""))
&&
((document.forms[0].IPQ_RESEARCH.value = "Y") && (document.forms[0].IPQ_RESSRT.value != "") && (document.forms[0].IPQ_RESMOA.value != "") && (document.forms[0].IPQ_RESAR.value != "") && (document.forms[0].IPQ_RESDIS.value != ""))
{
document.getElementById('submitbutton').className = 'processbuttons'; 
}
else {
document.getElementById('submitbutton').className = 'enabled'; 
}
}

我尝试了各种组合来尝试使其正常工作,但似乎无法用正确的括号组合正确地括起条件。

再次,如果有人能指出我正确的方向,我将不胜感激!

【问题讨论】:

  • 我会说为什么不是 JQuery ......但好吧,我认为 Tom 给了一个遮阳篷

标签: javascript forms validation button input


【解决方案1】:

你忘记了括号;

代替

if (document.forms[0].QUESTIONID.value != "") && (document.forms[0].QUESTIONIDTWO.value != "") {
....
}

使用这个:

if ((document.forms[0].QUESTIONID.value != "") && (document.forms[0].QUESTIONIDTWO.value != "")) {
....
}

【讨论】:

    【解决方案2】:

    使用

    document.getElementById('submitbutton').className = 'enabled';
    

    用于更改元素的 css 类

    【讨论】:

      【解决方案3】:
      function ChangeButton()
      {
          if 
          ((document.forms[0].IPR.value == "") && (document.forms[0].FNM1.value == "") && (document.forms[0].FNM1.value == "") && (document.forms[0].SURN.value == "") && (document.forms[0].GEND.value == "") && (document.forms[0].DOB.value == "") && (document.forms[0].CRIM.value == "") && (document.forms[0].ETHC.value == "") && (document.forms[0].DSBC.value == "") && (document.forms[0].MARK1.value == "") && (document.forms[0].NATC.value == "") && (document.forms[0].COBC.value == "") && (document.forms[0].COD.value == "") && (document.forms[0].FIVE.value == "") && (document.forms[0].PERM.value == "") && (document.forms[0].VISF.value == "") && (document.forms[0].USD.value == "") && (document.forms[0].HAD1.value == "") && (document.forms[0].HAD3.value == "") && (document.forms[0].HTEL.value == "") && (document.forms[0].HAEM.value == "") && (document.forms[0].FEES.value == "") && (document.forms[0].REF1TIT.value == "") && (document.forms[0].REF1ORG.value == "")     && (document.forms[0].REF1POS.value == "") && (document.forms[0].REF1AL1.value == "") && (document.forms[0].REF1AL3.value == "") && (document.forms[0].REF1AL5.value == "") && (document.forms[0].REF1EMA.value == "") && (document.forms[0].DISC.value == "")
              &&
              ((document.forms[0].PERM.value == "") && (document.forms[0].FIVE.value == "N")) 
              &&
              ((document.forms[0].AGNT.value == "") && (document.forms[0].USD.value == "Y")) 
              &&
              ((document.forms[0].CSTRT.value == "") && (document.forms[0].USD.value == "N") && (document.forms[0].CENDD.value == "") && (document.forms[0].CAD1.value == "") && (document.forms[0].CAD3.value == "") && (document.forms[0].CAD4.value == "") && (document.forms[0].CAPC.value == "") && (document.forms[0].CTEL.value == ""))
              &&
              ((document.forms[0].AWDB.value == "") && (document.forms[0].FEES.value == "") && (document.forms[0].FEES.value == "Private Funds Self or Family") && (document.forms[0].AWDS.value == ""))
              &&
              ((document.forms[0].RESEARCH.value == "Y") && (document.forms[0].RESSRT.value == "") && (document.forms[0].RESMOA.value == "") && (document.forms[0].RESAR.value == "") && (document.forms[0].RESDIS.value == "")))
              {
              document.getElementById('submitbutton').className = 'enabled'; 
              }
          else {
              document.getElementById('submitbutton').className = 'disabled'; 
          }
      }
      

      括号内的代码已更正

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2014-11-13
        • 1970-01-01
        • 2018-09-02
        • 2015-09-20
        • 1970-01-01
        • 2017-12-29
        • 2019-01-18
        相关资源
        最近更新 更多