dreamweaver keuzelijst opmaken

Status
Niet open voor verdere reacties.

taeser

Gebruiker
Lid geworden
24 feb 2003
Berichten
382
Hallo

Ik heb in dreamweaver een menu/keuzelijst gemaakt
Nu zou ik van het eerste geselecteerde item een andere opmaak willen dan de andere items
Weet ook niet of het eerste geselecteerde item niet zichtbaar kan zijn als je de keuzelijst opent.
Ik bedoel " nr2 groep c " is niet echt iets wat je kiest

keuzelijst.JPG

gr leon
 
Hoi Leon,
Keuzelijsten zitten in <form>'s, en dat die behoren tot de lastigste opmaak-onderdelen: elke browser doet het weer anders met de form-controls. :confused:

Je kunt met css de roepnaam / eerste optie van het lijstje wel uitgrijzen, maar niet (cross-browser) onzichtbaar maken.
Wat wel zou kunnen, is om er een portie javascript op los te laten, met bijbehorende css.

Bijvoorbeeld:
  • Javascript schakelt de eerste optie uit, die staat dus niet meer in het uitklap-rijtje.
  • Maar dan staat er de nieuwe eerste optie in het onuitgeklapte uitklap-venstertje.
  • Daarom schakelt het javascript een <div>'je in, waarin het opschrift van het rijtje zit; dat wordt over de nieuwe eerste optie heen geplakt, maar het uitklap-knopje
    uitklap-knopje.png
    blijft bereikbaar.
  • Bij een klik op het knopje wordt de fake-eerste-optie naar boven het venstertje gezet, zodat je later altijd nog weet om welke keuze het ging.
  • Daarmee komt het uitklappertje tevoorschijn met alleen de toonbare namen.
  • Alles met enige omzichtigheid: want als javascript uit staat, moet het ook nog werken ("unobtrusive javascript"); dan komt alsnog de vergrijsde versie tevoorschijn.

Aldus de test: bliksekaters.nl/tests/keuzelijst.htm

Met vriendelijke groet,
CSShunter
 
Hoi csshunter

