[JS] formulier opties invisible -> visible - Softwareontwikkeling

dinsdag 9 november 2004 14:22

Acties:

Verwijderd

Topicstarter

Heey jongens,

Ik heb nu al een tijdje zitten proberen en heb google en de got-search al gehad, maar ik kom niet echt bruikbare dingen tegen. Ook op internet kom ik geen voorbeeld tegen van wat ik wil maken, dus de source-code bekijken en dan op ideeën komen is ook (nog) niet mogelijk.

Ik wil dus hetvolgende maken. Ik heb een formulier waarin bedrijven verschillende opties kunnen aanvinken.
Stel het werkt alsvolgt:
Je wilt appels bestellen. Dan vink je het vakje voor appels aan. Op dat moment moeten er nog drie opties bijkomen, zogenaamde radiobuttons, zodat je kunt kiezen tussen bronze, silver en gold kwaliteit. Zodra het vinkje weer uit wordt gezet, moeten die opties dus ook weer invisible gemaakt worden.

Ik snap er niets van, maar ik denk dat het met JavaScript moet. Heeft misschien iemand een voorbeeld hiervan? Ik zou het erg op prijs stellen.

Bijvoorbaat dank!

SnoRt

dinsdag 9 november 2004 14:24

Acties:

André

Analytics dude

Zet er een <div> omheen met een id, daarna kun je met

code:

1	document.getElementById("idvandiv").style.display="block";

en display="none" de boel laten verdwijnen en tevoorschijn halen. Maar ga ook eens in de saerch kijken, hier zijn duizenden voorbeelden van te vinden.

[ Voor 13% gewijzigd door André op 09-11-2004 14:25 ]

dinsdag 9 november 2004 14:36

Acties:

Verwijderd

Topicstarter

André schreef op 09 november 2004 @ 14:24:
Zet er een <div> omheen met een id, daarna kun je met
code:
1
document.getElementById("idvandiv").style.display="block";
en display="none" de boel laten verdwijnen en tevoorschijn halen. Maar ga ook eens in de saerch kijken, hier zijn duizenden voorbeelden van te vinden.

heey dank je wel .. ik heb de search gebruikt, maar niet tegengekomen wat ik wil. Ik vind dus alleen maar dat er een layer overheen moet zetten en dit met die <div>'s enzo. Maar ik wil gewoon dat ze eerst invisible zijn.. Dus dat je wel de radiobuttons ziet, maar niet kunt invullen,.. zodra er dan een vinkje aan gaat, dat je ze dan WEL in kunt vullen.

en dat werkt niet met zo'n <div>.

dinsdag 9 november 2004 14:40

Acties:

Verwijderd

Topicstarter

ik zie dus dat ik "disabled" moet gebruiken. Ik zal nog even zoeken en indien ik iets vind hier de link plaatsen, dan kan het topic gesloten worden, anders dan moeten we maar achter het antwoord zien te komen

dinsdag 9 november 2004 15:08

Acties:

André

Analytics dude

Even kant en klaar op een dienblad geserveerd:

code:

<html>
  <head>
    <title>Test</title>
    <script type="text/javascript">
      function showhide(obj, id)
      {
        o = document.getElementById(id);
        if (obj.checked) { o.style.display = "block"; }
        else { o.style.display = "none"; }
      }
    </script>
  </head>
  <body>
    <input type="checkbox" onclick="showhide(this, 'bla')">Test
    <div id="bla" style="display:none">
      Rege1 1<br>
      Rege1 2<br>
      Rege1 3<br>
    </div>
  </body>
</html>

dinsdag 9 november 2004 15:13

Acties:

Verwijderd

Topicstarter

André schreef op 09 november 2004 @ 15:08:
Even kant en klaar op een dienblad geserveerd:

code:

<html>
  <head>
    <title>Test</title>
    <script type="text/javascript">
      function showhide(obj, id)
      {
        o = document.getElementById(id);
        if (obj.checked) { o.style.display = "block"; }
        else { o.style.display = "none"; }
      }
    </script>
  </head>
  <body>
    <input type="checkbox" onclick="showhide(this, 'bla')">Test
    <div id="bla" style="display:none">
      Rege1 1<br>
      Rege1 2<br>
      Rege1 3<br>
    </div>
  </body>
</html>

jeps dit werkt, klopt.. maar nu zijn die dingen helemaal niet te zien.. plus dat het geen tekst moet zijn, maar radiobuttons. Erg mooi hoor, begrijp me niet verkeerd, maar het moeten dus radiobuttons als in:

<input name="apples" type="radio" value="bronze" disabled>

die verandert moeten worden naar:

<input name="apples" type="radio" value="bronze">

is daar niet iets gemakkelijks voor?

dinsdag 9 november 2004 15:18

Acties:

André

Analytics dude

Dienblad 2:

code:

<html>
  <head>
    <title>Test</title>
    <script type="text/javascript">
      function showhide(obj, id)
      {
        o = document.getElementById(id);
        if (obj.checked) { o.disabled = true; }
        else { o.disabled = false; }
      }
    </script>
  </head>
  <body>
    <input type="checkbox" onclick="showhide(this, 'bla')">Test
    <p>
    <input type="radio" id="bla">A<br>
  </body>
</html>

Ga je ook nog wat zelf proberen?

dinsdag 9 november 2004 15:30

Acties:

Verwijderd

Topicstarter

ja ik ben al heel de dag bezig met een heel groot vaag script en daar begrijp ik niet zoveel van, maar jouw script daarintegen werkt heel goed. ik heb hem om weten te bouwen, echter krijg ik het niet voor elkaar om ipv 1 radiobutton het id te geven aan nog 2 .. zodat er 3 radio buttons tegelijk aan en uit gaan, beetje gek. je zou zeggen dat elke radiobutton met dat id nu aan of uit zou gaan.. nog maar even verder proberen, of moet ik dan iets aan het javascript toevoegen?

dinsdag 9 november 2004 15:36

Acties:

André

Analytics dude

Dienblad 3:

code:

<html>
  <head>
    <title>Test</title>
    <script type="text/javascript">
      function showhide(obj, id)
      {
        o = document.getElementById("formulier").elements[id];
        d = false;
        if (obj.checked) { d = true; }

        for (var i = 0; i < o.length; i++)
        { o[i].disabled = d; }
      }
    </script>
  </head>
  <body>
    <input type="checkbox" onclick="showhide(this, 'bla')">Test
    <p>
    <form id="formulier">
      <input type="radio" name="bla">A<br>
      <input type="radio" name="bla">B<br>
      <input type="radio" name="bla">C<br>
    </form>
  </body>
</html>

Pagina: 1

Reageer