Javascript hangen aan een gedisablede button

[Wolf3D]

Ik kom er al een tijdje niet meer uit .. dus gooi mijn probleem eens hier neer:

Hoe kan ik javascript hangen aan een veld dat gedisabled is?

HTML:

<input disabled onClick="warning()" name="Opslaan" type="submit" id="Opslaan" value="Opslaan">

Het probleem is dat zodra ik een veld disable er ook helemaal niets meer mee gedaan kan worden. Ik heb diverse dingen geprobeerd, trucjes uitgehaald .. maar het lukt allemaal niet. Vooral FireFox wil niet meewerken.

Met het trucje hieronder krijg ik het nog wel voor elkaar in IE .. maar .. dus niet in Firefox:

HTML:

<div style="position:relative; left:0px; top:0px; height:20px; width:120px" onClick="warning()">
<input disabled onClick="warning()" name="Opslaan" type="submit" id="Opslaan" value="Opslaan">
</div>

Dus, hoe kan ik aan een gedisabled veld toch een javascript-actie hangen?

[whoami]

Javascript hoort thuis in W&G
-> W&G

[CrashOne]

Button enable'n, js aanhangen, disable'n?

document.getElementById('Opslaan').disabled = false;

insert js

document.getElementById('Opslaan').disabled = true;'

?

[sig69]

Ik denk eerder dat hij bedoeld dat als het veld disabled is, het onClick() event niet getriggered wordt.

[Wolf3D]

Dat bedoel ik inderdaad sig69...
Maar, het idee van CrashOne zou theoretisch gezien misschien ook een oplossing zijn, hoewel ik het hier nog niet werkend heb gekregen. Op een of andere manier wil ie het veld niet disablen via javascript op die manier...

[Verwijderd]

<a href="javascript:void(0);" onclick="javascript:actie();"><input type="button" disabled /></a>

?

[Wolf3D]

Het idee van CrashOne werkt niet. Zodra de button door javascript gedisabled wordt is er geen event meer aan deze button te hangen...

Met <a href..></a> eromheen werkt het wel ... in IE. Maar, helaas weer niet in Firefox.

[coubertin119]

Mithrandir had net hetzelfde probleem, en ik gaf 'm de raad een (voor de rest leeg) divje absoluut te positioneren boven de control, zodat die de onclick kan afvangen en dan de benodigde handelingen uitvoert. Volgens mij is een formcontrol nesten in een a ook fout, maar daar ben ik niet zeker van.

[djluc]

Kan je niet gewoon de opmaak van de button faken?

[Erkens]

Wat je kan doen is het "disable" effect nabootsen door de kleur te veranderen en je onclick handler zo te schrijven dat deze weet of de knop disabled is of niet.

[coubertin119]

djluc: Ja, en dan lekker alle mensen die JS hebben uitstaan helemaal geen mogelijkheden geven, terwijl het nu eerder een manier is om foute invoer te verijdelen (denk ik toch), en het is heel wat minder erg als dat niet lukt .

[Wolf3D]

Ja, het faken van een disable lijkt me ook niet waterdicht idd.

Ik zal nog wat meer uitleg geven bij het stukje waar ik mee bezig ben:
Mensen moeten een formulier invullen, en vervolgens een vinkje plaatsen waarmee ze aangeven de algemene voorwaarden gelezen te hebben. Zodra er een vinkje staat wordt de submit-knop ge-enabled.
Zolang dit vinkje nog niet geplaatst is, en de knop gedisabled is, moeten mensen een waarschuwing krijgen zodra ze toch op de (uitgeschakelde) knop klikken.
Dit is voor IE misschien onlogisch, omdat het duidelijk is dat de knop inactief is, maar bijv in FireFox .. is het verschil tussen enabled en disabled erg klein, en zie zelfs ik het verschil niet.

[Verwijderd]

Dan zou ik met idd met css de knop opmaken als deze disabled is ... gewoon met css dus onderscheid maken tussen enabled en disabled ...lijkt me het handigst.

[Wolf3D]

Als het ook mogelijk is de knop zo op te maken dat het niet meer lijkt alsof ie ingedrukt wordt .. dan is het een optie, maar volgens mij is dat niet mogelijk.

Om ook nog ff te reageren op de tip van coubertin119 .. dat trucje met die <div> heb ik geprobeerd, zoals in mijn startpost te zien is .. maar deze truc werkt ook weer alleen in IE.
Of moet ik de <div> nog anders instellen?

[Erkens]

Wolf3D schreef op woensdag 06 juli 2005 @ 15:30:
Ja, het faken van een disable lijkt me ook niet waterdicht idd.

Ik zal nog wat meer uitleg geven bij het stukje waar ik mee bezig ben:
Mensen moeten een formulier invullen, en vervolgens een vinkje plaatsen waarmee ze aangeven de algemene voorwaarden gelezen te hebben. Zodra er een vinkje staat wordt de submit-knop ge-enabled.
Zolang dit vinkje nog niet geplaatst is, en de knop gedisabled is, moeten mensen een waarschuwing krijgen zodra ze toch op de (uitgeschakelde) knop klikken.

