postcode.html.erb

<form id="postcodecheck">
  <input id="postcode" name="postcode" placeholder="1234AA">
  <input id="housenumber" name="housenumber" placeholder="1">
  <input id="housenumber_addition" name="housenumber_addition" placeholder="a">
  <input type="submit" value="Check!" class="next-button">
  <p class="postcodecheck-result"></p>
</form>

<script>
  $(function() {
    $('#postcodecheck').submit(function (e) {
      e.preventDefault();
      $('.postcodecheck-result').text('');
      var postcode = $(this).find('#postcode').val();
      var housenumber = $(this).find('#housenumber').val();
      var housenumber_addition = $(this).find('#housenumber_addition').val();
      $.ajax({
        type: 'GET',
        url: '/postcodecheck/' + postcode + '/' + housenumber + '/' + housenumber_addition,
        success: function(data) {
          if(data.available){
            $('.postcodecheck-result').text('Uw adres is beschikbaar in BLITTS!');
          } else {
            $('.postcodecheck-result').text('Uw adres is helaas nog niet beschikbaar in BLITTS voor het aanvragen van een vergunning, maar u kunt wel controleren of u vergunningsvrij kunt bouwen.');
          }
        }
      });
    });
  });
</script>