Avatar billede Slettet bruger
13. februar 2007 - 14:41 Der er 14 kommentarer og
2 løsninger

Validering og check af x-antal checkboxe i formular

Jeg skal have lavet et javascript på x-antal række af 3 checkboxe med samme navn.
Disse checkboxe skal faktisk agere akkurat som radiobuttons, men jeg ønsker ikke at bruge radiobuttons.

Forestil jer en tipskupon / spørgeskema, hvor man kan afkrydse Ja, Nej eller Måske i hver enkelt række.

Hvis jeg på en række fx først klikker Ja og derefter Nej, skal afkrydsningen fra "Ja" desuden fjernes. Som det ville ske på en radiobutton.

Når man så til sidst submitter formularen skal følgende ting være overholdt, ellers skal der laves en alert.
    - I hver række skal en tjekboks og kun en tjekboks være afkrydset
    - Der skal være afkrydset en tjekboks i samtlige rækker

Håber nogle kan hjælpe :)
Avatar billede kalp Novice
13. februar 2007 - 16:55 #1
Her har du kode til det der:)
Du skal selvfølgelig bare selv tilføje flere rækker.. tilpasse det 100% til dit behov.

men nu har jeg knækket skalden for dig.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script type="text/javascript">
function clickCheckbox(uncheckone, unchecktwo,checked,form)
  {
  form.elements[uncheckone].checked = false
  form.elements[unchecktwo].checked = false
  form.elements[checked].checked = true
  }
</script>


</head>

<body>
<table width="200" border="1">
  <tr>
    <td><form name="0">
      Et
      <input type="checkbox" id="raekkeet" name="raekkeet" value="checkbox" onClick="clickCheckbox(1,2,0,this.form)">
      To
      <input type="checkbox" id="raekkeet" name="raekkeet" value="checkbox" onClick="clickCheckbox(0,2,1,this.form)">
    Tre
    <input type="checkbox" id="raekkeet" name="raekkeet" value="checkbox" onClick="clickCheckbox(0,1,2,this.form)"></form></td>
  </tr>
  <tr>
    <td><form name="1">Et
      <input type="checkbox" name="raekketo" id="raekketo" value="checkbox1" onClick="clickCheckbox(1,2,0,this.form)">
To
<input type="checkbox" name="raekketo"  id="raekketo" value="checkbox1" onClick="clickCheckbox(0,2,1,this.form)">
Tre
<input type="checkbox" name="raekketo"  id="raekketo" value="checkbox1" onClick="clickCheckbox(0,1,2,this.form)"></form></td>
  </tr>
  <tr>
    <td><form name="2">Et
      <input type="checkbox" name="raekketre"  id="raekketre" value="checkbox2" onClick="clickCheckbox(1,2,0,this.form)">
To
<input type="checkbox" name="raekketre" id="raekketre" value="checkbox2" onClick="clickCheckbox(0,2,1,this.form)">
Tre
<input type="checkbox" name="raekketre" value="checkbox2" id="raekketre" onClick="clickCheckbox(0,1,2,this.form)"></form></td>
  </tr>
</table>
</body>
</html>
Avatar billede Slettet bruger
13. februar 2007 - 17:41 #2
Tak. Men der skal KUN være en <form>. På din version er der 3.
Derudover skal der også være en submit, hvorpå der bliver sikret at der er afkrydset 1 felt pr. række.
Avatar billede kalp Novice
13. februar 2007 - 19:06 #3
hvis du sætter et flueben som standard i de der checkbokses så er det problem løst.. for man kan ikke slettet markeringen bagefter, men kun flytte den.

ja der er flere forms og hvad er problemet?:)
du kan jo ligge det hele i endnu en form.. altså alle de andre og så kan man submitte den.. så burde du jo få alt med over.
Avatar billede Slettet bruger
13. februar 2007 - 19:13 #4
Jeg synes ikke det er en optimal løsning.