Ben er al een tijd mee bezig maar het lukt niet goed.
Ik moet jouw code nu plaatsen in een bestaande webpagina .
Hierdoor gaat van alles mis. Omdat het nogal omslachtig is wat er precies mis gaat plaats ik hier maar mijn code. (zonder css)
Wil niet teveel sleutelen aan de bestaande code.
Hoop dat je er nog eens naar wil kijken.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
</head>
<body>
<form method="post" action="formmail.php" name="mijnformulier"  onsubmit="MM_validateForm('naam','','R','adres','','R','plaats','','R','email','','RisEmail');return document.MM_returnValue"/>
<input type="hidden" name="subject" value="Ektoto_invulform" />
<!-- bij value moet je de titel van de verstuurde mail ingeven -->

				<table class="table1">
                <thead>
                    <tr> <th class="pool" width="12%"scope="col">poule A</th> 
                        <th width="20%"scope="col">Datum</th>
                       <th width="45%"scope="col">Wedstrijd</th>
                        <th colspan="2" width="10%">Uitslag</th>
                       </tr>
                </thead>
               <tbody>
                    <tr>
                     <td></td>
                       <td>8 juni - 18.00</td>
                <td>Polen - Griekenland</td>  
                 <td><input name="1t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="1u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                     <tr>
                     <td></td>
                       <td>8 juni - 20.45</td>
                <td>Rusland - Tjechie</td>   
                <td><input name="2t" type="text" size="1" maxlength="2"/></td>
                <td><input name="2u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                   <tr>
                 <td></td>
                       <td>11 juni - 18.00</td>
                <td>Griekenland - Tjechie</td>   
                <td><input name="3t" type="text" size="1" maxlength="2"/></td>
                <td><input name="3u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                   <tr>
                   <td></td>
                       <td>11 juni - 20.45</td>
                 <td>Polen - Rusland</td>   
                 <td><input name="4t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="4u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                   <tr>
                   <td></td>
                       <td>16 juni - 20.45 </td>
                <td>Griekenland - Rusland</td>   
                <td><input name="5t" type="text" size="1" maxlength="2"/></td>
                <td><input name="5u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                   <tr>
                   <td></td>
                     <td>16 juni - 20.45 </td>
                 <td>Tjechie - Polen</td>   
                 <td><input name="6t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="6u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                </tbody>
            </table>
            
            <table class="table1">
                <thead>
                    <tr><th class="pool" width="12%" scope="col">poule B</th> 
                        <th width="20%"scope="col">Datum</th>
                       <th width="45%"scope="col">Wedstrijd</th>
                        <th colspan="2" width="10%">Uitslag</th>
                    </tr>
                </thead>
               <tbody>
                    <tr>
                    <td></td>
                       <td>9 juni - 18.00</td>
                 <td>Nederland - Denemarken</td>    
                 <td><input name="7t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="7u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                   <tr>
                   <td></td>
                       <td>9 juni - 20.45</td>
                 <td>Duitsland - Portugal</td>   
                 <td><input name="8t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="8u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                    <tr>
                    <td></td>
                       <td>13 juni - 18.00</td>
                <td>Denemarken - Portugal</td>   
                 <td><input name="9t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="9u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                   <tr>
                   <td></td>
                       <td>13 juni - 20.45</td>
                 <td>Nederland - Duitsland</td>   
                 <td><input name="10t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="10u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                   <tr>
                   <td></td>
                       <td>17 juni - 20.45</td>
                 <td>Portugal - Nederland</td>   
                 <td><input name="11t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="11u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                     <tr>
                     <td></td>
                        <td>17 juni - 20.45</td>
                 <td>Denemarken - Duitsland</td>    
                 <td><input name="12t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="12u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                </tbody>
            </table>
            
            <table class="table1">
                <thead>
                    <tr><th class="pool"width="12%" scope="col">poule C</th> 
                          <th width="20%"scope="col">Datum</th>
                       <th width="45%"scope="col">Wedstrijd</th>
                        <th colspan="2" width="10%">Uitslag</th>
                    </tr>
                </thead>
               <tbody>
                    <tr>
                    <td></td>
                       <td>10 juni - 18.00</td>
                 <td>Spanje - Italie</td>   
                  <td><input name="13t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="13u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                   <tr>
                   <td></td>
                       <td>10 juni - 20.45</td>
                <td>Ierland - Kroatie</td>    
                <td><input name="14t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="14u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                    <tr>
                    <td></td>
                       <td>14 juni - 18.00</td>
                 <td>Italie - Kroatie</td>    
                 <td><input name="15t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="15u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                   <tr>
                   <td></td>
                       <td>14 juni - 20.45</td>
                 <td>Spanje - Ierland</td>    
                 <td><input name="16t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="16u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                   <tr>
                   <td></td>
                       <td>18 juni - 20.45</td>
                 <td>Kroatie - Spanje</td>    
                 <td><input name="17t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="17u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                     <tr>
                     <td></td>
                     <td>18 juni - 20.45</td>
                 <td>Italie - Ierland</td>    
                 <td><input name="18t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="18u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                </tbody>
            </table>

