Förhindra submit om inga checkboxar är ifyllda

Jaha, då var man här igen... :)

Jag har en massa poster med checkboxar. Ifylld checkbox raderar posten vid submit.

Hur gör jag så att det inte går att submitta och en alert kommer upp när jag försöker submitta utan att kryssa i någon checkbox...

Fan, vilken fin svengelska...

Mvh
henrik

Med vetskap om granntråden i ASP-forumet, utgår jag från att checkboxarna har samma namn:

function validate(frm){
  var cb = frm.elements["checkbox"],
      i  = cb.length;

  while (i--){
    if (cb[i].checked){ return true }
  }

  alert("!");

  return false;
}

:)

Hur kombinerar jag den med den här som ligger på submit-knappen:

onclick="return confirm('Är du säker på att du vill radera uppdragen?');"

Mvh
henrik

function validate(frm){
  var cb = frm.elements["checkbox"],
      i  = cb.length;

  while (i--){
    if (cb[i].checked){ return confirm('Är du säker på att du vill radera uppdragen?') }
  }

  alert("!");

  return false;
}

onsubmit="return validate(this)"

:)

hejsan! :)

Fungerar fint!

Spelar det någon roll om man använder onsubmit på formuläret eller onclick på kanppen?

Jag ska nämligen ha flera knappar i samma formulär; "radera uppdrag" , "slå ihop uppdrag"

Kan tänka mig att det bli lite strul om ajg använder onSubmit på formuläret då...

Mvh
henrik

Nej, det spelar ingen roll. Testa istället

onclick="return validate(this.form)"

:)

Perfekt!!

Mvh
henrik :)

Tja
Har lite problem med ovanstående kod.
Får fel att 'length' är null eller inte ett objekt.

Såhär ser mitt förmulär ut:

<form name="frmStepXX" action="default.asp?mP=competition_notification" method="post">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="bTxt" style="width: 25px;"><img src="pics/spacer.gif" alt=""></td>
<td class="bTxt" style="font-weight: bold; width: 200px;">Pass 1 Lördag 21/5-06 09.00</td>
<td class="bTxt" style="font-weight: bold; width: 75px;">Kön</td>
<td class="bTxt" style="font-weight: bold; width: 150px;">Ålder</td>
<td class="bTxt" style="font-weight: bold; width: 150px;">Övrigt</td>
</tr>

<tr>
<td class="bTxt"><input type="checkbox" name="gId" value="1"></td>
<td class="bTxt">50m Frisim</td>
<td class="bTxt">Herr</td>
<td class="bTxt">10 -12</td>
<td class="bTxt">vsdvdsv</td>
</tr>
<tr>
<td colspan="5" style="height: 10px;"><img src="pics/spacer.gif" alt=""></td>
</tr>
<tr>
<td class="bTxt" style="width: 25px;"><img src="pics/spacer.gif" alt=""></td>
<td class="bTxt" style="font-weight: bold; width: 200px;">Pass 2 Lördag 21/5-06 13.00</td>

<td class="bTxt" style="font-weight: bold; width: 75px;">Kön</td>
<td class="bTxt" style="font-weight: bold; width: 150px;">Ålder</td>
<td class="bTxt" style="font-weight: bold; width: 150px;">Övrigt</td>
</tr>
<tr>
<td class="bTxt"><input type="checkbox" name="gId" value="2"></td>
<td class="bTxt">50m Frisim</td>
<td class="bTxt">Dam</td>
<td class="bTxt">14-16</td>
<td class="bTxt"><i>Ingen övrig info.</i></td>

</tr>
<tr>
<td colspan="5" class="bTxt" style="text-align: right; padding-top: 30px; padding-right: 0px;"><input type="hidden" name="cId" value="1">
<input type="hidden" name="anmId" value="18">
<input type="hidden" name="step" value="3">
<input type="button" onclick="return postAnmStep3(this.form);" value="Nästa Steg" class="btn"></td>
</tr>
</table>
</form>

Och funktionen:

function postAnmStep3(frm){
  var cb = frm.elements["checkbox"],
      i  = cb.length;

  while (i--){
    if (cb[i].checked){ return confirm('Vill du fortsätta?\nAnmälan är bindande.\n') }
  }

  alert("Du måste välja minst en gren.\n");

  return false;
}

Kan funktionen ligga i en separat .js-fil, eller måste den ligga på samma sida som formuläret?

Tack på förhand

Tjena Micke! :)

Koden ovan förutsätter att checkboxarna heter "checkbox". Eftersom dina heter "gId" får vi göra följande ändring:

var cb = frm.elements[[i][b]"gId"[/b][/i]],

Kul att fler får nytta av denna fina funktion.. (y)

//Henrik

Peter S skrev:

Koden ovan förutsätter att checkboxarna heter "checkbox".

Jasså, jag trodde att checkbox innebar att den skulle "hämta" alla input-element av typen checkbox.

Tack!

Hej igen!
Nu har jag nästan fått till det.
Det funkade fr¨n början, men i vanlig ordning ska man dit och pilla och sen funkar det inte längre ;)

function postAnmStep3(frm){
  var cb = frm.elements["gId"],
      i  = cb.length;

  while (i--){
    if (cb[i].checked){
		if(return confirm('Vill du slutföra din anmälan?\n')){
			frm.submit();
		}
	}
  }

  alert("Du måste välja minst en gren.\n");

  return false;
}

Någon som ser nått fel i koden ovan?
Jag anropar scriptet med en button och inte en submit.

Tack!

function postAnmStep3(frm){
  var cb = frm.elements["gId"],
      i  = cb.length;

  while (i--){
    if (cb[i].checked){
		if(confirm('Vill du slutföra din anmälan?\n')){
			frm.submit();
			return;
		}
	}
  }

  alert("Du måste välja minst en gren.\n");
}

Har råkat ut för några problem med ovanstående.
Finns det bara en gren att välja och man väljer den, kommer ändå "Du måste välja minst en gren..." upp.
Vidare så om man väljer ett par och sen på "vill du slutföra", om man där trycker "avbryt", så dyker "du måste välja minst en gren" upp.

Går det här att fixa till?
Tack!

Så här kan du skriva...

function postAnmStep3(frm)
{
	var cb = frm.gId;
	
	if (!cb)
		cb = new Array();
	else if (!cb.length)
		cb = new Array(cb);
	
	for (var i = 0; i < cb.length; i++)
	{
		if (cb[i].checked)
			return confirm("Vill du slutföra din anmälan?\n");
	}
	
	alert("Du måste välja minst en gren.\n");
	return false;
}

<form name="frmStepXX" action="default.asp?mP=competition_notification" method="post" onSubmit="return postAnmStep3(this);">
<input type="submit" value="Nästa Steg" class="btn">