Andre der har nogle forslag?
Avatar billede kalp Novice
13. februar 2007 - 21:28 #5
Jeg har ikke lavet tjekket på om der er sat 1 kryds på hver række, men nu er der kun en form !


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript">
  function clickCheckbox(rowNameList,checkIt)
  {
    var list = document.getElementsByName(rowNameList)
    document.getElementById(checkIt.id).checked = true
    for ( i = 0; i < list.length ; i++ )
    {
    if(list[i].id != checkIt.id){
    document.getElementById(list[i].id).checked = false
    }
    }
  }
</script>

<script type="text/javascript">
  function submitForm()
  {
document.minForm.submit();
  }
</script>
</head>
<body>
<table width="200" border="1">
  <form name="minForm" id="minForm">
  <tr>
    <td>
      Et
      <input type="checkbox" name="raekkeet" id="raekkeetEt"  value="checkbox" onClick="clickCheckbox('raekkeet',raekkeetEt)">
      To
      <input type="checkbox" name="raekkeet" id="raekkeetTo"  value="checkbox" onClick="clickCheckbox('raekkeet',raekkeetTo)">
      Tre
      <input type="checkbox" name="raekkeet" id="raekkeetTre"  value="checkbox" onClick="clickCheckbox('raekkeet',raekkeetTre)">
    </td>
  </tr>
  <tr>
    <td>Et
      <input type="checkbox" name="raekketo" id="raekketoEt" value="checkbox1" onClick="clickCheckbox('raekketo',raekketoEt)">
To
<input type="checkbox" name="raekketo"  id="raekketoTo" value="checkbox1" onClick="clickCheckbox('raekketo',raekketoTo)">
Tre
<input type="checkbox" name="raekketo"  id="raekketoTre" value="checkbox1" onClick="clickCheckbox('raekketo',raekketoTre)"></td>
  </tr>
  <tr>
    <td>Et
      <input type="checkbox" name="raekketre"  id="raekketreEt" value="checkbox2" onClick="clickCheckbox('raekketre',raekketreEt)">
To
<input type="checkbox" name="raekketre" id="raekketreTo" value="checkbox2" onClick="clickCheckbox('raekketre',raekketreTo)">
Tre
<input type="checkbox" name="raekketre" id="raekketreTre" value="checkbox2" onClick="clickCheckbox('raekketre',raekketreTre)"><input name="send" type="Send" onclick="submit()" value="Send">
    </form></td>
  </tr>
</table>
</body>
</html>
Avatar billede kalp Novice
13. februar 2007 - 22:22 #6
Sådan! nu er det præcis som du vil have det!
og måske er det ikke verdens pæneste men tog i det mindste opgaven;) og jeg programmere slet ikke java script:)
men det her virker som du vil have det.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript">
  function clickCheckbox(rowNameList,checkIt)
  {
    var list = document.getElementsByName(rowNameList)
    document.getElementById(checkIt.id).checked = true
    for ( i = 0; i < list.length ; i++ )
    {
    if(list[i].id != checkIt.id){
    document.getElementById(list[i].id).checked = false
    }
    }
  }
</script>

<script type="text/javascript">
  function submitForm()
  {
var raekker = document.getElementById("minForm")
var mangler = new Boolean(true)
var counter = 1
for(i = 0; i < raekker.length; i++)
{
if(raekker[i].type == 'checkbox'){
if(counter > 3){
if(mangler == false){
mangler = true;
counter = 1
}
}
if(raekker[i].checked){
mangler = false
}
counter++
}

}
if(mangler == false)
{
document.minForm.submit();
}else{
alert('Du skal sætte et flueben i hver række!!')
}
  }
</script>
</head>
<body>
<table width="200" border="1">
  <form name="minForm" id="minForm">
  <tr>
    <td>
      Et
      <input type="checkbox" name="raekkeet" id="raekkeetEt"  value="checkbox" onClick="clickCheckbox('raekkeet',raekkeetEt)">
      To
      <input type="checkbox" name="raekkeet" id="raekkeetTo"  value="checkbox" onClick="clickCheckbox('raekkeet',raekkeetTo)">
      Tre
      <input type="checkbox" name="raekkeet" id="raekkeetTre"  value="checkbox" onClick="clickCheckbox('raekkeet',raekkeetTre)">
    </td>
  </tr>
  <tr>
    <td>Et
      <input type="checkbox" name="raekketo" id="raekketoEt" value="checkbox1" onClick="clickCheckbox('raekketo',raekketoEt)">