<table class="table1">
                <thead>
                    <tr><th class="pool"width="12%" scope="col">poule D</th> 
                         <th width="20%"scope="col">Datum</th>
                       <th width="45%"scope="col">Wedstrijd</th>
                        <th colspan="2" width="10%">Uitslag</th>
                    </tr>
                </thead>
               <tbody>
                    <tr>
                   <td></td>
                       <td>11 juni - 18.00</td>
                 <td>Frankrijk -Engeland</td>    
                 <td><input name="19t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="19u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                   <tr>
                   <td></td>
                       <td>11 juni - 20.45</td>
                 <td>Oekraine -Zweden</td>    
                 <td><input name="20t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="20u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                    <tr>
                    <td></td>
                       <td>15 juni - 18.00</td>
                 <td>Oekraine - Frankrijk</td>    
                 <td><input name="21t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="21u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                   <tr>
                   <td></td>
                       <td>15 juni - 20.45</td>
                 <td>Zweden - Engeland</td>   
                 <td><input name="22t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="22u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                   <tr>
                   <td></td>
                       <td>19 juni - 20.45</td>
               <td>Zweden - Frankrijk</td>    
               <td><input name="23t" type="text" size="1" maxlength="2"/></td>
               <td><input name="23u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                     <tr>
                     <td></td>
                       <td>19 juni - 20.45</td>
                 <td>Engeland - Oekraine</td>    
                 <td><input name="24t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="24u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                </tbody>
            </table>
            <table class="table1">
                <thead>
                    <tr>
                      <th class="pool"width="12%" scope="col">1/4 finale</th> 
                         <th width="20%"scope="col">Datum</th>
                       <th colspan="2" width="45%">Wedstrijd</th>
                        <th colspan="2" width="10%">Uitslag</th>
                    </tr>
                </thead>
               <tbody>
                    <tr>
                   <td>25</td>
                       <td>21 juni - 20.45</td>
                
                <td><select name="25tui" style="width: 90%;">

                     <option selected="selected">nr1 groep A</option>

                     <option>Polen</option>

                     <option>Griekenland</option>

                     <option>Rusland</option>

                     <option>Tjechie</option>

                   </select></td>

                  <td><select name="25uit" style="width: 90%;">

                     <option selected="selected">nr2 groep B</option>

                     <option>Nederland</option>

                     <option>Denemarken</option>

                     <option>Duitsland</option>

                     <option>Portugal</option>

                   </select></td>
    
                  <td><input name="25t" type="text" size="1" maxlength="2"/></td>
                  <td><input name="25u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                   <tr>
                   <td>26</td>
                       <td>22 juni - 20.45</td>
                
                 <td><select name="26tui" style="width: 90%;">

                     <option selected="selected">nr1 groep B</option>

                     <option>Nederland</option>

                     <option>Denemarken</option>

                     <option>Duitsland</option>

                     <option>Portugal</option>


                   </select></td>

                  <td><select name="26uit" style="width: 90%;">

                     <option selected="selected">nr2 groep A</option>

                       <option>Polen</option>

                     <option>Griekenland</option>

                     <option>Rusland</option>

                     <option>Tjechie</option>

                   </select></td>   
                 <td><input name="26t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="26u" type="text" size="1" maxlength="2"/></td>
                 </tr>
                    <tr>
                    <td>27</td>
                       <td>23 juni - 20.45</td>
                 
                 <td><select name="27tui" style="width: 90%;">

                     <option selected="selected">nr1 groep C</option>

                     <option>Spanje </option>

                     <option>Italie</option>

                     <option>Ierland</option>

                     <option>Kroatie</option>

                   </select></td>

                  <td><select name="27uit" style="width: 90%;">

                     <option selected="selected">nr2 groep D</option>

                     <option>Frankrijk</option>

                     <option>Engeland</option>

                     <option>Oekraine</option>

                     <option>Zweden</option>

                   </select></td>   
                 <td><input name="27t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="27u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                   <tr>
                   <td>28</td>
                       <td>24 juni - 20.45</td>
                
                 <td><select name="28tui" style="width: 90%;">

                     <option selected="selected">nr1 groep D</option>

                      <option>Frankrijk</option>

                     <option>Engeland</option>

                     <option>Oekraine</option>

                     <option>Zweden</option>

                   </select></td>

                  <td><select name="28uit" style="width: 90%;">

                     <option selected="selected">nr2 groep C</option>

                     <option>Spanje </option>

                     <option>Italie</option>

                     <option>Ierland</option>

                     <option>Kroatie</option>

                   </select></td> 
                 <td><input name="28t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="28u" type="text" size="1" maxlength="2"/></td>
                 </tr>
                  </tbody>
            </table>
             <table class="table1">
                <thead>
                    <tr>
                      <th class="pool"width="12%" scope="col">1/2 finale</th> 
                         <th width="20%"scope="col">Datum</th>
                       <th colspan="2" width="45%">Wedstrijd</th>
                        <th colspan="2" width="10%">Uitslag</th>
                    </tr>
                </thead>
               <tbody>
                    <tr>
                   <td>29</td>
                       <td>27 juni - 20.45</td>
                
                  <td><select name="29tui" style="width: 90%;">

                     <option selected="selected">Winnaar 25</option>

                     <option>Polen</option>
                     <option>Griekenland</option>
                     <option>Rusland</option>
                     <option>Tjechie</option>
                     <option>Nederland</option>
                     <option>Denemarken</option>
                     <option>Duitsland</option>
                     <option>Portugal</option>
                     

                   </select></td>

                  <td><select name="29uit" style="width: 90%;">

                     <option selected="selected">Winnaar 27</option>

                     <option>Spanje </option>
                     <option>Italie</option>
                     <option>Ierland</option>
                     <option>Kroatie</option>
                     <option>Frankrijk</option>
                     <option>Engeland</option>
                     <option>Oekraine</option>
                     <option>Zweden</option>
                     </select></td>  
                 <td><input name="29t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="29u" type="text" size="1" maxlength="2"/></td>
                    </tr>
                   <tr>
                   <td>30</td>
                       <td>28 juni - 20.45</td>
                 <td><select name="30tui" style="width: 90%;">
                 <option selected="selected">Winnaar 26</option>
                     <option>Polen</option>
                     <option>Griekenland</option>
                     <option>Rusland</option>
                     <option>Tjechie</option>
                     <option>Nederland</option>
                     <option>Denemarken</option>
                     <option>Duitsland</option>
                     <option>Portugal</option>
                     </select></td>
                      <td><select name="30uit" style="width: 90%;">
                      <option selected="selected">Winnaar 28</option>
                      <option>Spanje </option>
                     <option>Italie</option>
                     <option>Ierland</option>
                     <option>Kroatie</option>
                     <option>Frankrijk</option>
                     <option>Engeland</option>
                     <option>Oekraine</option>
                     <option>Zweden</option>
                   </select></td> 
                 <td><input name="30t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="30u" type="text" size="1" maxlength="2"/></td>
                 </tr>
             </table>
              <table class="table1">
                <thead>
                    <tr>
                      <th class="pool"width="12%" scope="col">finale</th> 
                          <th width="20%"scope="col">Datum</th>
                       <th colspan="2" width="45%">Wedstrijd</th>
                        <th colspan="2" width="10%">Uitslag</th>
                    </tr>
                </thead>
               <tbody>
                    <tr>
                    <td></td>
                       <td>1 juli - 20.45</td>
                 <td><select name="31tui" style="width: 90%;">
                 <option selected="selected">Winnaar 29</option>
                 <option>Polen</option>
                     <option>Griekenland</option>
                     <option>Rusland</option>
                     <option>Tjechie</option>
                     <option>Nederland</option>
                     <option>Denemarken</option>
                     <option>Duitsland</option>
                     <option>Portugal</option>
                     <option>Spanje </option>
                     <option>Italie</option>
                     <option>Ierland</option>
                     <option>Kroatie</option>
                     <option>Frankrijk</option>
                     <option>Engeland</option>
                     <option>Oekraine</option>
                     <option>Zweden</option>
                     </select></td>
                      <td><select name="31uit" style="width: 90%;">
                      <option selected="selected">Winnaar 30</option>
                      <option>Polen</option>
                     <option>Griekenland</option>
                     <option>Rusland</option>
                     <option>Tjechie</option>
                     <option>Nederland</option>
                     <option>Denemarken</option>
                     <option>Duitsland</option>
                     <option>Portugal</option>
                     <option>Spanje </option>
                     <option>Italie</option>
                     <option>Ierland</option>
                     <option>Kroatie</option>
                     <option>Frankrijk</option>
                     <option>Engeland</option>
                     <option>Oekraine</option>
                     <option>Zweden</option>
                     </select></td>   
                 <td><input name="31t" type="text" size="1" maxlength="2"/></td>
                 <td><input name="31u" type="text" size="1" maxlength="2"/></td>
                    </tr>
             </table>
            

         <table class="table1">
                <thead>
                    <tr><th class="pool" width="12%" scope="col">Bonus</th> 
                        <th width="26%"scope="col">Europees kampioen</th>
                       <th width="25%"scope="col">Aantal doelpunten</th>
                        <th width="19%"scope="col">Gele kaarten</th>
                        <th width="27%"scope="col">Rode kaarten</th>
                    </tr>
                </thead>
               <tbody>
                    <tr>
                    <td></td>
                 <td><select name="kampioen" style="width:100%;">
                      <option selected="selected">Winnaar finale</option>
                      <option>Polen</option>
                     <option>Griekenland</option>
                     <option>Rusland</option>
                     <option>Tjechie</option>
                     <option>Nederland</option>
                     <option>Denemarken</option>
                     <option>Duitsland</option>
                     <option>Portugal</option>
                     <option>Spanje </option>
                     <option>Italie</option>
                     <option>Ierland</option>
                     <option>Kroatie</option>
                     <option>Frankrijk</option>
                     <option>Engeland</option>
                     <option>Oekraine</option>
                     <option>Zweden</option>
                     </select></td>   
                 <td><input name="doelpunten" type="text" size="3" maxlength="4"/></td>   
                 <td><input name="geel" type="text" size="3" maxlength="4"/></td>
                 <td><input name="rood" type="text" size="3" maxlength="4"/></td>
                    </tr>
                  </table>
<div id="mailbox_invulf">
<table width="400" border="0">
<tr>
<td width="86"><div align="left">Naam :</span> </div></td>
<td width="304"><label>
<input name="naam" type="text" id="naam" size="40" />
 </label></td>
</tr>
<tr>
<td><div align="left">Adres :</span> </div></td>
 <td><label>
<input name="adres" type="text" id="adres" size="40" />
</label></td>
 </tr>
 <tr>
<td><div align="left">Plaats :</span> </div></td>
 <td><label>
<input name="plaats" type="text" id="plaats" size="40" />
</label></td>
</tr>
<tr>
<td><div align="left">E-mail :</span> </div></td>
 <td><label>
<input name="email" type="text" id="email" size="40" />
</label></td>
     </tr>
         <tr>
<td><div align="left"></div></td>
<td>
 <label>
<input type="submit" name="button" id="button" value="Versturen" class="buttoncss_invulf"/>
</label>
               <label>
<input type="reset" name="button2" id="button2" value="Wissen" class="buttoncss_invulf"/>
</label>
 </td>
 </tr>
</table></div>
 </form>
</body>
</html>

Alvast bedankt voor je moeite.

gr leon
 
Hoi Leon,
  • (niet vergeten de html-validator even te laten nakijken (er ontbreken wat </tbody>'s e.d.)(en de s in Tsjechië)

Nu ik het geheel zo voor me zie, heb ik een andere suggestie. Het lijkt me veel duidelijker voor de invullers, als de eerste optie van de keuzelijst niet naar boven verspringt, maar er altijd al boven staat. Met javascript kan het invulvakje dan leeg gehouden worden, en ook de eerste optie in het uitrollertje kan onzichtbaar gemaakt worden.



Mocht iemand javascript uit hebben staan, dan ziet deze (vul in) in de vakjes staan, dat dan als eerste optie in de uitroller is vergrijsd.

Verder:
  • Ik zou er zeker een "confirm" waarschuwing inzetten voor als iemand per abuis op "Wissen" zou klikken (bv. bij het aanpakken van de 17e kop koffie, of als de poes over het toetsenbord wandelt): anders zijn alle met zweet en tranen en wikken en wegen ingevulde uitslagen foetsie.
  • Daarom zou ik veiligheidshalve de knop "Wissen" ook "Alles Wissen" noemen, dan kan iemand zich tweemaal bedenken.
  • En voor als nog niet van plan: met een Print-knopje kan vóór het verzenden even snel een printje gemaakt worden, dan heeft men iets in handen om op de bank voor de TV met rode viltstift te bewerken. ;)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hoi csshunter

Dit lijkt mij idd ook een betere en duidelijkere oplossing. Er zijn nu nog 2 probleempjes.

1. in chrome wordt het geselecteerde item wel italic en groen weergegeven maar in IE 9 geeft hij alleen
italic goed weer, maar de kleur is zwart.

2. het pop-up venstertje van de "alleswissen" knop heeft 2 opties : oké en annuleren . Echter ook als ik op de annuleren knop klik wordt alles gewist.

De deelnemers krijgen hun voorspellingen ook te zien op de site. Maar het is idd wel handig en spannend om met de voorspellingen "op schoot" de wedstrijden te volgen. Dit moet ik nog even aanpassen zodat de haeder en linkerzijkolom niet mee worden geprint. Iets met mediascreen in een appart css geloof ik.

Tot zover bedankt voor je meedenken.

gr leon
 
Hoi Leon,

Ad 1
Ja, inderdaad, ook in IE7 komt het groen niet door, en ook de weer recht gezette tekst in de uitklapper blijft cursief; het (vul in) daarentegen, bij uitgezet javascript, is wel uitgegrijsd (bij andere browsers ook groen):

keuzelijst-ie7.png

Firefox pakt zowel het groen als het rechtop staan in de lijst:

keuzelijst-ff.png

Maar Chrome (en ook Opera en Safari) pakt wel het groen, maar niet het rechtop staan:

keuzelijst-chrome.png

Dit zijn de browserverschillen bij de opmaak van <form>'s zijn waar ik het eerder over had, en daar zal weinig aan te doen zijn. Maar het belangrijkste lijkt me dat ze allemaal het blanco van het javascript oppakken, en de ingevulde landen cursief in de vakjes weergeven. Op die manier is goed duidelijk wat men heeft ingevuld en wat nog niet.

============
Ad 2
Oeps, die had ik moeten testen! :eek:
Bij de confirm hoort ook een return: die zorgt dat de return van de confirm wordt uitgevoerd, en niet wat de button als return-opdracht geeft:
HTML:
...
... onclick="return confirm('Wilt u echt alle ingevulde uitslagen wissen?');"
  • Heb ik inmiddels hersteld op de testpagina: tests/keuzelijst-nw.htm.
  • Overigens zou je de hele "Alles Wissen" knop ook kunnen weglaten: die zal weinig/nooit gebruikt worden en geeft alleen maar aanleiding tot verwarring (of mag je twee of meer keer inzenden?).

========
Ad printversie
Ja, je kan onder de gewone stylesheet-aanroep een print-stylesheetje zetten:
HTML:
...
<link rel="stylesheet" type="text/css" href="stylesheets/general.css">
<link rel="stylesheet" type="text/css" media="print" href="stylesheets/printstyles.css">
In het print-sheet zet je dan alleen de {display:none} 's voor wat niet op papier hoeft te komen. Die overrulen dan wat er in het eerdere algemene stylesheet staat, en dan ben je vlug klaar.

=====
En last but not least:


  • Ik zie er een Dreamweaver-javascript "MM_validateForm()" in zitten. Dat kan best voor een client-side eerste controle op correct invullen, maar is niet waterdicht.
  • Voor een safe controle zal het afhandelend mailform.php ook nog de nodige checks moeten uitvoeren.
    Al was het maar om de server niet te laten opblazen door hack-beluste "kwaadwillenden". ;)

