Natural Language Form

by suit

HTML

<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
  <form class="naturallanguage">
     am 22.04.2017 für 5 Nächte eine Unterkunft.
    
    Ich möchte 
    <span data-position="before" data-name="c01"></span>
    <select name="c01">
      <option value="5"  data-before="einen" selected>beliebigen Wein</option>
      <option value="2"  data-before="einen">Rotwein</option>
      <option value="57" data-before="ein">Bier</option>
    </select>
    <span data-position="before" data-name="c02"></span>
    <select name="c02">
      <option value="30"  data-before="ohne bestimmte" selected>Herkunft</option>
      <optgroup label="Land">
        <option value="30"  data-before="aus" >Österreich</option>
      </optgroup>
      <optgroup label="Region">
        <option value="160" data-before="aus der">Wachau</option>
        <option value="" data-before="aus" data-land="30">Pauillac</option>     
      </optgroup>
      <optgroup label="Winzer">
        <option value="295" data-before="vom">Weingut Schwarz</option>
		    <option value="374" data-before="vom">Weingut Hirtzberger</option>
		    <option value="586" data-before="vom">Weingut F.X. Pichler</option>
		    <option value="143" data-before="von">Schloss Gobelsburg</option>
	    	<option value="250" data-before="vom">Weingut Bründlmayer</option>
		    <option value="121" data-before="vom">Weingut Pfaffl</option>
		    <option value="242" data-before="vom">Weingut Johanneshof Reinisch</option>
      </optgroup>
    </select>
    <span data-position="before" data-name="f[company]"></span>
    <select name="f[company]">
        <option value="1" data-before="eine">Unterkunft</option>
        <option value="2" data-before="in der" data-after="in Altaussee">Hagan Lodge</option>
    </select>
     <span data-position="after" data-name="f[company]"></span>.
    
    
    
    <hr />
    <a href="/de/inquiry/">Anfragen</a>
    <a href="/de/booking/">Buchen</a>
   </form>

JavaScript

$(document).ready(function(){
    $('form.naturallanguage').each(function() {    
        $('select', this).each(function() {
            $('[data-position=before][data-name="' + $(this).attr('name') + '"]').text($(':selected', this).data('before'));
            $('[data-position=after][data-name="'  + $(this).attr('name') + '"]').text($(':selected', this).data('after'));
        });
        $('select', this).on(
            'change',
            function() {
                $('[data-position=before][data-name="' + $(this).attr('name') + '"]').text($(':selected', this).data('before'));
                $('[data-position=after][data-name="'  + $(this).attr('name') + '"]').text($(':selected', this).data('after'));
            }
        );
        
        
        // variable Teil
        $('a', this).on(
            'click',
            function(e) {
                e.preventDefault();
                var c = [];
                c.push($('select[name="c00"]').val());
                c.push($('select[name="c01"]').val());
                c.push($('select[name="c02"]').val());
                c.push($('select[name="c03"]').val());

                console.log(c);

                //window.location.href = $(this).attr('href') + '?c=' + c;
                $('body').append($(this).attr('href') + '?c=' + c.join('|'));
            }
        );
        // Variabler Teil Ende
    });
});