Ik zou dan juist gaan faken, daarmee zorg je dat je alle functionaliteit er nog gewoon inhebt zitten en niet browser afhankelijk gaat werken (als je het goed doet)
Gewoon de standaard actie laten staan en een onclick gebruiken die al dan niet true returnt. Bij het laden van de pagina verander je de style van de knop en in de onclick handler kijk je of het vinkje gezet is of niet, en die waarde geef je terug (al dan niet na het geven van een bericht).
In de handler van je vinkje verander je de style van de button.

Als je het dus op deze manier doet blijft de functie van de knop gelijk, ook als javascript uitstaat, je kan dan nog gewoon gebruik maken van die pagina. (Ik neem aan dat je serverside toch nog wel een extra check doet voor dat vinkje )

[Wolf3D]

Okee, ga ik proberen! Het is misschien toch wel een oplossing .. dat faken.
Eens kijken of het wil lukken! Bedankt!

[Robo1975]

2 divs maken, op elkaar positioneren. Een met een gedisable button en een met de echte button. Aan de hand van het vinkje bepalen welke er getoont wordt.

[Erkens]

Robo1975 schreef op woensdag 06 juli 2005 @ 16:41:
2 divs maken, op elkaar positioneren. Een met een gedisable button en een met de echte button. Aan de hand van het vinkje bepalen welke er getoont wordt.

Waarom dan div's gebruiken als je ook gewoon een button kan hiden?

[Robo1975]

Hoe krijg je ze op exact dezelfde plek, zonder divs te gebruiken?

[Grom]

Dit zou ook kunnen:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Mooie titel</title>
<script type="text/javascript">
<!--
    function checkInfo(){
      if (document.forms['form'].elements['accoord'].value=='nee'){
         alert("U moet accoord gaan met de voorwaarden");return false;
        }
        alert ('verzonden');
        //document.forms['mailform'].submit();
    }
    function hide(){
     document.forms['form'].elements['jsSend'].style.display='inline';
     document.forms['form'].elements['phpSend'].style.display='none';
    }
    window.onload = hide;
// -->
</script>
</head>
<body>
<form name="form" action="ergensheen.php">
     accoord met de voorwaarden?<input type="text" name="accoord" value="nee"/>
     <input style="display:none" id="jsSend"   type="button" value="send" onclick="checkInfo()" />&nbsp;
       <input id="phpSend"  type="submit"  value="send" />&nbsp;
       <input id="cmdReset" type="reset"  value="reset" />
</form>
</body>
</html>

[Wolf3D]

Bedankt voor je code, maar .. volgens mij doet hij hier niet wat ie zou moeten doen.
Ik zie alle knoppen gewoon als actief/enabled .. alleen doet hij pas wat op het moment dat ik iets anders dan 'nee' heb ingevuld.

Het faken van de button werkt tot nu toe beter .. alleen probeer ik nog het schaduw-effect zoals een knop heeft in te stellen .. maar dat wil niet werken.
Het leek mij logisch om "text-shadow: KLEUR" te gebruiken, maar dit werkt niet.

Edit: owja, en het uitzetten van de 'indruk-style' kan ik ook nergens vinden.
"text-indruk: false" werkt niet eens

[ Voor 15% gewijzigd door Wolf3D op 07-07-2005 09:59 ]

[BtM909]

Het doel van disabled buttons is natuurlijk wel het feit dat ze niet meer weer werken he

Je kan kijken of het event naar boven wordt gebubbeld (denk het niet ) of desnoods toch een transparante div / span erover heen plaatsen

[ Voor 7% gewijzigd door BtM909 op 07-07-2005 13:59 ]

[Grom]

Of je maakt het verschil tussen enable en disable van de button groter door een streep door de tekst te zetten.

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Mooie titel</title>
<script type="text/javascript">
<!--
    function checkInfo(){
      if (document.forms['form'].elements['accoord'].checked == false){
          alert("U moet eerst accoord gaan met de voorwaarden");return false;
        }
    }
    function controleer(){
      if (document.forms['form'].elements['accoord'].checked == true){
        document.forms['form'].elements['cmdSend'].style.textDecoration = 'none';
      }
      else{
        document.forms['form'].elements['cmdSend'].style.textDecoration = 'line-through';
      }
    }
    function herstel(){
      document.forms['form'].elements['cmdSend'].style.textDecoration = 'line-through';
        document.forms['form'].reset();
    }
    function JsIsAan(){
     document.forms['form'].elements['cmdSend'].style.textDecoration = 'line-through';
    }
    window.onload = JsIsAan;
// -->
</script>
</head>
<body>
<form name="form" action="pagina.php" onsubmit="return checkInfo()">
     accoord met de voorwaarden?
         <input name="accoord" type="checkbox" value="ja" onclick="controleer()" />
     <input id="cmdSend" type="submit" value="verstuur" />
       <input id="cmdReset" type="reset"  value="wis" onclick="herstel()" />