Met vriendelijke groet,
CSShunter
_____________
PS: het printversie-gebeuren kan met een @media-regel ook direct in het gewone stylesheet, als het er niet zoveel zijn:
Code:
...
@media print {
    body, #content ( width: 100%; background: white; color: black }
    #header { background-image: url(images/klein-zwartwit-logo.png) }
    #leftcolumn { display: none }
    }
Images die je wel wilt laten meeprinten, kan je het beste in de html als voorgrond-images zetten, dan komen ze ook door bij mensen die standaard het weergeven van backgrounds op hun printer hebben uitgezet om van inkt druipende achtergronden te vermijden.
 
Laatst bewerkt:
Hoi csshunter

pr 1
Het is nu idd veel duidelijker. Deelnemers zien nu dat er iets ingevuld moet worden.

pr 2
Zat er zelf ook aan te denken om die knop weg te laten.
Lijkt me sterk dat men alles verkeerd invult.
Ja , je mag zoveel invullen als je wil á €5 per formulier :D
Weet nu hoe het werkt met het pop-up schermpje

pr printen
Dit gaat verder wel lukken.

Het evt "hackprobleem" zal ik voor lief moeten nemen denk ik....mijn kennis van php reikt (nog) niet zover.

Ik wil je bedanken voor alle moeite en de wederom uitgebreide uitleg van alles. :thumb:

gr leon
 
Hoi Leon,
Okidoki, mooi dat je er uit bent. :)

Van een form-/mail-check met php heb ik geen verstand, maar waarschijnlijk kunnen een paar simpele maatregelen al de ergste dingen buiten de deur houden.
Voor zo'n veilige php-afhandeling van het form zou je een vraag kunnen stellen op de php-afdeling van dit forum.

Dat de beste moge winnen! :d
Met vriendelijke groet,
CSShunter
 
Hoi (csshunter ;))

Toch nog een probleem(pje).
Het betreft het uitprinten van de invulpagina.
Mijn standaard browser is chrome en hierin werkt alles perfect, ook in IE 8.
Kom er nu pas achter dat in IE 9 de geselecteerde landen niet worden meegeprint.
Is hier iets aan te doen ?

gr leon
 
Ai!
Hier op IE7 werkt een Afdrukvoorbeeld van m'n testpagina van hierboven wel goed.
Maar daar zit geen enkele speciale print-style bij.
Ik kan IE9 niet checken, want die heb ik niet.

Zou het misschien helpen om alle colors op zwart te zetten? Iets als:
Code:
@media print {
    html, html * { background: white !important; color: black !important; }
    }

(En is de pagina valid html en valid css?)
 
hoi csshunter

Na lang zoeken en puzzelen ben ik er uit.
Je kunt de pagina in IE 9 weergeven in de "compatibiliteitsweergave" (moeilijk woord :D).
Dan laat hij wel alles zien en print dus alles netjes uit.
De vraag is nu dus of de bezoeker (deelnemer) dit wel standaard aan heeft staan.(kun je aanvinken)
Hier zal ik dus zelf even over na moeten denken.

Bedankt voor al je hulp.

gr leon
 
Laatst bewerkt:
hoi csshunter

Wat 1 regeltje al niet kan doen...het werkt perfect. :thumb:
Je kunt het ook niet meer (per ongeluk) veranderen, want de optie is nu lichtgrijs geworden.

Bedankt weer

gr leon
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan