JSFiddle - React, Tailwind, and code Playground

by musicreader

HTML

<script src="https://sslsites.de/marco.leone.nl/ns/api.js"></script>
<div id="reportButtons">
  <button>
  Service
  </button>
  <button>
  Catering
  </button>
  <button>
  SOS
  </button>
</div>

<table id="meldingScherm">
<tr><th colspan="2" id="categoryName"></th></tr>
<tr>
  <th>Trein:</th>
  <td id="treinNaam"></td>
</tr>
<tr>
  <th>Rijtuignummer:</th>
  <td><input type="text" id="rijtuignummer" onchange="rijtuigChange()"/></td>
</tr>
<tr>
  <th>Locatie:</th>
  <td><input type="text" id="locatie"/></td>
</tr>
<tr>
  <th>Opmerking:</th>
  <td><textarea id="opmerking"></textarea></td>
</tr>
<tr>
<td colspan="2"><button id="verzendButton" onClick="formVerzenden()">
Verzenden
</button></td>
</tr>
</table>

CSS

#reportButtons button{
  height:50px;
  width:30%;
}

#reportButtons{
  text-align:center;
}

#meldingScherm{
  display:none;
  border:0px;
}

#meldingScherm td{
 background:yellow; 
}

#meldingScherm th{
 background:blue;
 color:white;
 padding:10px;
}

input, textarea{
  width:400px;
}

textarea{
  height:100px;
}

#verzendButton{
  height:50px;
  width:100%;
}

JavaScript

var reportCategory="";
var ritnummer="";

document.addEventListener("DOMContentLoaded", documentLoaded, false);

function documentLoaded(){

document.getElementById("reportButtons").childNodes.forEach(function(el){
    el.onclick=doButtonClick.bind(this,el.innerHTML);
  });
}


function doButtonClick(category){
		reportCategory=category.trim();
    document.getElementById("reportButtons").style.display="none";
    document.getElementById("meldingScherm").style.display="block";
    document.getElementById("categoryName").innerHTML=category;
}

function rijtuigChange(){
	 var rijtuignummer=document.getElementById("rijtuignummer").value;
   getRitnummer(rijtuignummer,function(rit){
   		ritnummer=rit;
   		getTreinNaam(rit,function(naam){
      	document.getElementById("treinNaam").innerHTML=naam;
      });   		
   })
}

function formVerzenden(){
	  var r={};
    r.ritnummer=ritnummer;
    r.soort=reportCategory;
		r.rijtuignummer=parseInt(document.getElementById("rijtuignummer").value);
    r.locatie=document.getElementById("locatie").value;
    r.Opmerking=document.getElementById("opmerking").value;
    
    alert(JSON.stringify(r));
}