submit btn-style von jeweiliger form ändern

[phase]

hi, ich habe verschiedene forms auf eine seite mit jeweils  mehrerer checkboxen und einen submit btn.

jetzt möchte ich das die btn ihren style ändern sobald eine checkbox angeklickt wird.

wie kann ich das realisieren?

gruß
phase

[Olaf Schneider]

Hallo phase,

wie weit kennst Du Dich schon mit css und Javascript aus?

Gruß
Olaf

[phase]

hi Olaf, also css sollte kein problem sein und ein getElementByID oder name bekomme ich auch hin aber hier liegt das problem, ich habe keine id. ich müsste den submit aus dem form anprechen also ungefähr so:

function changeBtn (FormName) {

document.Formname.submit.className=btnYellow
}

aber das haut nicht hin

[phase]

ok, das hier:

function changeBtn (form) {

alert(form);

document.testform.submit.className='btnYellow';

}

--

onclick="changeBtn('testform')"

--

funktioniert jetzt! aber ich habe jetzt das problem, das der style jetzt auf btnYellow bleibt, auch wenn die checkbox wieder deselektiert wird.

im ideal fall würde es so laufen das der btn den style btnYellow solange  und auch nur dann bekommt, wenn eine der checkboxen innerhalb dieser form gechecked sind!

noch jemand einen tipp?

danke und gruß
phase

[wahsaga]

hi,

im ideal fall würde es so laufen das der btn den style btnYellow solange  und auch nur dann bekommt, wenn eine der checkboxen innerhalb dieser form gechecked sind!

Statte jede Checkbox in diesem Formular mit einem onClick-Event aus, der jeweils die gleiche Funktion aufruft.
Überprüfe in dieser die checked-Eigenschaft der Checkbox - ist sie angekreuzt, addierst du auf einen globalen Zähler eins drauf, ist sie es nicht, ziehst du eins ab.
Überprüfe anschließend den Stand dieses Zählers - und style abhängig davon deinen Submitbutton.

Beachte dabei, wie der Zähler korrekt zu initialisieren ist - wenn es per Default angekreuzte Checkbox gibt, muss dies natürlich berücksichtigt werden.
Und überlege, ob onClick der richtige bzw. allein ausreichende Event ist - oder ob De-/Aktivierung von Checkboxen per Tastatur nicht ebenfalls berücksichtigt werden sollte.

gruß,
wahsaga

[phase]

hi wahsaga,

erst mal danke für deinen tipp. 2 probleme habe ich hierbei:

1. wie kann ich einen globalen zählen auf/ab zählen?
2. wie kann ich den namen der entsprechenden form übergeb bzw. in die funktion mit einbauen?

ich hab es so versucht aber es tut sich rein gar nichts:

function checkForm(formName){
var a = 0;

for(var i=0; i<document.competitionForm0.elements.length; i++){

if(document.competitionForm0.elements[i].type=="checkbox" && document.competitionForm0.elements.checked==true){
     a++;
    }
   }

if(a!=0)
   document.competitionForm0.submit.className='btnYellow';
}

danke, phase

[wahsaga]

hi,

2. wie kann ich den namen der entsprechenden form übergeb bzw. in die funktion mit einbauen?

http://de.selfhtml.org/javascript/objekte/forms.htm#allgemeines

Zu deinem Beispiel: Wenn es dir genügt, mindestens eine angekreuzte Checkbox vorzufinden - dann brauchst du die Schleife nicht bis zum Ende laufen zu lassen. Dann kannst du sofort in dem Moment, wo du die erste findest, den Button-Stil setzen - und anschließend mittels break aus der Schleife aussteigen.

gruß,
wahsaga

[phase]

ok, ich habs jetzt so:

function checkForm(formName){

var a = 0;

for(var i=0; i<document.competitionForm0.elements['competitionId'].length; i++){

if(document.competitionForm0.elements['competitionId'][i].checked==true){
     a++;
    }

}

alert(a);

if(a!=0){
   document.competitionForm0.submit.className='btnYellow';
   }else{
   document.competitionForm0.submit.className='btn';
   }
}

-------

das funktioniert auch soweit nur kann ich immenoch nicht den formnamen übergeben. den muss ich ja in meine onclick, ob das nun der richtige event ist weiß ich auch noch nicht, übergeben.

ich habs so versucht:

function checkForm(formName){

var objForm = document.competitionForm+"formName";

var a = 0;

for(var i=0; i<objForm.elements['competitionId'].length; i++){

if(objForm.elements['competitionId'][i].checked==true){
     a++;
    }

}

alert(a);

if(a!=0){
   objForm.submit.className='btnYellow';
   }else{
   objForm.submit.className='btn';
   }
}
---------

und übergebe als formName 0 und möchte diese null an den formnamen anhängen document.competitionForm+"formName" soll dann document.competitionForm0 ergeben. das klappt aber nicht. wie kann ich denn nun den formnamen übergeben? ich mässte nur die zahl anhängen da competitionForm immer gleichbleibt!

[phase]

ok, ich habs jetzt selbst gelöst.

function checkForm(formName){

var formName = "competitionForm" + '' + formName;

var a = 0;

for(var i=0; i<document.forms[formName].elements['competitionId'].length; i++){

if(document.forms[formName].elements['competitionId'][i].checked==true){
     a++;
    }

}

if(a!=0){
   document.forms[formName].submit.className='btnYellow';
   }else{
   document.forms[formName].submit.className='btn';
   }
}

--------

danke trotzdem!

gruß
phase

[Struppi]

Hallo phase

hi, ich habe verschiedene forms auf eine seite mit jeweils  mehrerer checkboxen und einen submit btn.

jetzt möchte ich das die btn ihren style ändern sobald eine checkbox angeklickt wird.

Alle oder nur von dem einem Formular?

Im 2. Fall kannst beim anklicken der chekcbox gleich das dazugehörige Formular übergeben:
<input type="checkbox" onclick="chBtn(this.form);">

und dann musst du alle Elemente des Formulars durchsuchen welches davon den type "submit" hat

function chkBtn(form)
{
for(var i = 0; i < form.elements.length; i++)
if(form.elements[i].type == 'submit') form.elements[i].className = '....';
}

Struppi.