To
<input type="checkbox" name="raekketo"  id="raekketoTo" value="checkbox1" onClick="clickCheckbox('raekketo',raekketoTo)">
Tre
<input type="checkbox" name="raekketo"  id="raekketoTre" value="checkbox1" onClick="clickCheckbox('raekketo',raekketoTre)"></td>
  </tr>
  <tr>
    <td>Et
      <input type="checkbox" name="raekketre"  id="raekketreEt" value="checkbox2" onClick="clickCheckbox('raekketre',raekketreEt)">
To
<input type="checkbox" name="raekketre" id="raekketreTo" value="checkbox2" onClick="clickCheckbox('raekketre',raekketreTo)">
Tre
<input type="checkbox" name="raekketre" id="raekketreTre" value="checkbox2" onClick="clickCheckbox('raekketre',raekketreTre)"><input name="send" value="Send!" onclick="submitForm()"></form></td>
  </tr>
</table>
</body>
</html>
Avatar billede kalp Novice
15. februar 2007 - 00:22 #7
hmm... du er måske ikke helt enig?
Avatar billede roenving Novice
15. februar 2007 - 13:08 #8
-- i hvert fald kan jeg absolut anbefale, at man udfører valideringer onsubmit ved at benytte det event:

<form ... onsubmit="return validering(this);">

-- og:

function validering(f){
  var e = f.elements;

...

  return !mangler;
}
Avatar billede roenving Novice
15. februar 2007 - 13:11 #9
-- og I kan se en tipskupon her: http://www.eksperten.dk/spm/484188 !-)
Avatar billede Slettet bruger
15. februar 2007 - 21:39 #10
Jeg synes det ser fint ud.

Roenving -> Hvorfor er det smartere at benytte OnSubmit? Og hvordan konkret får jeg ændret Gawi's til at blive tilpasset til OnSubmit?

Tipskuponen benytter radio's. Det er jeg ikke interesseret i.
Avatar billede kalp Novice
16. februar 2007 - 01:50 #11
du retter bare denne linje

<form name="minForm" id="minForm">

til

<form name="minForm" id="minForm" onsubmit="submitForm();">


og denne skal også rettes fra

<input name="send" value="Send!" onclick="submitForm()">

til

<input type="submit" name="Submit" value="Send!">
Avatar billede kalp Novice
16. februar 2007 - 01:54 #12
muligvis skal denne faktisk skrives sådan her.

<form name="minForm" id="minForm" onsubmit="submitForm();return false;">

men ellers kan roenving måske komme med et eksempel.
er som sagt ikke javascript programmør, men lavede det til dig fordi der nok ikke var ret mange som ville tage opgaven og så for udfodringens skyld:-)
Avatar billede roenving Novice
17. februar 2007 - 14:23 #13
-- fordi det (såvidt jeg ved !-) ikke er alle browsere, der kan forstå afvisningen af submitten fra en knap ...

-- og så er der andre muligheder for at submitte, f.eks. ved tryk på Enter m.v., så det vil være rigtig smart at få den fanget under alle omstændigheder ...

-- desuden kan du ved at benytte keywordet this, få en direkte reference til den form, der skal ageres på ...

-- og endelig kan du direkte returnere om formen skal afsendes, jeg synes også at det ser grimt ud, at man bruger en .submit(), når man jo har direkte fat i tingen ...
Avatar billede kalp Novice
26. februar 2007 - 09:16 #14
smukkemanny >> går ud fra du har fået din løsning??
Avatar billede kalp Novice
24. juli 2007 - 17:09 #15
smukkemanny >>

du er aktiv herinde og alligevel kan du ikke finde ud af, at rydde op i dine gamle besvarede spørgsmål???????
Avatar billede Slettet bruger
24. juli 2007 - 18:18 #16
ups
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester