API tools faq
paste
Advertisement
Dennis-Hermes

Beschikbaarheids formulier | versie 3

Dennis-Hermes
Jul 21st, 2018
98
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 28.82 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: 20%;
  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.5%;
  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: 20%;
  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[type=text2], 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=text3], select {
  181.     width: 42%;
  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.  
  241. input[font=40] {
  242.     width: 100%;
  243.     padding: 12px 20px;
  244.     margin: 8px 0;
  245.     display: inline-block;
  246.     border: 1px solid #ccc;
  247.     border-radius: 4px;
  248.     box-sizing: border-box;
  249. }
  250. </style>
  251.  
  252. </head>
  253.  
  254. <body onload="onload()">
  255.  
  256. <div>
  257. <p>
  258.   <form action="https://formcarry.com/s/MO2xo3fYFXS" method="POST" accept-charset="UTF-8" onsubmit="modal(); return false;">
  259.  
  260.   <!---------------------------------------------------------------------------------------------------------------------------------------->
  261.  
  262.   <div id="id01" class="w3-modal">
  263.     <div class="w3-modal-content">
  264.       <div class="w3-container">
  265.         <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
  266.        
  267.        
  268.        
  269.         <p><center><h1><b>Bedankt!</b></h1></center></p>
  270.         <p><center>Bedankt voor uw aanvraag, we reageren zo spoedig mogelijk terug.</center></p>
  271.         <br>
  272.         <br>
  273.         <br>
  274.         <br>
  275.         <div class="w3-display-bottomleft"><font size="0.5" >
  276.         - <a href="http://spanishgardencalpe.tk">
  277.         Het Spanish Garden Calpe Team</a>
  278.         <img src="1.png" width="42" height="42">
  279.         & <a href="http://dhwebservices.nl">
  280.         DHwebservices.nl</a>
  281.         <img src="2.png" width="35" height="25">
  282.         </font></div>
  283.        
  284.        
  285.        
  286.      </div>
  287.    </div>
  288.    </div>
  289.  
  290.  <!---------------------------------------------------------------------------------------------------------------------------------------->
  291.  
  292.    <label for="voornaam">Naam:</label>
  293.    <input type="text3" id="voornaam" name="Voornaam" placeholder="Uw voornaam" required>
  294.    <input type="text3" id="Uw achternaam" name="Achternaam" placeholder="Uw achternaam" required>
  295.  
  296.    <!---------------------------------------------------------------------------------------------------------------------------------------->
  297.  
  298. <p>
  299.  
  300. <script>
  301. function modal() {
  302.    document.getElementById('id01').style.display='block'
  303. }
  304. </script>
  305.    
  306.     <label>Geboortedatum:</label>
  307.     <font color="#f2f2f2">_</font>
  308.    
  309.     <select font="select3" name="geboortedag" id="dag">
  310.    <option value="0">Dag</option>
  311.     </select>
  312.    
  313.     <select font="select2" name="geboortemaand" id="maand2" onchange="VeranderenMaanden1(this);">
  314.     <option value="leeg">Maand</option>
  315.     <option value="januari">januari</option>
  316.     <option value="februari">februari</option>
  317.     <option value="maart">maart</option>
  318.     <option value="april">april</option>
  319.     <option value="mei">mei</option>
  320.     <option value="juni">juni</option>
  321.     <option value="juli">juli</option>
  322.     <option value="augustus">augustus</option>
  323.     <option value="september">september</option>
  324.     <option value="oktober">oktober</option>
  325.     <option value="november">november</option>
  326.     <option value="december">december</option>
  327.     </select>
  328.    
  329.     <select font="select1" onclick="disable1()" onchange="return JaarVeranderen(), MaandVeranderen()" id="selectBox" name="geboortejaar">
  330.       <option id="leeg" value="leeg">Jaar</option>
  331.       <option id="jaar1" value="1920">1920</option>
  332.       <option id="jaar" value="1921">1921</option>
  333.       <option id="jaar" value="1922">1922</option>
  334.       <option id="jaar" value="1923">1923</option>
  335.       <option id="jaar1" value="1924">1924</option>
  336.       <option id="jaar" value="1925">1925</option>
  337.       <option id="jaar" value="1926">1926</option>
  338.       <option id="jaar" value="1927">1927</option>
  339.       <option id="jaar1" value="1928">1928</option>
  340.       <option id="jaar" value="1929">1929</option>
  341.       <option id="jaar" value="1930">1930</option>
  342.       <option id="jaar" value="1931">1931</option>
  343.       <option id="jaar1" value="1932">1932</option>
  344.       <option id="jaar" value="1933">1933</option>
  345.       <option id="jaar" value="1934">1934</option>
  346.       <option id="jaar" value="1935">1935</option>
  347.       <option id="jaar1" value="1936">1936</option>
  348.       <option id="jaar" value="1937">1937</option>
  349.       <option id="jaar" value="1938">1938</option>
  350.       <option id="jaar" value="1939">1939</option>
  351.       <option id="jaar1" value="1940">1940</option>
  352.       <option id="jaar" value="1941">1941</option>
  353.       <option id="jaar" value="1942">1942</option>
  354.       <option id="jaar" value="1943">1943</option>
  355.       <option id="jaar1" value="1944">1944</option>
  356.       <option id="jaar" value="1945">1945</option>
  357.       <option id="jaar" value="1946">1946</option>
  358.       <option id="jaar" value="1947">1947</option>
  359.       <option id="jaar1" value="1948">1948</option>
  360.       <option id="jaar" value="1949">1949</option>
  361.       <option id="jaar" value="1950">1950</option>
  362.       <option id="jaar" value="1951">1951</option>
  363.       <option id="jaar1" value="1952">1952</option>
  364.       <option id="jaar" value="1953">1953</option>
  365.       <option id="jaar" value="1954">1954</option>
  366.       <option id="jaar" value="1955">1955</option>
  367.       <option id="jaar1" value="1956">1956</option>
  368.       <option id="jaar" value="1957">1957</option>
  369.       <option id="jaar" value="1958">1958</option>
  370.       <option id="jaar" value="1959">1959</option>
  371.       <option id="jaar1" value="1960">1960</option>
  372.       <option id="jaar" value="1961">1961</option>
  373.       <option id="jaar" value="1962">1962</option>
  374.       <option id="jaar" value="1963">1963</option>
  375.       <option id="jaar1" value="1964">1964</option>
  376.       <option id="jaar" value="1965">1965</option>
  377.       <option id="jaar" value="1966">1966</option>
  378.       <option id="jaar" value="1967">1967</option>
  379.       <option id="jaar1" value="1968">1968</option>
  380.       <option id="jaar" value="1969">1969</option>
  381.       <option id="jaar" value="1970">1970</option>
  382.       <option id="jaar" value="1971">1971</option>
  383.       <option id="jaar1" value="1972">1972</option>
  384.       <option id="jaar" value="1973">1973</option>
  385.       <option id="jaar" value="1974">1974</option>
  386.       <option id="jaar" value="1975">1975</option>
  387.       <option id="jaar1" value="1976">1976</option>
  388.       <option id="jaar" value="1977">1977</option>
  389.       <option id="jaar" value="1978">1978</option>
  390.       <option id="jaar" value="1979">1979</option>
  391.       <option id="jaar1" value="1980">1980</option>
  392.       <option id="jaar" value="1981">1981</option>
  393.       <option id="jaar" value="1982">1982</option>
  394.       <option id="jaar" value="1983">1983</option>
  395.       <option id="jaar1" value="1984">1984</option>
  396.       <option id="jaar" value="1985">1985</option>
  397.       <option id="jaar" value="1986">1986</option>
  398.       <option id="jaar" value="1987">1987</option>
  399.       <option id="jaar1" value="1988">1988</option>
  400.       <option id="jaar" value="1989">1989</option>
  401.       <option id="jaar" value="1990">1990</option>
  402.       <option id="jaar" value="1991">1991</option>
  403.       <option id="jaar1" value="1992">1992</option>
  404.       <option id="jaar" value="1993">1993</option>
  405.       <option id="jaar" value="1994">1994</option>
  406.       <option id="jaar" value="1995">1995</option>
  407.       <option id="jaar1" value="1996">1996</option>
  408.       <option id="jaar" value="1997">1997</option>
  409.       <option id="jaar" value="1998">1998</option>
  410.       <option id="jaar" value="1999">1999</option>
  411.       <option id="jaar1" value="2000">2000</option>
  412.       <option id="jaar" value="2001">2001</option>
  413.       <option id="jaar" value="2002">2002</option>
  414.       <option id="jaar" value="2003">2003</option>
  415.       <option id="jaar1" value="2004">2004</option>
  416.       <option id="jaar" value="2005">2005</option>
  417.       <option id="jaar" value="2006">2006</option>
  418.       <option id="jaar" value="2007">2007</option>
  419.       <option id="jaar1" value="2008">2008</option>
  420.       <option id="jaar" value="2009">2009</option>
  421.       <option id="jaar" value="1010">2010</option>
  422.     </select>
  423.    
  424. <script>
  425. function disable1() {
  426.    document.getElementById("maand1").disabled = true;
  427. }
  428.  
  429. function disable2() {
  430.    document.getElementById("maand2").disabled = true;
  431. }
  432.  
  433. function disable3() {
  434.    document.getElementById("maand3").disabled = true;
  435. }
  436.  
  437. function able1() {
  438.    document.getElementById("maand1").disabled = false;
  439. }
  440.  
  441. function able2() {
  442.    document.getElementById("maand2").disabled = false;
  443. }
  444.  
  445. function able3() {
  446.    document.getElementById("maand3").disabled = false;
  447. }
  448. </script>
  449.  
  450.  
  451. <script>
  452.  var maanden1 = new Array(4)
  453.  maanden1["leeg"] = ["Dag"];
  454.  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"];
  455.  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"];
  456.  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"];
  457.  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"];
  458.  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"];
  459.  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"];
  460.  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"];
  461.  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"];
  462.  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"];
  463.  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"];
  464.  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"];
  465.  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"];
  466.  
  467.  
  468.  function VeranderenMaanden1(selectObj) {
  469.  
  470.  var idx = selectObj.selectedIndex;
  471.  
  472.  var which = selectObj.options[idx].value;
  473.  
  474.  cList = maanden1[which];
  475.  
  476.  var cSelect = document.getElementById("dag");
  477.  
  478.  var len=cSelect.options.length;
  479.  while (cSelect.options.length > 0) {
  480.  cSelect.remove(0);
  481.  }
  482.  var newOption;
  483.  
  484.  for (var i=0; i<cList.length; i++) {
  485. newOption = document.createElement("option");
  486. newOption.value = cList[i];
  487. newOption.text=cList[i];
  488.  
  489. try {
  490. cSelect.add(newOption);
  491. }
  492. catch (e) {
  493. cSelect.appendChild(newOption);
  494. }
  495. }
  496. }
  497. </script>
  498.  
  499.     </p>
  500.     <!---------------------------------------------------------------------------------------------------------------------------------------->
  501.    
  502.     <p>
  503.     <label for="email">E-mail:</label>
  504.     <input type="email" id="email" name="E-mail" placeholder="Uw e-mail" required>
  505.     <label for="email">Telefoonnummer:</label>
  506.     <input type="tel" id="telefoonnummer" name="Telefoonnummer" placeholder="Uw telefoonnummer" required>
  507.     </p>
  508.    
  509.     <p>
  510.     <label for="aankomstdatum">Aankomstdatum:</label><font color="#f2f2f2">_</font>
  511.     <input style="width: 70%;" type="date" font="date1" id="aankomstdatum" min="2018-07-01" name="Aankomstdatum" placeholder="Aankomstdatum" required>
  512.     </p>
  513.    
  514.     <p>
  515.     <label for="vertrekdatum">Vertrekdatum:</label><font color="#f2f2f2">_</font>
  516.     <input style="width: 70%;" type="date" id="vertrekdatum" font="date1" min="2018-07-14" name="Vertrekdatum" placeholder="Vertrekdatum" required>
  517.     </p>
  518.  
  519. <!-------------------------------------------------------------------------------------------------------------------------------------------------------------->
  520.     <div class="row">
  521.     <div class="column" style="background-color:#f2f2f2">
  522.     <h4><input id="myCheck" type="checkbox" name="1e medereiziger" onclick="myFunction()" value="Ja"><font color="#f2f2f2">_</font><b>1e Medereiziger:</b></h4>
  523.     <p id="text" style="display:none">
  524.     <br>
  525.     <label for="Voornaam 1e medereiziger">Voornaam medereiziger:</label>
  526.     <br>
  527.     <br>
  528.     <br>
  529.     <p id="1text" style="display:none">
  530.     <label for="Achternaam 1e medereiziger">Achternaam Medereiziger:</label>
  531.     <br>
  532.     <br>
  533.     <br>
  534.     <p id="2text" style="display:none">
  535.     <label for="geboortedatum 1e medereiziger">Geboortedatum Medereiziger:</label>
  536.     <br>
  537.     </p>
  538.  
  539.     <script>
  540.     function myFunction() {
  541.     var checkBox = document.getElementById("myCheck");
  542.     var text = document.getElementById("text");
  543.     if (checkBox.checked == true){
  544.         text.style.display = "block";
  545.     } else {
  546.        text.style.display = "none";
  547.     }
  548.     var text = document.getElementById("1text");
  549.     if (checkBox.checked == true){
  550.         text.style.display = "block";
  551.     } else {
  552.        text.style.display = "none";
  553.     }
  554.     var text = document.getElementById("2text");
  555.     if (checkBox.checked == true){
  556.         text.style.display = "block";
  557.     } else {
  558.        text.style.display = "none";
  559.     }
  560.     var text = document.getElementById("3text");
  561.     if (checkBox.checked == true){
  562.         text.style.display = "block";
  563.     } else {
  564.        text.style.display = "none";
  565.     }
  566.     var text = document.getElementById("4text");
  567.     if (checkBox.checked == true){
  568.         text.style.display = "block";
  569.     } else {
  570.        text.style.display = "none";
  571.     }
  572.     var text = document.getElementById("5text");
  573.     if (checkBox.checked == true){
  574.         text.style.display = "block";
  575.     } else {
  576.        text.style.display = "none";
  577.     }
  578.     }
  579.     </script>
  580.  
  581.     <h4><input id="myCheck1" type="checkbox" name="2e Medereiziger" onchange="myFunction1()" value="Ja"><font color="#f2f2f2">_</font><b>2e Medereiziger:</b></h4>
  582.  
  583.     <p id="text1" style="display:none">
  584.     <br>
  585.     <label for="Voornaam 2e medereiziger">Voornaam medereiziger:</label>
  586.     <br>
  587.     <br>
  588.     <br>
  589.     <p id="1text1" style="display:none">
  590.     <label for="Achternaam 2e medereiziger">Achternaam Medereiziger:</label>
  591.     <br>
  592.     <br>
  593.     <br>
  594.     <p id="2text1" style="display:none">
  595.     <label for="geboortedatum 2e medereiziger">Geboortedatum Medereiziger:</label>
  596.     <br>
  597.     </p>
  598.  
  599.     <script>
  600.     function myFunction1() {
  601.     var checkBox = document.getElementById("myCheck1");
  602.     var text = document.getElementById("text1");
  603.     if (checkBox.checked == true){
  604.         text.style.display = "block";
  605.     } else {
  606.        text.style.display = "none";
  607.     }
  608.     var text = document.getElementById("1text1");
  609.     if (checkBox.checked == true){
  610.         text.style.display = "block";
  611.     } else {
  612.        text.style.display = "none";
  613.     }
  614.     var text = document.getElementById("2text1");
  615.     if (checkBox.checked == true){
  616.         text.style.display = "block";
  617.     } else {
  618.        text.style.display = "none";
  619.     }
  620.     var text = document.getElementById("3text1");
  621.     if (checkBox.checked == true){
  622.         text.style.display = "block";
  623.     } else {
  624.        text.style.display = "none";
  625.     }
  626.     var text = document.getElementById("4text1");
  627.     if (checkBox.checked == true){
  628.         text.style.display = "block";
  629.     } else {
  630.        text.style.display = "none";
  631.     }
  632.     var text = document.getElementById("5text1");
  633.     if (checkBox.checked == true){
  634.         text.style.display = "block";
  635.     } else {
  636.        text.style.display = "none";
  637.     }
  638.     }
  639.     </script>
  640.  
  641.     <h4><input id="myCheck2" type="checkbox" name="3e Medereiziger" onclick="myFunction2()" value="Ja"><font color="#f2f2f2">_</font><b>3e Medereiziger:</b></h4>
  642.     <p id="text2" style="display:none">
  643.     <br>
  644.     <br>
  645.     <label for="Voornaam 3e medereiziger">Voornaam medereiziger:</label>
  646.     <br>
  647.     <br>
  648.     <br>
  649.     <p id="1text2" style="display:none">
  650.     <label for="Achternaam 3e medereiziger">Achternaam Medereiziger:</label>
  651.     <br>
  652.     <br>
  653.     <br>
  654.     <p id="2text2" style="display:none">
  655.     <label for="geboortedatum 3e medereiziger">Geboortedatum Medereiziger:</label>
  656.     <br>
  657.     </p>
  658.  
  659.     <script>
  660.     function myFunction2() {
  661.     var checkBox = document.getElementById("myCheck2");
  662.     var text = document.getElementById("text2");
  663.     if (checkBox.checked == true){
  664.         text.style.display = "block";
  665.     } else {
  666.        text.style.display = "none";
  667.     }
  668.     var text = document.getElementById("1text2");
  669.     if (checkBox.checked == true){
  670.         text.style.display = "block";
  671.     } else {
  672.        text.style.display = "none";
  673.     }
  674.     var text = document.getElementById("2text2");
  675.     if (checkBox.checked == true){
  676.         text.style.display = "block";
  677.     } else {
  678.        text.style.display = "none";
  679.     }
  680.     var text = document.getElementById("3text2");
  681.     if (checkBox.checked == true){
  682.         text.style.display = "block";
  683.     } else {
  684.        text.style.display = "none";
  685.     }
  686.     var text = document.getElementById("4text2");
  687.     if (checkBox.checked == true){
  688.         text.style.display = "block";
  689.     } else {
  690.        text.style.display = "none";
  691.     }
  692.     var text = document.getElementById("5text2");
  693.     if (checkBox.checked == true){
  694.         text.style.display = "block";
  695.     } else {
  696.        text.style.display = "none";
  697.     }
  698.     }
  699.     </script>
  700.  
  701.     <h4><input id="myCheck3" type="checkbox" name="4e Medereiziger" onclick="myFunction3()" value="Ja"><font color="#f2f2f2">_</font><b>4e Medereiziger:</b></h4>
  702.     <p id="text3" style="display:none">
  703.     <br>
  704.     <label for="Voornaam 4e medereiziger">Voornaam medereiziger:</label>
  705.     <br>
  706.     <br>
  707.     <br>
  708.     <p id="1text3" style="display:none">
  709.     <label for="Achternaam 4e medereiziger">Achternaam Medereiziger:</label>
  710.     <br>
  711.     <br>
  712.     <br>
  713.     <p id="2text3" style="display:none">
  714.     <label for="geboortedatum 4e medereiziger">Geboortedatum Medereiziger:</label>
  715.  
  716.     <script>
  717.     function myFunction3() {
  718.     var checkBox = document.getElementById("myCheck3");
  719.     var text = document.getElementById("text3");
  720.     if (checkBox.checked == true){
  721.         text.style.display = "block";
  722.     } else {
  723.        text.style.display = "none";
  724.     }
  725.     var text = document.getElementById("1text3");
  726.     if (checkBox.checked == true){
  727.         text.style.display = "block";
  728.     } else {
  729.        text.style.display = "none";
  730.     }
  731.     var text = document.getElementById("2text3");
  732.     if (checkBox.checked == true){
  733.         text.style.display = "block";
  734.     } else {
  735.        text.style.display = "none";
  736.     }
  737.     var text = document.getElementById("3text3");
  738.     if (checkBox.checked == true){
  739.         text.style.display = "block";
  740.     } else {
  741.        text.style.display = "none";
  742.     }
  743.     var text = document.getElementById("4text3");
  744.     if (checkBox.checked == true){
  745.         text.style.display = "block";
  746.     } else {
  747.        text.style.display = "none";
  748.     }
  749.     var text = document.getElementById("5text3");
  750.     if (checkBox.checked == true){
  751.         text.style.display = "block";
  752.     } else {
  753.        text.style.display = "none";
  754.     }
  755.     }
  756.     </script>
  757.  
  758.     <h4><input id="myCheck4" type="checkbox" name="5e Medereiziger" onclick="myFunction4()" value="Ja"><font color="#f2f2f2">_</font><b>5e Medereiziger:</b></h4>
  759.     <p id="text4" style="display:none">
  760.     <br>
  761.     <label for="Voornaam 5e medereiziger">Voornaam medereiziger:</label>
  762.     <br>
  763.     <br>
  764.     <br>
  765.     </p><p id="1text4" style="display:none">
  766.     <label for="Achternaam 5e medereiziger">Achternaam Medereiziger:</label>
  767.     <br>
  768.     <br>
  769.     <br>
  770.     <p id="2text4" style="display:none">
  771.     <label for="geboortedatum 5e medereiziger">Geboortedatum Medereiziger:</label>
  772.  
  773.     <script>
  774.     function myFunction4() {
  775.     var checkBox = document.getElementById("myCheck4");
  776.     var text = document.getElementById("text4");
  777.     if (checkBox.checked == true){
  778.         text.style.display = "block";
  779.     } else {
  780.        text.style.display = "none";
  781.     }
  782.     var text = document.getElementById("1text4");
  783.     if (checkBox.checked == true){
  784.         text.style.display = "block";
  785.     } else {
  786.        text.style.display = "none";
  787.     }
  788.     var text = document.getElementById("2text4");
  789.     if (checkBox.checked == true){
  790.         text.style.display = "block";
  791.     } else {
  792.        text.style.display = "none";
  793.     }
  794.     var text = document.getElementById("3text4");
  795.     if (checkBox.checked == true){
  796.         text.style.display = "block";
  797.     } else {
  798.        text.style.display = "none";
  799.     }
  800.     var text = document.getElementById("4text4");
  801.     if (checkBox.checked == true){
  802.         text.style.display = "block";
  803.     } else {
  804.        text.style.display = "none";
  805.     }
  806.     var text = document.getElementById("5text4");
  807.     if (checkBox.checked == true){
  808.         text.style.display = "block";
  809.     } else {
  810.        text.style.display = "none";
  811.     }
  812.     }
  813.     </script>
  814. <!--------------------------------------------------------------------------------------------------------------------------------------->
  815.     </div>
  816. <!--------------------------------------------------------------------------------------------------------------------------------------->
  817.  
  818.  
  819.     <div class="column" style="background-color:#f2f2f2">
  820.     <p id="3text" style="display:none">
  821.     <br>
  822.     <br>
  823.     <input type="text2" id="Voornaam 1e medereiziger" name="Voornaam 1e medereiziger" placeholder="Voornaam">
  824.     </p><p id="4text" style="display:none">
  825.     <input type="text2" id="Achternaam 1e medereiziger" name="Achternaam 1e medereiziger" placeholder="Achternaam">
  826.     </p><p id="5text" style="display:none">
  827.    
  828.     <input type="text2" name="Geboortedatum 1e medereiziger" placeholder="DD-MM-JJJJ">
  829.    
  830.     </p>
  831.     </div>
  832.     <p class="big">
  833.     <font color="#f2f2f2">_</font><br>
  834.     <div class="column" style="background-color:#f2f2f2">
  835.     <p id="3text1" style="display:none">
  836.     <input type="text2" id="Voornaam 2e medereiziger" name="Voornaam 2e medereiziger" placeholder="Voornaam">
  837.     </p><p id="4text1" style="display:none">
  838.     <input type="text2" id="Achternaam 2e medereiziger" name="Achternaam 2e medereiziger" placeholder="Achternaam">
  839.     </p><p id="5text1" style="display:none">
  840.    
  841.     <input type="text2" name="Geboortedatum 2e medereiziger" placeholder="DD-MM-JJJJ">
  842.    
  843.     </p>
  844.     </div>
  845.     <div class="column" style="background-color:#f2f2f2">
  846.     <p id="3text2" style="display:none">
  847.     <input type="text2" id="Voornaam 3e medereiziger" name="Voornaam 3e medereiziger" placeholder="Voornaam">
  848.     </p><p id="4text2" style="display:none">
  849.     <input type="text2" id="Achternaam 3e medereiziger" name="Achternaam 3e medereiziger" placeholder="Achternaam">
  850.     </p><p id="5text2" style="display:none">
  851.    
  852.     <input type="text2" name="Geboortedatum 3e medereiziger" placeholder="DD-MM-JJJJ">
  853.    
  854.     </p>
  855.     </div>
  856.     <div class="column" style="background-color:#f2f2f2">
  857.     <p id="3text3" style="display:none">
  858.     <input type="text2" id="Voornaam 4e medereiziger" name="Voornaam 4e medereiziger" placeholder="Voornaam">
  859.     </p><p id="4text3" style="display:none">
  860.     <input type="text2" id="Achternaam 4e medereiziger" name="Achternaam 4e medereiziger" placeholder="Achternaam">
  861.     </p><p id="5text3" style="display:none">
  862.    
  863.     <input type="text2" name="Geboortedatum 4e medereiziger" placeholder="DD-MM-JJJJ">
  864.    
  865.     </p>
  866.     </div>
  867.     <div class="column" style="background-color:#f2f2f2">
  868.     <p id="3text4" style="display:none">
  869.     <input type="text2" id="Voornaam 5e medereiziger" name="Voornaam 5e medereiziger" placeholder="Voornaam">
  870.     </p><p id="4text4" style="display:none">
  871.     <input type="text2" id="Achternaam 5e medereiziger" name="Achternaam 5e medereiziger" placeholder="Achternaam">
  872.     </p><p id="5text4" style="display:none">
  873.    
  874.     <input type="text2" name="Geboortedatum 5e medereiziger" placeholder="DD-MM-JJJJ">
  875.    
  876.     </p>
  877.     </div>
  878.    
  879. <!--------------------------------------------------------------------------------------------------------------------------------------->
  880.     </div>
  881. <!--------------------------------------------------------------------------------------------------------------------------------------->
  882.     <input type="submit" value="Verzenden">
  883.     </form>
  884. </div>
  885.    
  886. </body>
  887.  
  888. </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!