API tools faq
paste
Advertisement
Dennis-Hermes

Beschikbaarheids formulier. | versie 2.8

Dennis-Hermes
Jul 20th, 2018
73
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 34.55 KB | None | 0 0
raw download clone embed print report
  1. <DOCTYPE HTML>
  2. <html>
  3.  
  4. <head>
  5.  
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  9. <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  10.  
  11. <style>
  12. .hidden {
  13. display:none
  14. }
  15.  
  16. select[font=select1], select {
  17.     width: 18%;
  18.     padding: 12px 20px;
  19.     margin: 8px 0;
  20.     display: inline-block;
  21.     border: 1px solid #ccc;
  22.     border-radius: 4px;
  23.     box-sizing: border-box;
  24. }
  25.  
  26. select[font=select2], select {
  27.     width: 23%;
  28.     padding: 12px 20px;
  29.     margin: 8px 0;
  30.     display: inline-block;
  31.     border: 1px solid #ccc;
  32.     border-radius: 4px;
  33.     box-sizing: border-box;
  34. }
  35.  
  36. select[font=select3], select {
  37.     width: 25%;
  38.     padding: 12px 20px;
  39.     margin: 8px 0;
  40.     display: inline-block;
  41.     border: 1px solid #ccc;
  42.     border-radius: 4px;
  43.     box-sizing: border-box;
  44. }
  45.  
  46. select[font=MRselect1], select {
  47.     width: 31%;
  48.     padding: 12px 20px;
  49.     margin: 8px 0;
  50.     display: inline-block;
  51.     border: 1px solid #ccc;
  52.     border-radius: 4px;
  53.     box-sizing: border-box;
  54. }
  55.  
  56. select[font=MRselect2], select {
  57.     width: 31%;
  58.     padding: 12px 20px;
  59.     margin: 8px 0;
  60.     display: inline-block;
  61.     border: 1px solid #ccc;
  62.     border-radius: 4px;
  63.     box-sizing: border-box;
  64. }
  65.  
  66. select[font=MRselect3], select {
  67.     width: 31%;
  68.     padding: 12px 20px;
  69.     margin: 8px 0;
  70.     display: inline-block;
  71.     border: 1px solid #ccc;
  72.     border-radius: 4px;
  73.     box-sizing: border-box;
  74. }
  75. </style>
  76.  
  77. <style>
  78. p.big {
  79.     line-height: 1.7;
  80. }
  81.  
  82. p.big2 {
  83.     line-height: 0.1;
  84. }
  85.  
  86. * {
  87.     box-sizing: border-box;
  88. }
  89.  
  90. .column {
  91.     float: left;
  92.     width: 49%;
  93.     padding: 10px;
  94. }
  95.  
  96. .row:after {
  97.     content: "";
  98.     display: table;
  99.     clear: both;
  100.     margin: auto;
  101. </style>
  102.  
  103. <style>
  104.  
  105. .container {
  106.     display: block;
  107.     position: relative;
  108.     padding-left: 35px;
  109.     margin-bottom: 12px;
  110.     cursor: pointer;
  111.     font-size: 15px;
  112.     -webkit-user-select: none;
  113.     -moz-user-select: none;
  114.     -ms-user-select: none;
  115.     user-select: none;
  116. }
  117. .container input {
  118.     position: absolute;
  119.     opacity: 0;
  120.     cursor: pointer;
  121. }
  122.  
  123. .checkmark {
  124.     position: absolute;
  125.     top: 0;
  126.     left: 0;
  127.     height: 15px;
  128.     width: 15px;
  129.     background-color: #619bf9;
  130.     border-radius: 50%;
  131. }
  132. .container:hover input ~ .checkmark {
  133.     background-color: #4286f4;
  134. }
  135. .container input:checked ~ .checkmark {
  136.     background-color: #4286f4;
  137. }
  138.  
  139. .checkmark:after {
  140.     content: "";
  141.     position: absolute;
  142.     display: none;
  143. }
  144.  
  145. .container input:checked ~ .checkmark:after {
  146.     display: block;
  147. }
  148.  
  149. .container .checkmark:after {
  150.     top: 3.5px;
  151.     left: 3.5px;
  152.     width: 7px;
  153.     height: 7px;
  154.     border-radius: 50%;
  155.     background: white;
  156. }
  157. </style>
  158. <style>
  159.  
  160. input[font=date1], select {
  161.     width: 100%;
  162.     padding: 12px 20px;
  163.     margin: 8px 0;
  164.     display: inline-block;
  165.     border: 1px solid #ccc;
  166.     border-radius: 4px;
  167.     box-sizing: border-box;
  168. }
  169.  
  170. input[font=date2], select {
  171.     width: 100%;
  172.     padding: 12px 20px;
  173.     margin: 8px 0;
  174.     display: inline-block;
  175.     border: 1px solid #ccc;
  176.     border-radius: 4px;
  177.     box-sizing: border-box;
  178. }
  179.  
  180. input[type=text2], select {
  181.     width: 100%;
  182.     padding: 12px 20px;
  183.     margin: 8px 0;
  184.     display: inline-block;
  185.     border: 1px solid #ccc;
  186.     border-radius: 4px;
  187.     box-sizing: border-box;
  188. }
  189.  
  190. input[type=tel], select {
  191.     width: 100%;
  192.     padding: 12px 20px;
  193.     margin: 8px 0;
  194.     display: inline-block;
  195.     border: 1px solid #ccc;
  196.     border-radius: 4px;
  197.     box-sizing: border-box;
  198. }
  199.  
  200. input[type=email], select {
  201.     width: 100%;
  202.     padding: 12px 20px;
  203.     margin: 8px 0;
  204.     display: inline-block;
  205.     border: 1px solid #ccc;
  206.     border-radius: 4px;
  207.     box-sizing: border-box;
  208. }
  209.  
  210. input[type=text], select {
  211.     width: 100%;
  212.     padding: 12px 20px;
  213.     margin: 8px 0;
  214.     display: inline-block;
  215.     border: 1px solid #ccc;
  216.     border-radius: 4px;
  217.     box-sizing: border-box;
  218. }
  219.  
  220. input[type=submit] {
  221.     width: 100%;
  222.     background-color: #619bf9;
  223.     color: white;
  224.     padding: 14px 20px;
  225.     margin: 8px 0;
  226.     border: none;
  227.     border-radius: 4px;
  228.     cursor: pointer;
  229. }
  230.  
  231. input[type=submit]:hover {
  232.     background-color: #4286f4;
  233. }
  234.  
  235. div {
  236.     border-radius: 5px;
  237.     background-color: #f2f2f2;
  238.     padding: 20px;
  239. }
  240. </style>
  241.  
  242. </head>
  243.  
  244. <body onload="onload()">
  245.  
  246. <div>
  247. <p>
  248.   <form action="https://formcarry.com/s/MO2xo3fYFXS" method="POST" accept-charset="UTF-8" >
  249.  
  250.     <label for="voornaam">Voornaam:</label>
  251.     <input type="text" id="voornaam" name="Voornaam" placeholder="Uw voornaam" required>
  252.  
  253.     <label for="achternaam">Achternaam:</label>
  254.     <input type="text" id="Uw achternaam" name="Achternaam" placeholder="Uw achternaam" required>
  255.  
  256.     <!---------------------------------------------------------------------------------------------------------------------------------------->
  257.  
  258. <p>
  259.    
  260.     <label>Geboortedatum:</label>
  261.     <font color="#f2f2f2">_</font>
  262.    
  263.     <select font="select3" onclick="disable1()" name="geboortedag" id="dag">
  264.     <option value="0">Dag</option>
  265.     </select>
  266.    
  267.     <font id="myDIV1" class="hidden">
  268.     <select font="select2" onclick="disable1()" name="leeg" id="maand1">
  269.     <option value="leeg">Maand</option>
  270.     </select>
  271.     </font>
  272.    
  273.    
  274.     <font id="myDIV2" class="hidden">
  275.     <select font="select2" onclick="ClickMaand(), disable1(), disable3(), able2()" name="geboortemaand" id="maand2" onchange="VeranderenMaanden1(this);">
  276.     <option value="leeg">Maand</option>
  277.     <option value="januari">januari</option>
  278.     <option value="februari">februari</option>
  279.     <option value="maart">maart</option>
  280.     <option value="april">april</option>
  281.     <option value="mei">mei</option>
  282.     <option value="juni">juni</option>
  283.     <option value="juli">juli</option>
  284.     <option value="augustus">augustus</option>
  285.     <option value="september">september</option>
  286.     <option value="oktober">oktober</option>
  287.     <option value="november">november</option>
  288.     <option value="december">december</option>
  289.     </select>
  290.     </font>
  291.    
  292.    
  293.     <font id="myDIV3" class="hidden">
  294.     <select font="select2" onclick="ClickMaand(), disable1(), disable2(), able3()" name="geboortemaand" id="maand3" onchange="VeranderenMaanden1(this);">
  295.     <option value="leeg">Maand</option>
  296.     <option value="januari">januari</option>
  297.     <option value="februari">februari</option>
  298.     <option value="maart">maart</option>
  299.     <option value="april">april</option>
  300.     <option value="mei">mei</option>
  301.     <option value="juni">juni</option>
  302.     <option value="juli">juli</option>
  303.     <option value="augustus">augustus</option>
  304.     <option value="september">september</option>
  305.     <option value="oktober">oktober</option>
  306.     <option value="november">november</option>
  307.     <option value="december">december</option>
  308.     </select>
  309.     </font>
  310.    
  311.     <select font="select1" onclick="disable1()" onchange="return JaarVeranderen(), MaandVeranderen()" id="selectBox" name="geboortejaar">
  312.       <option id="leeg" value="leeg">Jaar</option>
  313.       <option id="jaar1" value="1920">1920</option>
  314.       <option id="jaar" value="1921">1921</option>
  315.       <option id="jaar" value="1922">1922</option>
  316.       <option id="jaar" value="1923">1923</option>
  317.       <option id="jaar1" value="1924">1924</option>
  318.       <option id="jaar" value="1925">1925</option>
  319.       <option id="jaar" value="1926">1926</option>
  320.       <option id="jaar" value="1927">1927</option>
  321.       <option id="jaar1" value="1928">1928</option>
  322.       <option id="jaar" value="1929">1929</option>
  323.       <option id="jaar" value="1930">1930</option>
  324.       <option id="jaar" value="1931">1931</option>
  325.       <option id="jaar1" value="1932">1932</option>
  326.       <option id="jaar" value="1933">1933</option>
  327.       <option id="jaar" value="1934">1934</option>
  328.       <option id="jaar" value="1935">1935</option>
  329.       <option id="jaar1" value="1936">1936</option>
  330.       <option id="jaar" value="1937">1937</option>
  331.       <option id="jaar" value="1938">1938</option>
  332.       <option id="jaar" value="1939">1939</option>
  333.       <option id="jaar1" value="1940">1940</option>
  334.       <option id="jaar" value="1941">1941</option>
  335.       <option id="jaar" value="1942">1942</option>
  336.       <option id="jaar" value="1943">1943</option>
  337.       <option id="jaar1" value="1944">1944</option>
  338.       <option id="jaar" value="1945">1945</option>
  339.       <option id="jaar" value="1946">1946</option>
  340.       <option id="jaar" value="1947">1947</option>
  341.       <option id="jaar1" value="1948">1948</option>
  342.       <option id="jaar" value="1949">1949</option>
  343.       <option id="jaar" value="1950">1950</option>
  344.       <option id="jaar" value="1951">1951</option>
  345.       <option id="jaar1" value="1952">1952</option>
  346.       <option id="jaar" value="1953">1953</option>
  347.       <option id="jaar" value="1954">1954</option>
  348.       <option id="jaar" value="1955">1955</option>
  349.       <option id="jaar1" value="1956">1956</option>
  350.       <option id="jaar" value="1957">1957</option>
  351.       <option id="jaar" value="1958">1958</option>
  352.       <option id="jaar" value="1959">1959</option>
  353.       <option id="jaar1" value="1960">1960</option>
  354.       <option id="jaar" value="1961">1961</option>
  355.       <option id="jaar" value="1962">1962</option>
  356.       <option id="jaar" value="1963">1963</option>
  357.       <option id="jaar1" value="1964">1964</option>
  358.       <option id="jaar" value="1965">1965</option>
  359.       <option id="jaar" value="1966">1966</option>
  360.       <option id="jaar" value="1967">1967</option>
  361.       <option id="jaar1" value="1968">1968</option>
  362.       <option id="jaar" value="1969">1969</option>
  363.       <option id="jaar" value="1970">1970</option>
  364.       <option id="jaar" value="1971">1971</option>
  365.       <option id="jaar1" value="1972">1972</option>
  366.       <option id="jaar" value="1973">1973</option>
  367.       <option id="jaar" value="1974">1974</option>
  368.       <option id="jaar" value="1975">1975</option>
  369.       <option id="jaar1" value="1976">1976</option>
  370.       <option id="jaar" value="1977">1977</option>
  371.       <option id="jaar" value="1978">1978</option>
  372.       <option id="jaar" value="1979">1979</option>
  373.       <option id="jaar1" value="1980">1980</option>
  374.       <option id="jaar" value="1981">1981</option>
  375.       <option id="jaar" value="1982">1982</option>
  376.       <option id="jaar" value="1983">1983</option>
  377.       <option id="jaar1" value="1984">1984</option>
  378.       <option id="jaar" value="1985">1985</option>
  379.       <option id="jaar" value="1986">1986</option>
  380.       <option id="jaar" value="1987">1987</option>
  381.       <option id="jaar1" value="1988">1988</option>
  382.       <option id="jaar" value="1989">1989</option>
  383.       <option id="jaar" value="1990">1990</option>
  384.       <option id="jaar" value="1991">1991</option>
  385.       <option id="jaar1" value="1992">1992</option>
  386.       <option id="jaar" value="1993">1993</option>
  387.       <option id="jaar" value="1994">1994</option>
  388.       <option id="jaar" value="1995">1995</option>
  389.       <option id="jaar1" value="1996">1996</option>
  390.       <option id="jaar" value="1997">1997</option>
  391.       <option id="jaar" value="1998">1998</option>
  392.       <option id="jaar" value="1999">1999</option>
  393.       <option id="jaar1" value="2000">2000</option>
  394.       <option id="jaar" value="2001">2001</option>
  395.       <option id="jaar" value="2002">2002</option>
  396.       <option id="jaar" value="2003">2003</option>
  397.       <option id="jaar1" value="2004">2004</option>
  398.       <option id="jaar" value="2005">2005</option>
  399.       <option id="jaar" value="2006">2006</option>
  400.       <option id="jaar" value="2007">2007</option>
  401.       <option id="jaar1" value="2008">2008</option>
  402.       <option id="jaar" value="2009">2009</option>
  403.       <option id="jaar" value="1010">2010</option>
  404.     </select>
  405.    
  406. <script>
  407. function disable1() {
  408.    document.getElementById("maand1").disabled = true;
  409. }
  410.  
  411. function disable2() {
  412.    document.getElementById("maand2").disabled = true;
  413. }
  414.  
  415. function disable3() {
  416.    document.getElementById("maand3").disabled = true;
  417. }
  418.  
  419. function able1() {
  420.    document.getElementById("maand1").disabled = false;
  421. }
  422.  
  423. function able2() {
  424.    document.getElementById("maand2").disabled = false;
  425. }
  426.  
  427. function able3() {
  428.    document.getElementById("maand3").disabled = false;
  429. }
  430. </script>
  431.  
  432.  
  433. <script>
  434.  
  435. function onload() {
  436.    JaarVeranderen();
  437.    document.getElementById("dag").disabled = true;
  438.    document.getElementById("maand1").disabled = true;
  439. }
  440. </script>
  441.    
  442. <script>
  443. function ClickMaand() {
  444.    document.getElementById("dag").disabled = false;
  445. }
  446. </script>
  447.    
  448. <script>
  449. function show4() {
  450.    var x = document.getElementById("myDIV4");
  451.    x.classList.remove("hidden");
  452. }
  453.  
  454. function hide4() {
  455.    var x = document.getElementById("myDIV4");
  456.    x.classList.add("hidden");
  457. }
  458. </script>
  459.    
  460. <script>
  461. function JaarVeranderen() {
  462.     var ele = document.getElementById("selectBox");
  463.     var selectedId = ele.options[ele.selectedIndex].id;
  464.  
  465.     var y = document.getElementById("demo");
  466.     if(selectedId=="leeg"){
  467.       document.getElementById("dag").disabled = true;
  468.     }
  469. }
  470. </script>
  471.    
  472. <script>
  473. function JaarVeranderen() {
  474.     var ele = document.getElementById("selectBox");
  475.     var selectedId = ele.options[ele.selectedIndex].id;
  476.  
  477.     var y = document.getElementById("demo");
  478.     if(selectedId=="leeg"){
  479.        show1();
  480.        hide2();
  481.        hide3();
  482.     }
  483.     else if(selectedId=="jaar"){
  484.        show2();
  485.        hide1();
  486.        hide3();
  487.     }
  488.     else if(selectedId=="jaar1"){
  489.        show3();
  490.        hide1();
  491.        hide2();
  492.     }
  493. }
  494. </script>
  495.  
  496. <script>
  497. function show1() {
  498.    var x = document.getElementById("myDIV1");
  499.    x.classList.remove("hidden");
  500. }
  501.  
  502. function show2() {
  503.    var y = document.getElementById("myDIV2");
  504.    y.classList.remove("hidden");
  505.    document.getElementById("maand2").disabled = false;
  506. }
  507.  
  508. function show3() {
  509.    var z = document.getElementById("myDIV3");
  510.    z.classList.remove("hidden");
  511.    document.getElementById("maand3").disabled = false;
  512. }
  513.  
  514. function hide1() {
  515.    var x = document.getElementById("myDIV1");
  516.    x.classList.add("hidden");
  517.    document.getElementById("maand1").disabled = false;
  518. }
  519.  
  520. function hide2() {
  521.    var y = document.getElementById("myDIV2");
  522.    y.classList.add("hidden");
  523.    document.getElementById("maand2").disabled = false;
  524. }
  525.  
  526. function hide3() {
  527.    var z = document.getElementById("myDIV3");
  528.    z.classList.add("hidden");
  529.    document.getElementById("maand3").disabled = true;
  530. }
  531. </script>
  532.  
  533. <script type="text/javascript">
  534.  var maanden1 = new Array(4)
  535.  maanden1["leeg"] = ["Dag"];
  536.  maanden1["januari"] = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"];
  537.  maanden1["februari"] = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29"];
  538.  maanden1["maart"] = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"];
  539.  maanden1["april"]= ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"];
  540.  maanden1["mei"]= ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"];
  541.  maanden1["juni"]= ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"];
  542.  maanden1["juli"]= ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"];
  543.  maanden1["augustus"]= ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"];
  544.  maanden1["september"]= ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"];
  545.  maanden1["oktober"]= ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"];
  546.  maanden1["november"]= ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"];
  547.  maanden1["december"]= ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"];
  548.  
  549.  
  550.  function VeranderenMaanden1(selectObj) {
  551.  
  552.  var idx = selectObj.selectedIndex;
  553.  
  554.  var which = selectObj.options[idx].value;
  555.  
  556.  cList = maanden1[which];
  557.  
  558.  var cSelect = document.getElementById("dag");
  559.  
  560.  var len=cSelect.options.length;
  561.  while (cSelect.options.length > 0) {
  562.  cSelect.remove(0);
  563.  }
  564.  var newOption;
  565.  
  566.  for (var i=0; i<cList.length; i++) {
  567. newOption = document.createElement("option");
  568. newOption.value = cList[i];
  569. newOption.text=cList[i];
  570.  
  571. try {
  572. cSelect.add(newOption);
  573. }
  574. catch (e) {
  575. cSelect.appendChild(newOption);
  576. }
  577. }
  578. }
  579. </script>
  580.  
  581. <script>
  582.  var maanden = new Array(4)
  583.  maanden["leeg"] = ["Dag"];
  584.  maanden["januari"] = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"];
  585.  maanden["februari"] = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28"];
  586.  maanden["maart"] = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"];
  587.  maanden["april"]= ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"];
  588.  maanden["mei"]= ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"];
  589.  maanden["juni"]= ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"];
  590.  maanden["juli"]= ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"];
  591.  maanden["augustus"]= ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"];
  592.  maanden["september"]= ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"];
  593.  maanden["oktober"]= ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"];
  594.  maanden["november"]= ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"];
  595.  maanden["december"]= ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"];
  596.  
  597.  
  598.  function VeranderenMaanden(selectObj) {
  599.  
  600.  var idx = selectObj.selectedIndex;
  601.  
  602.  var which = selectObj.options[idx].value;
  603.  
  604.  cList = maanden[which];
  605.  
  606.  var cSelect = document.getElementById("dag");
  607.  
  608.  var len=cSelect.options.length;
  609.  while (cSelect.options.length > 0) {
  610.  cSelect.remove(0);
  611.  }
  612.  var newOption;
  613.  
  614.  for (var i=0; i<cList.length; i++) {
  615. newOption = document.createElement("option");
  616. newOption.value = cList[i];
  617. newOption.text=cList[i];
  618.  
  619. try {
  620. cSelect.add(newOption);
  621. }
  622. catch (e) {
  623. cSelect.appendChild(newOption);
  624. }
  625. }
  626. }
  627. </script>
  628.  
  629. <script type="text/javascript">
  630.  var maanden2 = new Array(4)
  631.  maanden2["leeg"] = ["Dag"];
  632.  
  633.  function VeranderenMaanden2(selectObj) {
  634.  
  635.  var idx = selectObj.selectedIndex;
  636.  
  637.  var which = selectObj.options[idx].value;
  638.  
  639.  cList = maanden2[which];
  640.  
  641.  var cSelect = document.getElementById("dag");
  642.  
  643.  var len=cSelect.options.length;
  644.  while (cSelect.options.length > 0) {
  645.  cSelect.remove(0);
  646.  }
  647.  var newOption;
  648.  
  649.  for (var i=0; i<cList.length; i++) {
  650. newOption = document.createElement("option");
  651. newOption.value = cList[i];
  652. newOption.text=cList[i];
  653.  
  654. try {
  655. cSelect.add(newOption);
  656. }
  657. catch (e) {
  658. cSelect.appendChild(newOption);
  659. }
  660. }
  661. }
  662. </script>
  663.    
  664.    
  665.     </p>
  666.     <!---------------------------------------------------------------------------------------------------------------------------------------->
  667.  
  668.     <label for="email">E-mail:</label>
  669.     <input type="email" id="email" name="E-mail" placeholder="Uw e-mail" required>
  670.     <label for="telefoonnummer">Telefoonnummer:</label>
  671.     <input type="tel" id="telefoonnummer" name="Telefoonnummer" placeholder="Uw telefoonnummer" required>
  672.  
  673.     <label for="aankomstdatum">Aankomstdatum:</label>
  674.     <input type="date" font="date1" id="aankomstdatum" min="2018-07-01" name="Aankomstdatum" placeholder="Aankomstdatum" required>
  675.     <label for="vertrekdatum">Vertrekdatum:</label>
  676.     <input type="date" id="vertrekdatum" font="date1" min="2018-07-14" name="Vertrekdatum" placeholder="Vertrekdatum" required>
  677.  
  678.     <script>
  679.     var dateControl = document.querySelector('input[type="date"]');
  680.     dateControl.addEventListener("focus", function(){
  681.         if( this.min && !this.value ){
  682.            this.value = this.min;
  683.     }
  684.     });
  685.     </script>
  686.  
  687. <!-------------------------------------------------------------------------------------------------------------------------------------------------------------->
  688.     <div class="row">
  689.     <div class="column" style="background-color:#f2f2f2">
  690.     <h4><input id="myCheck" type="checkbox" name="1e medereiziger" onclick="myFunction()" value="Ja"><font color="#f2f2f2">_</font><b>1e Medereiziger:</b></h4>
  691.     <p id="text" style="display:none">
  692.     <br>
  693.     <label for="Voornaam 1e medereiziger">Voornaam medereiziger:</label>
  694.     <br>
  695.     <br>
  696.     <br>
  697.     <p id="1text" style="display:none">
  698.     <label for="Achternaam 1e medereiziger">Achternaam Medereiziger:</label>
  699.     <br>
  700.     <br>
  701.     <br>
  702.     <p id="2text" style="display:none">
  703.     <label for="geboortedatum 1e medereiziger">Geboortedatum Medereiziger:</label>
  704.     <br>
  705.     </p>
  706.  
  707.     <script>
  708.     function myFunction() {
  709.     var checkBox = document.getElementById("myCheck");
  710.     var text = document.getElementById("text");
  711.     if (checkBox.checked == true){
  712.         text.style.display = "block";
  713.     } else {
  714.        text.style.display = "none";
  715.     }
  716.     var text = document.getElementById("1text");
  717.     if (checkBox.checked == true){
  718.         text.style.display = "block";
  719.     } else {
  720.        text.style.display = "none";
  721.     }
  722.     var text = document.getElementById("2text");
  723.     if (checkBox.checked == true){
  724.         text.style.display = "block";
  725.     } else {
  726.        text.style.display = "none";
  727.     }
  728.     var text = document.getElementById("3text");
  729.     if (checkBox.checked == true){
  730.         text.style.display = "block";
  731.     } else {
  732.        text.style.display = "none";
  733.     }
  734.     var text = document.getElementById("4text");
  735.     if (checkBox.checked == true){
  736.         text.style.display = "block";
  737.     } else {
  738.        text.style.display = "none";
  739.     }
  740.     var text = document.getElementById("5text");
  741.     if (checkBox.checked == true){
  742.         text.style.display = "block";
  743.     } else {
  744.        text.style.display = "none";
  745.     }
  746.     }
  747.     </script>
  748.  
  749.     <h4><input id="myCheck1" type="checkbox" name="2e Medereiziger" onchange="myFunction1()" value="Ja"><font color="#f2f2f2">_</font><b>2e Medereiziger:</b></h4>
  750.  
  751.     <p id="text1" style="display:none">
  752.     <br>
  753.     <label for="Voornaam 2e medereiziger">Voornaam medereiziger:</label>
  754.     <br>
  755.     <br>
  756.     <br>
  757.     <p id="1text1" style="display:none">
  758.     <label for="Achternaam 2e medereiziger">Achternaam Medereiziger:</label>
  759.     <br>
  760.     <br>
  761.     <br>
  762.     <p id="2text1" style="display:none">
  763.     <label for="geboortedatum 2e medereiziger">Geboortedatum Medereiziger:</label>
  764.     <br>
  765.     </p>
  766.  
  767.     <script>
  768.     function myFunction1() {
  769.     var checkBox = document.getElementById("myCheck1");
  770.     var text = document.getElementById("text1");
  771.     if (checkBox.checked == true){
  772.         text.style.display = "block";
  773.     } else {
  774.        text.style.display = "none";
  775.     }
  776.     var text = document.getElementById("1text1");
  777.     if (checkBox.checked == true){
  778.         text.style.display = "block";
  779.     } else {
  780.        text.style.display = "none";
  781.     }
  782.     var text = document.getElementById("2text1");
  783.     if (checkBox.checked == true){
  784.         text.style.display = "block";
  785.     } else {
  786.        text.style.display = "none";
  787.     }
  788.     var text = document.getElementById("3text1");
  789.     if (checkBox.checked == true){
  790.         text.style.display = "block";
  791.     } else {
  792.        text.style.display = "none";
  793.     }
  794.     var text = document.getElementById("4text1");
  795.     if (checkBox.checked == true){
  796.         text.style.display = "block";
  797.     } else {
  798.        text.style.display = "none";
  799.     }
  800.     var text = document.getElementById("5text1");
  801.     if (checkBox.checked == true){
  802.         text.style.display = "block";
  803.     } else {
  804.        text.style.display = "none";
  805.     }
  806.     }
  807.     </script>
  808.  
  809.     <h4><input id="myCheck2" type="checkbox" name="3e Medereiziger" onclick="myFunction2()" value="Ja"><font color="#f2f2f2">_</font><b>3e Medereiziger:</b></h4>
  810.     <p id="text2" style="display:none">
  811.     <br>
  812.     <br>
  813.     <label for="Voornaam 3e medereiziger">Voornaam medereiziger:</label>
  814.     <br>
  815.     <br>
  816.     <br>
  817.     <p id="1text2" style="display:none">
  818.     <label for="Achternaam 3e medereiziger">Achternaam Medereiziger:</label>
  819.     <br>
  820.     <br>
  821.     <br>
  822.     <p id="2text2" style="display:none">
  823.     <label for="geboortedatum 3e medereiziger">Geboortedatum Medereiziger:</label>
  824.     <br>
  825.     </p>
  826.  
  827.     <script>
  828.     function myFunction2() {
  829.     var checkBox = document.getElementById("myCheck2");
  830.     var text = document.getElementById("text2");
  831.     if (checkBox.checked == true){
  832.         text.style.display = "block";
  833.     } else {
  834.        text.style.display = "none";
  835.     }
  836.     var text = document.getElementById("1text2");
  837.     if (checkBox.checked == true){
  838.         text.style.display = "block";
  839.     } else {
  840.        text.style.display = "none";
  841.     }
  842.     var text = document.getElementById("2text2");
  843.     if (checkBox.checked == true){
  844.         text.style.display = "block";
  845.     } else {
  846.        text.style.display = "none";
  847.     }
  848.     var text = document.getElementById("3text2");
  849.     if (checkBox.checked == true){
  850.         text.style.display = "block";
  851.     } else {
  852.        text.style.display = "none";
  853.     }
  854.     var text = document.getElementById("4text2");
  855.     if (checkBox.checked == true){
  856.         text.style.display = "block";
  857.     } else {
  858.        text.style.display = "none";
  859.     }
  860.     var text = document.getElementById("5text2");
  861.     if (checkBox.checked == true){
  862.         text.style.display = "block";
  863.     } else {
  864.        text.style.display = "none";
  865.     }
  866.     }
  867.     </script>
  868.  
  869.     <h4><input id="myCheck3" type="checkbox" name="4e Medereiziger" onclick="myFunction3()" value="Ja"><font color="#f2f2f2">_</font><b>4e Medereiziger:</b></h4>
  870.     <p id="text3" style="display:none">
  871.     <br>
  872.     <label for="Voornaam 4e medereiziger">Voornaam medereiziger:</label>
  873.     <br>
  874.     <br>
  875.     <br>
  876.     <p id="1text3" style="display:none">
  877.     <label for="Achternaam 4e medereiziger">Achternaam Medereiziger:</label>
  878.     <br>
  879.     <br>
  880.     <br>
  881.     <p id="2text3" style="display:none">
  882.     <label for="geboortedatum 4e medereiziger">Geboortedatum Medereiziger:</label>
  883.  
  884.     <script>
  885.     function myFunction3() {
  886.     var checkBox = document.getElementById("myCheck3");
  887.     var text = document.getElementById("text3");
  888.     if (checkBox.checked == true){
  889.         text.style.display = "block";
  890.     } else {
  891.        text.style.display = "none";
  892.     }
  893.     var text = document.getElementById("1text3");
  894.     if (checkBox.checked == true){
  895.         text.style.display = "block";
  896.     } else {
  897.        text.style.display = "none";
  898.     }
  899.     var text = document.getElementById("2text3");
  900.     if (checkBox.checked == true){
  901.         text.style.display = "block";
  902.     } else {
  903.        text.style.display = "none";
  904.     }
  905.     var text = document.getElementById("3text3");
  906.     if (checkBox.checked == true){
  907.         text.style.display = "block";
  908.     } else {
  909.        text.style.display = "none";
  910.     }
  911.     var text = document.getElementById("4text3");
  912.     if (checkBox.checked == true){
  913.         text.style.display = "block";
  914.     } else {
  915.        text.style.display = "none";
  916.     }
  917.     var text = document.getElementById("5text3");
  918.     if (checkBox.checked == true){
  919.         text.style.display = "block";
  920.     } else {
  921.        text.style.display = "none";
  922.     }
  923.     }
  924.     </script>
  925.  
  926.     <h4><input id="myCheck4" type="checkbox" name="5e Medereiziger" onclick="myFunction4()" value="Ja"><font color="#f2f2f2">_</font><b>5e Medereiziger:</b></h4>
  927.     <p id="text4" style="display:none">
  928.     <br>
  929.     <label for="Voornaam 5e medereiziger">Voornaam medereiziger:</label>
  930.     <br>
  931.     <br>
  932.     <br>
  933.     </p><p id="1text4" style="display:none">
  934.     <label for="Achternaam 5e medereiziger">Achternaam Medereiziger:</label>
  935.     <br>
  936.     <br>
  937.     <br>
  938.     <p id="2text4" style="display:none">
  939.     <label for="geboortedatum 5e medereiziger">Geboortedatum Medereiziger:</label>
  940.  
  941.     <script>
  942.     function myFunction4() {
  943.     var checkBox = document.getElementById("myCheck4");
  944.     var text = document.getElementById("text4");
  945.     if (checkBox.checked == true){
  946.         text.style.display = "block";
  947.     } else {
  948.        text.style.display = "none";
  949.     }
  950.     var text = document.getElementById("1text4");
  951.     if (checkBox.checked == true){
  952.         text.style.display = "block";
  953.     } else {
  954.        text.style.display = "none";
  955.     }
  956.     var text = document.getElementById("2text4");
  957.     if (checkBox.checked == true){
  958.         text.style.display = "block";
  959.     } else {
  960.        text.style.display = "none";
  961.     }
  962.     var text = document.getElementById("3text4");
  963.     if (checkBox.checked == true){
  964.         text.style.display = "block";
  965.     } else {
  966.        text.style.display = "none";
  967.     }
  968.     var text = document.getElementById("4text4");
  969.     if (checkBox.checked == true){
  970.         text.style.display = "block";
  971.     } else {
  972.        text.style.display = "none";
  973.     }
  974.     var text = document.getElementById("5text4");
  975.     if (checkBox.checked == true){
  976.         text.style.display = "block";
  977.     } else {
  978.        text.style.display = "none";
  979.     }
  980.     }
  981.     </script>
  982. <!--------------------------------------------------------------------------------------------------------------------------------------->
  983.     </div>
  984. <!--------------------------------------------------------------------------------------------------------------------------------------->
  985.  
  986.  
  987.     <div class="column" style="background-color:#f2f2f2">
  988.     <p id="3text" style="display:none">
  989.     <br>
  990.     <br>
  991.     <input type="text2" id="Voornaam 1e medereiziger" name="Voornaam 1e medereiziger" placeholder="Voornaam">
  992.     </p><p id="4text" style="display:none">
  993.     <input type="text2" id="Achternaam 1e medereiziger" name="Achternaam 1e medereiziger" placeholder="Achternaam">
  994.     </p><p id="5text" style="display:none">
  995.    
  996.     <input type="text2" name="Geboortedatum 1e medereiziger" placeholder="DD-MM-JJJJ">
  997.    
  998.     </p>
  999.     </div>
  1000.     <p class="big">
  1001.     <font color="#f2f2f2">_</font><br>
  1002.     <div class="column" style="background-color:#f2f2f2">
  1003.     <p id="3text1" style="display:none">
  1004.     <input type="text2" id="Voornaam 2e medereiziger" name="Voornaam 2e medereiziger" placeholder="Voornaam">
  1005.     </p><p id="4text1" style="display:none">
  1006.     <input type="text2" id="Achternaam 2e medereiziger" name="Achternaam 2e medereiziger" placeholder="Achternaam">
  1007.     </p><p id="5text1" style="display:none">
  1008.    
  1009.     <input type="text2" name="Geboortedatum 2e medereiziger" placeholder="DD-MM-JJJJ">
  1010.    
  1011.     </p>
  1012.     </div>
  1013.     <div class="column" style="background-color:#f2f2f2">
  1014.     <p id="3text2" style="display:none">
  1015.     <input type="text2" id="Voornaam 3e medereiziger" name="Voornaam 3e medereiziger" placeholder="Voornaam">
  1016.     </p><p id="4text2" style="display:none">
  1017.     <input type="text2" id="Achternaam 3e medereiziger" name="Achternaam 3e medereiziger" placeholder="Achternaam">
  1018.     </p><p id="5text2" style="display:none">
  1019.    
  1020.     <input type="text2" name="Geboortedatum 3e medereiziger" placeholder="DD-MM-JJJJ">
  1021.    
  1022.     </p>
  1023.     </div>
  1024.     <div class="column" style="background-color:#f2f2f2">
  1025.     <p id="3text3" style="display:none">
  1026.     <input type="text2" id="Voornaam 4e medereiziger" name="Voornaam 4e medereiziger" placeholder="Voornaam">
  1027.     </p><p id="4text3" style="display:none">
  1028.     <input type="text2" id="Achternaam 4e medereiziger" name="Achternaam 4e medereiziger" placeholder="Achternaam">
  1029.     </p><p id="5text3" style="display:none">
  1030.    
  1031.     <input type="text2" name="Geboortedatum 4e medereiziger" placeholder="DD-MM-JJJJ">
  1032.    
  1033.     </p>
  1034.     </div>
  1035.     <div class="column" style="background-color:#f2f2f2">
  1036.     <p id="3text4" style="display:none">
  1037.     <input type="text2" id="Voornaam 5e medereiziger" name="Voornaam 5e medereiziger" placeholder="Voornaam">
  1038.     </p><p id="4text4" style="display:none">
  1039.     <input type="text2" id="Achternaam 5e medereiziger" name="Achternaam 5e medereiziger" placeholder="Achternaam">
  1040.     </p><p id="5text4" style="display:none">
  1041.    
  1042.     <input type="text2" name="Geboortedatum 5e medereiziger" placeholder="DD-MM-JJJJ">
  1043.    
  1044.     </p>
  1045.     </div>
  1046.    
  1047. <!--------------------------------------------------------------------------------------------------------------------------------------->
  1048.     </div>
  1049. <!--------------------------------------------------------------------------------------------------------------------------------------->
  1050.     <input onclick="document.getElementById('id01').style.display='block'" type="submit" value="Verzenden">
  1051.     </form>
  1052. </div>
  1053.    
  1054. </body>
  1055.  
  1056. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!