Submit-Button deaktiviert

oliver12345 · Beitrag von **oliver12345** » 14.08.2005 16:40

Hi Leute,

sicher kennt ihr ja so ein Script:

<html>
<head>
<script language="JavaScript">
function checkThis(){
	if(document.theform.box.checked){
		document.theform.button.disabled=false;
	} else {
		document.theform.button.disabled=true;
	}
}
</script>
</head>
<body onLoad="javascript:checkThis();">
<form name="theform">
<input type="checkbox" name="box" value="bla" OnClick="javascript:checkThis();">
<input type="submit" name="button" value="Submit">
</form>
</body>
</html>

Sowas suche ich nun für Radiobuttons. Mit einem habe ich das hingekriegt, aber sobald ich mehrere Radiobuttons hinzufüge, funzt das Script nicht mehr. Kann jemand sowas programmieren? Ich benötige das für eine Umfrage. Wenn nämlich keine Antwort ausgewählt wurde, soll der Submit-Button deaktiviert sein.

Vielen Dank für eure Hilfe!

MfG
oliver12345

fagus · Beitrag von **fagus** » 14.08.2005 23:30

huhu,

das problem liegt wohl darin, dass bei mehreren radiobuttons diese in einem array gespeichert werden. folglich müsste dein javascript jeden radiobutton dieses arrays einzeln mittels einer schleife deaktivieren.
wie man das genau programmieren muss, wüsste ich jetzt auch nicht gerade, hab nämlich schon lange kein javascript mehr programmiert. da gibts wohl nichts als ausprobieren bis es klappt.

eine ander möglichkeit wäre, sie per css-definition zu verstecken. diese kann man auch mit javascript manipulieren. mit display:none oder visibility:hidden kann man das erreichen.

oliver12345 · Beitrag von **oliver12345** » 14.08.2005 23:37

@ fagus

Es sollen ja keine Radiobuttons deaktiviert werden, sondern der Submit-Button - zumindest wenn kein Radiobutton ausgewählt wurde. Sobald eine Antwortmöglichkeit der Umfrage angeklickt wurde, soll der Button aktiviert werden, damit die Antwort abgeschickt werden kann.

fagus · Beitrag von **fagus** » 15.08.2005 13:50

das ändert doch nichts an der grundsätzlichen lösung.
du hast die radiobuttons trotzdem in einem array, einfach dass du statt den radiobuttons eben den submit-button deaktivieren musst.

teste mal diesen code und achte auf die meldung die das skript ausspuckt.
dann entferne die zweite checkbox und teste es nochmals. dann siehst du dass sich da der typ ändert.

Code: Alles auswählen

<html>
<head>
<script language="JavaScript">
function checkThis(){
   if(document.theform.box.checked){
      document.theform.button.disabled=false;
   } else {
      document.theform.button.disabled=true;
   }
alert(document.theform.box);
}
</script>
</head>
<body onLoad="javascript:checkThis();">
<form name="theform">
<input type="checkbox" name="box" value="bla" OnClick="javascript:checkThis();">
<input type="checkbox" name="box" value="blabla" OnClick="javascript:checkThis();">
<input type="submit" name="button" value="Submit">
</form>
</body>
</html>

versuchs mal damit:

Code: Alles auswählen

<html>
<head>
<script language="JavaScript">
function checkThis(){
   if(document.theform.box[0].checked){
      document.theform.button.disabled=false;
   } else {
      document.theform.button.disabled=true;
   }
}
</script>
</head>
<body onLoad="javascript:checkThis();">
<form name="theform">
<input type="checkbox" name="box" value="bla" OnClick="javascript:checkThis();">
<input type="checkbox" name="box" value="blabla" OnClick="javascript:checkThis();">
<input type="submit" name="button" value="Submit">
</form>
</body>
</html>

document.theform.box wird über einen index angesprochen (document.theform.box[0]) da mehrere objekte mit dem selben namen (box) existieren.

jetzt müsstest du einfach eine schleife schreiben die alle checkboxen abfragt ob sie selektiert sind und wenn keine selektiert ist, den button deaktivieren.

oliver12345 · Beitrag von **oliver12345** » 15.08.2005 14:15

fagus hat geschrieben:jetzt müsstest du einfach eine schleife schreiben die alle checkboxen abfragt ob sie selektiert sind und wenn keine selektiert ist, den button deaktivieren.

Aha, verstehe. Aber wie programmiere ich in JavaScript Schleifen? Ich kenne mich damit nicht aus. Wenn ich den fertigen Code sehe, verstehe ich das Ganze ja, aber wenn ich sowas selbst programmieren muss, habe ich keine Vorstellung von dem, was ich eintippen muss.

fagus · Beitrag von **fagus** » 15.08.2005 17:03

nun am besten machst du es etwa so:

Code: Alles auswählen


var button_checked = false;

for(i;i<document.theform.box.length;i++)
{
   if(!document.theform.box[i].checked)
   {
     button_checked = true;
   }
}
if(button_checked == false)
{
      document.theform.button.disabled=false;
 }
else
{
      document.theform.button.disabled=true;
}

ich hab den code jetzt aus dem kopf geschrieben und nicht getestet. du müsstest mal überprüfen ob document.theform.box.length tatsächlich die anzahl checkboxen ausgibt, die du in deinem html-file verwendest. es wäre auch möglich dass nach length zwei klammern hin kommen... wie schon gesagt, ich bin da nicht mehr so erfahren (programmiere fast nur noch php).
wo du auch mal noch nachschauen könntest wäre bei selfhtml. die haben eine sehr gute javascript-referenz. die hatte mir damals sehr geholfen, als ich meine ersten erfahrungen machte mit programmieren und mit javascript

.
http://de.selfhtml.org

oliver12345 · Beitrag von **oliver12345** » 15.08.2005 17:31

@ fagus

Funktioniert leider nicht (auch nicht mit den Klammer hinter document.theform.box.length). Habe ich es überhaupt richtig eingefügt?

Code: Alles auswählen

<html>
<head>
<script language="JavaScript">
function checkThis(){
var button_checked = false;

for(i;i<document.theform.box.length;i++)
{
   if(!document.theform.box[i].checked)
   {
     button_checked = true;
   }
}
if(button_checked == false)
{
      document.theform.button.disabled=false;
 }
else
{
      document.theform.button.disabled=true;
} 
</script>
</head>
<body onLoad="javascript:checkThis();">
<form name="theform">
<input type="checkbox" name="box" value="bla" OnClick="javascript:checkThis();">
<input type="checkbox" name="box" value="blabla" OnClick="javascript:checkThis();">
<input type="submit" name="button" value="Submit">
</form>
</body>
</html>

Bei SELFHTML habe ich schon nachgesehen, aber das bringt mich in dem Fall nicht sehr weit.

fagus · Beitrag von **fagus** » 15.08.2005 18:19

doch die anweisung mit dem box.length war richtig (und hättest du auch selber herausfinden können mit einem einfachen test mit alert(). dazu hättest du allerdings sonst allen javascriptcode auskommentieren müssen).

hier der code (war eigentlich gar nicht so schwierig, doch wenn man lange nicht mehr programmiert stolpert man wieder über die dümmsten kleinigkeiten):

Code: Alles auswählen

<html>
<head>
<script language="JavaScript">
function checkThis()
{
	var button_checked = false;

	for(var i=0;i<document.theform.box.length;i++)
	{
	   if(document.theform.box[i].checked==true)
	   {
	     button_checked = true;
		 //alert('buton_checked: '+button_checked);
	   }
	}
	//alert(button_checked);
	if(button_checked == false)
	{
	      document.theform.button.disabled=true;
	 }
	else
	{
	      document.theform.button.disabled=false;
	}
}
</script>
</head>
<body onLoad="javascript:checkThis();">
<form name="theform">
<input type="checkbox" name="box" value="bla" OnClick="javascript:checkThis();">
<input type="checkbox" name="box" value="blabla" OnClick="javascript:checkThis();">
<input type="submit" name="button" value="Submit">
</form>
</body>
</html>

oliver12345 · Beitrag von **oliver12345** » 15.08.2005 22:26

@ fagus

Ich danke dir vielmals für deine Hilfe! Jetzt funktioniert es!

Ich wäre da nicht drauf gekommen.