11 berichten aan het bekijken - 1 tot 11 (van in totaal 11)
  • Q:
    Bijdrager
    Yakke

    Grey out van textfield in form met JavaScript

    Ik gebruik JavaScript om een textfield binnen een form te disablen zolang een bepaalde checkbox niet aangevinkt is.
    Wanneer de pagina geladen wordt, is het textfield inactief.
    Wanneer je dan de checkbox aanvinkt, wordt het textfield actief.
    Tot hier alles zoals gewenst.
    Maar als je dan de checkbox terug uitvinkt, blijft het textfield actief, hoe kan ik dat vermijden?

    Ik heb deze code gevonden op het web en een beetje aangepast naar mijn situatie.
    Ik ken voor de rest niets van JavaScript, dus best mogelijk dat het een triviale fout is.

    [code:1:b5db95f33d]<input type="checkbox" id="id2" name= "interesse" value="ja" onchange="check();" <?php if ($_POST[’interesse’]=="ja") {echo "checked="checked"";}?>>Ik heb interesse
    <br>
    Aantal exemplaren: <input type="text" id="id3" disabled="disabled" name="aantal_exemplaren" size="5" value="<? echo $_POST["aantal_exemplaren"]; ?>">

    <script type="text/javascript">
    function check() {
    if (document.getElementById(’id2’).value == ‘ja’)
    document.getElementById(’id3’).disabled = false;
    else
    document.getElementById(’id3’).disabled = true;
    }
    </script>[/code:1:b5db95f33d]

    Bijdrager
    www.project-euh.com

    probeer
    [code:1:3a7e6cb55f]if (document.getElementById(’id2’).checked )[/code:1:3a7e6cb55f]

    De value is namelijk altijd “ja” of ie nu aangevinkt is of niet.

    Bijdrager
    Yakke

    Bedankt! Het werkt nu.

    In de code die ik op het web gevonden had, was het geen checkbox maar een select, vandaar dat ik die fout gemaakt heb.

    Bijdrager
    kaydie

    Omdat document.getElementById(‘id2’).checked altijd true of false is kun je het ook zo doen:

    [code:1:0dc28d0e6a]function check() {
    document.getElementById(’id3’).disabled = document.getElementById(’id2’).checked;
    }[/code:1:0dc28d0e6a]

    of op het change event van id2:
    [code:1:0dc28d0e6a]onchange="document.getElementById(’id3’).disabled=this.checked;"[/code:1:0dc28d0e6a]

    :wink:

    Bijdrager
    Yakke

    Bedankt, dat is effectief wat korter, maar doet net het tegenovergestelde?

    Bijdrager
    kaydie

    :oops: … zo dan maar?
    [code:1:1c6e3ad3c6]function check() {
    document.getElementById(’id3’).disabled = !document.getElementById(’id2’).checked;
    }
    [/code:1:1c6e3ad3c6]

    Bijdrager
    Yakke

    Bedankt, dat werkt :)

    Nog een bijkomende vraag:
    wanneer mensen in de form velden verkeerd of niet invullen, wordt de pagina herladen voorzien van de nodige meldingen en de woorden bij de desbetreffende velden rood gekleurd.
    De inhoud van alle velden die al ingevuld waren wordt daarbij uiteraard terug getoond.

    Maar bij dit textfield dat enkel actief mag zijn indien het checkbox is aangevinkt gaat het mis.
    Indien voor het herladen van de pagina het checkbox aangevinkt is, en het textfield dus actief is, blijft na het herladen het checkbox aangevinkt (dankzij <?php if ($_POST[‘interesse’]==”ja”) {echo “checked=\”checked\””;}?>), maar is het textfield inactief , omdat er dan nog geen onChange event geweest is.
    De gebruiker moet dan de checkbox uitvinken en terug aanvinken vooraleer de inhoud van het textfield gewijzigd kan worden.
    Hoe kan dat opgelost worden?

    Bijdrager
    kaydie

    Net als bij id2?
    [code:1:98a2890d08]
    <?php if ($_POST[’interesse’]!="ja") {echo "disabled="disabled"";}?>
    [/code:1:98a2890d08]

    Bijdrager
    Yakke

    Thanx, werkt perfect!

    Ik had ook even aan die oplossing gedacht, maar dacht dat het niet zou werken omdat de php code pas wordt uitgevoerd wanneer er op submit geklikt wordt.
    Maar nu ik er nog eens over nadenk begrijp ik het wel en is het allemaal erg logisch.

    Bedankt voor alle hulp, ik heb nu helemaal wat ik wou.

    Bijdrager
    kaydie

    Nog een php tipje om je code tussen de html kort te houden…

    Als je short_open_tag directive aan staat in je php configuratie kan je de code tussen de php flink inkorten.
    Door slim gebruik van een ternary operator ism een php shorthand tag kan je de code dan alsvolgt neerzetten

    [code:1:2ded2eb0a3]<?=$_POST[’interesse’]!="ja"?"disabled="disabled"":""?>[/code:1:2ded2eb0a3]

    Nader verklaard:
    [code:1:2ded2eb0a3]
    <?= // <?php echo
    $_POST[’interesse’]!="ja" // statement…
    ? "disabled="disabled"" // waarde ‘if true’
    : "" // waarde ‘if false’
    ?>
    [/code:1:2ded2eb0a3]

    Bijdrager
    Yakke

    Bedankt voor de tip, maar ik verkies toch de langere versie vanwege de betere leesbaarheid voor mij als onervaren programmeur.

11 berichten aan het bekijken - 1 tot 11 (van in totaal 11)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.