[JavaScript] Radio-button ellende..... - Softwareontwikkeling

woensdag 12 februari 2003 04:36

Acties:

Verwijderd

Topicstarter

Ik zit hier op mijn werk en wilde dus snel even een simpel HTML bestandje in elkaar draaien, krijg ik iets niet voor elkaar met de radio-buttons.

De HTML zit zo in elkaar:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <head>
    <script type="text/javascript">
      <!--
        function formsubmit() {
          alert(document.questionform.sex.value);
        }
      //-->
    </script>
    <noscript>I'm sorry! Your browser either doesn't support Javascript or has it currently disabled.</noscript>
  </head>
  <body>
    <form id="questionform" name="questionform">
      <input type="radio" id="sex" name="sex" value="male" checked="checked" />male<br />
      <input type="radio" id="sex" name="sex" value="female" />female<br />
      <input type="button" onclick="javascript:formsubmit()" value="submit" />
    </form>
  </body>
<html>

Nu wil ik dat de value van de geselecteerde radio-button in de alert-box komt te staan.

Maar met deze code kan ik op die knop blijven rammen wat ik wil, ik krijg steeds in mijn alert-box te zien dat het object undefined is

Ik snap er echt helemaal niks van, want het zou toch moeten werken zo volgens mij ....

woensdag 12 februari 2003 08:31

Acties:

crisp

Devver

Pixelated

Meerdere radiobuttons met dezelfde name (dezelfde id is uit den boze!) vormen een array; deze array moet je door lopen totdat je het item vind dat de checked property aan heeft:

JavaScript:

var el = document.forms['questionform'].elements['sex'];
for (var i = 0; i < el.length; i++) {
  if (el[i].checked) {
    alert (el[i].value);
    break;
  }
}

Intentionally left blank

woensdag 12 februari 2003 20:48

Acties:

Verwijderd

Topicstarter

crisp schreef op 12 February 2003 @ 08:31:
Meerdere radiobuttons met dezelfde name (dezelfde id is uit den boze!) vormen een array; deze array moet je door lopen totdat je het item vind dat de checked property aan heeft:

Waarom is id uit den boze? In XHTML vliegt (correct me if i'm wrong) het name attribuut er helemaal uit en wordt vervangen door id.

Toch? Voor compatibiliteit met oudere browsers geef je dan zowel een name als id mee, zoals ik hier gedaan heb.

woensdag 12 februari 2003 21:08

Acties:

Verwijderd

Verwijderd schreef op 12 February 2003 @ 20:48:

Waarom is id uit den boze? In XHTML vliegt (correct me if i'm wrong) het name attribuut er helemaal uit en wordt vervangen door id.

Toch? Voor compatibiliteit met oudere browsers geef je dan zowel een name als id mee, zoals ik hier gedaan heb.

Dat heb je dan verkeerd begrepen. Voor vrijwel alle elementen verdween het name attribuut, omdat er niet meerdere elementen met diezelfde name mochten zijn. Denk aan formulieren bijvoorbeeld. In het Document Object Model moet document.forms.namedItem('form_id') naar een HTMLFormElement verwijzen, niet naar een HTMLCollection

Echter mogen er wel meerdere formulieren in één document staan, zolang ze niet genest zijn, en niet dezelfde id hebben. En die formulieren mogen invoer-elementen bevatten (input, select, textarea), die allemaal een name attribuut hebben. In form A mag je heus een element dezelfde naam geven als een element in form B, aangezien die verder niets met elkaar te maken hebben.

Je mag dus 2 of meer exact dezelfde formulieren op een pagina zetten, zolang er maar geen id meerdere keren gebruikt wordt.

woensdag 12 februari 2003 21:45

Acties:

Verwijderd

voila:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HEAD>
<TITLE>GoT Sample</TITLE>
<!--
© Mabit 2003
-->
  <script type="text/javascript">
      <!--

    function formsubmit() {
        for (counter = 0; counter < form1.sex.length; counter++)
            {
                if (form1.sex[counter].checked)
                        alert(form1.sex[counter].value);
                }
    }
  //-->
    </script>
    <noscript>I'm sorry! Your browser either doesn't support Javascript or has it currently disabled.</noscript>

</HEAD>
<BODY>
<FORM  NAME="form1" METHOD="POST">
    <INPUT TYPE="radio"  NAME="sex"  VALUE="Male" >
    <INPUT TYPE="radio"  NAME="sex"  VALUE="Female" >
    <INPUT TYPE="submit" NAME="Test" VALUE="Test" onClick="javascript:formsubmit()">
</FORM>
</BODY>
</HTML>

woensdag 12 februari 2003 21:50

Acties:

Verwijderd

Topicstarter

Ok, weer wat geleerd

Ben nu bezig met de XHTML validator van W3C en alles ziet er goed uit tot nu toe.

Vraag ik me alleen af waarom hij dit niet pakt:

code:

<select name="age">
  <script type="text/javascript">
    <!--
      for (var i=0; i<=99; i++) {
        document.writeln("<option value='" + i + "'>" + i + "</option>");
      }
    //-->
  </script>
</select>

Volgens de validator mag ik daar geen <script> tag gebruiken, maar hoe moet ik het anders oplossen?

woensdag 12 februari 2003 21:53

Acties:

Verwijderd

options toevoegen via dom, is wel langzamer, maar als je stict gebruikt valideert het daarna wel... of je gaat via de serverside oplossing...

woensdag 12 februari 2003 21:56

Acties:

Verwijderd

in XHTML ( en XML ) zul je de code moeten escapen met CDATA sections:

<![CDATA[ /*script */ ]]>

Het mooiste is altijd de verschillende talen gescheiden houden, en dus JS en CSS in aparte bestandjes zetten

woensdag 12 februari 2003 22:07

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op 12 February 2003 @ 21:56:
in XHTML ( en XML ) zul je de code moeten escapen met CDATA sections:

[CDATA[ /*script */ ]]

Het mooiste is altijd de verschillende talen gescheiden houden, en dus JS en CSS in aparte bestandjes zetten

Hmmm, ok, klinkt heel logisch.
Maar  is toch ook commentaar in XML?

Maar hij zeurt hier niet over het niet escapen van de code, hij vindt gewoon dat de script-tags op een plaats staan waar het niet mag (tussen de select dus), vind het maar raar...

Net ff geprobeerd en met de select ook binnen het script-block (document.writeln("<select>")) pakt hij het wel gewoon. Script-tags mogen blijkbaar niet binnen een <select> element.