Изменить класс кнопки, когда введенные данные верны - PullRequest
Новая
       28

Изменить класс кнопки, когда введенные данные верны

0 голосов
/ 16 марта 2012

У меня есть кнопка, которая отправляет форму. 

<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'; 
}
}

Я пробовал различные комбинации, чтобы попытаться заставить это работать, но, похоже, не могу правильно заключить условия с правильной комбинацией скобок.

Опять же, если кто-то может указать мне правильное направление, я был бы очень благодарен!

Ответы [ 3 ]

0 голосов
/ 16 марта 2012

Используйте 

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

для изменения класса css элемента

0 голосов
/ 16 марта 2012 
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'; 
    }
}

Код с исправленными скобками

0 голосов
/ 16 марта 2012

вы забыли паратезы;

вместо 

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

используйте это: 

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