</form>
</body>
</html>

edit:

Imo is het niet zo'n logische oplossing voor je probleem:
Een disabelde (niet klikbare) button waar je op moet klikken om er achter te komen waarom het geen zin heeft om er op te klikken.
Beter is het imo om bij de checkbox te zeggen dat het formulier niet verzonden kan worden zonder een vinkje (verplicht veld).
Kun je gewoon disabled blijven gebruiken, duidelijker en geen fancy gedoe.
Serverside controleren is sowiso een must.

[ Voor 30% gewijzigd door Grom op 07-07-2005 16:50 ]

[Wolf3D]

Het probleem met de disabelde button is, dat deze in Firefox bijv. nagenoeg niet verschilt van een normale button. Mensen die dus het vinkje over het hoofd zien, en niet door hebben dat deze aangevinkt moeten worden, zullen niet begrijpen waarom de knop het niet doet.

Ik heb het nu gewoon opgelost door zodra het formulier geladen wordt de tekstkleur van de button op grijs te zetten, en zodra het vinkje geplaatst is de kleur weer te veranderen naar zwart. Hierdoor hoef ik disabled niet te gebruiken en kan ik gewoon een Onclick eraan hangen. En .. is het volgens mij duidelijk, en browseronafhankelijk.

Bedankt voor alle hulp en tips!

[Erkens]

Wolf3D schreef op donderdag 14 juli 2005 @ 17:10:
Het probleem met de disabelde button is, dat deze in Firefox bijv. nagenoeg niet verschilt van een normale button. Mensen die dus het vinkje over het hoofd zien, en niet door hebben dat deze aangevinkt moeten worden, zullen niet begrijpen waarom de knop het niet doet.

Misschien moeten die mensen een bril kopen



En daarnaast kan je ook altijd nog het opschrift aanpassen, maar zorg er aub wel voor dat mensen zonder javascript gewoon gebruik kunnen maken van de site, javascript moet imo een toevoeging zijn. (tenzij het echt niet anders kan)

[ Voor 18% gewijzigd door Erkens op 14-07-2005 17:34 ]

[Blaise]

Misschien moeten die mensen een bril kopen

Verschilt natuurlijk ook per (windows)skin, en in opera de browerskin.

[RwD]

Waarom controleer je gewoon niet met javascript onsubmit en geeft een melding ipv submitten als dat hokje niet aangevinkt is. Als backup laat je php of welke scripttaal je ook gebruikt ook nog eens controleren of het vakje aangevinkt was (en zo niet terug naar de pagina met een melding).

[Erkens]

Blaise schreef op donderdag 14 juli 2005 @ 23:39:
[...]
Verschilt natuurlijk ook per (windows)skin, en in opera de browerskin.

het ging hier om de standaard firefox
maar dan nog is dat een probleem van de browser niet van de site, maar gewoon disabelen en het opschrift aanpassen en het is duidelijk lijkt me

RwD schreef op vrijdag 15 juli 2005 @ 11:00:
Waarom controleer je gewoon niet met javascript onsubmit en geeft een melding ipv submitten als dat hokje niet aangevinkt is. Als backup laat je php of welke scripttaal je ook gebruikt ook nog eens controleren of het vakje aangevinkt was (en zo niet terug naar de pagina met een melding).

ehm, je moet serverside nooit als backup gebruiken, _altijd_ alles checken, userinput is nooit te vertrouwen.

[RwD]

Erkens schreef op vrijdag 15 juli 2005 @ 11:13:
[...]

het ging hier om de standaard firefox
maar dan nog is dat een probleem van de browser niet van de site, maar gewoon disabelen en het opschrift aanpassen en het is duidelijk lijkt me


[...]

ehm, je moet serverside nooit als backup gebruiken, _altijd_ alles checken, userinput is nooit te vertrouwen.

ik bedoelde "backup" want hoe je het ook noemt, het doet hetzelfde...

[Erkens]

RwD schreef op vrijdag 15 juli 2005 @ 14:03:
[...]
ik bedoelde "backup" want hoe je het ook noemt, het doet hetzelfde...

nee dat is niet hetzelfde, althans je ziet dat een ander een "backup" anders ziet dan dat jij dat doet waardoor je dus verwarring kan krijgen
Een backup zie ik meer als iets wat pas in werking komt als het andere faalt en dat kan je niet weten omdat dat clientside is

[rrrandy]

Is het niet veel duidelijker om de knop altijd enabled te laten en voor de werkelijke submit eerst een check te doen of het vinkje er staat of niet?

Dus zoiets:

code:

if (vinkje)
  submit
else
  alert("u heeft blabla niet aangevinkt");

Weet de gebruiker ook meteen wat er aan de hand is. Met de oplossing die je nu bouwt laat je de gebruiker in het ongewis over wat hij verkeerd doet.

/edit: spuit 623

[ Voor 7% gewijzigd door rrrandy op 15-07-2005 15:26 ]