Avatar billede dotcom1 Nybegynder
16. april 2012 - 13:23 Der er 7 kommentarer og
1 løsning

Ombryde dynamisk genererede radio buttons i to eller flere kolonner

Hej.

Jeg har en række med dynamisk genererede radio buttons. Der kan være få eller mange. Hvis der er mange, bliver listen hurtigt uoverskuelig. Kan man scripte en løsning, der ombryder listen af radio buttons i kolonner? Altså sådan at der laves en div eller en celle i en tabel ved fx. hver 5. radio button?

Min kode ser fx. sådan ud:

<form name="test_search" action="/index.html" method="post" id="test_level_search">
      <input name="search_test_level" value="31803" type="radio"> 1<br />
      <input name="search_test_level" value="31797" type="radio"> 2<br />
      <input name="search_test_level" value="31795" type="radio"> 3<br />
      <input name="search_test_level" value="31801" type="radio"> 4<br />
      <input name="search_test_level" value="13058" type="radio"> 5<br />
      <input name="search_btn" class="button" value="Søg" type="submit">
</form>
Avatar billede olebole Juniormester
16. april 2012 - 15:21 #1
<ole>

Mon ikke det er noget, du udskriver dynamisk? Så er serveren det mest oplagte sted at formatere elementerne

/mvh
</bole>
Avatar billede dotcom1 Nybegynder
16. april 2012 - 15:26 #2
Hej Ole.
Har desværre kun client-side adgang i dette tilfælde...
Avatar billede olebole Juniormester
16. april 2012 - 16:04 #3
- og formen ser præcis ud, som du viser den?
Avatar billede dotcom1 Nybegynder
16. april 2012 - 19:34 #4
Ja. Bortset fra at der nogen gange kan være flere, lignende radio buttons der nedad...
Avatar billede olebole Juniormester
16. april 2012 - 20:38 #5
Det kunne være noget i stil med:

<style type="text/css">
body {
    margin: 0;
    padding: 0;
    font: 12px verdana, arial, sans-serif;
}
#test_level_search div {
    display: inline-block;
    vertical-align: top;
    margin: 6px;
    border: 1px solid red;
}
#test_level_search div label {
    display: block;
}
</style>

<form name="test_search" action="/index.html" method="post" id="test_level_search">
      <input name="search_test_level" value="31803" type="radio"> 1<br />
      <input name="search_test_level" value="31797" type="radio"> 2<br />
      <input name="search_test_level" value="31795" type="radio"> 3<br />
      <input name="search_test_level" value="31801" type="radio"> 4<br />
      <input name="search_test_level" value="13058" type="radio"> 5<br />
      <input name="search_test_level" value="31801" type="radio"> 6<br />
      <input name="search_test_level" value="31792" type="radio"> 7<br />
      <input name="search_test_level" value="31793" type="radio"> 8<br />
      <input name="search_test_level" value="31804" type="radio"> 9<br />
      <input name="search_test_level" value="13055" type="radio"> 10<br />
      <input name="search_btn" class="button" value="Søg" type="submit">
</form>

<script type="text/javascript">
var elmF = document.getElementById("test_level_search"),
aRads = elmF.getElementsByTagName("input"),
numRads = aRads.length;
numDivs = Math.floor(numRads/5),
oFrag = document.createDocumentFragment(),
elmDiv = document.createElement("div"),
elmLbl = null;

oFrag.appendChild(elmDiv);
aRads = Array.prototype.slice.call(aRads, 0);
for (var i=0; i<numRads; i++) {
    if (aRads[i].type!="radio") continue;
    if (i>0 && i%5==0) {
        elmDiv = document.createElement("div");
        oFrag.appendChild(elmDiv);
    }
    elmLbl = document.createElement("label");
    elmLbl.appendChild(aRads[i].nextSibling);
    elmLbl.insertBefore(aRads[i], elmLbl.firstChild);
    elmDiv.appendChild(elmLbl);
}
while (elmF.firstChild && elmF.firstChild.nodeName.toLowerCase()!="input") {
    elmF.removeChild(elmF.firstChild);
}
elmF.insertBefore(oFrag, elmF.firstChild);
</script>
Avatar billede dotcom1 Nybegynder
18. april 2012 - 09:36 #6
Hej Ole.

Det virker bare perfekt! Tusind tak for hjælpen. Læg et svar hvis du vil have points.

Mvh.
Avatar billede olebole Juniormester
18. april 2012 - 12:49 #7
Ellers tak, jeg samler ikke point. Læg selv et svar og accepter det, så tråden lukkes  =)
Avatar billede dotcom1 Nybegynder
18. april 2012 - 12:52 #8
Ok, tak tak.
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

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