Send selected options with javascript to URL?

Question

Is it possible to send selected options with javascript to the url ? In my case it seems to be the only solution. My code is very basic. My problem is also, that i have to handle smarty (i hate smarty)

{block name="frontend_detail_buy"}

<select name="lieferperiode" id="lieferperiode">
    <option value="{$sArticle.ordernumber|replace:"a":"a"}">jede Woche</option>
    <option value="{$sArticle.ordernumber|replace:"a":"b"}">alle 2 Woche</option>
    <option value="{$sArticle.ordernumber|replace:"a":"c"}">alle 3 Woche</option>
    <option value="{$sArticle.ordernumber|replace:"a":"d"}">jeden Monat</option>
</select>

<select name="menge" id="menge">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>

<script type="text/javascript">
var lieferung = document.getElementById("lieferperiode");
var periode = lieferung.options[lieferung.selectedIndex].value;

var mengen = document.getElementById("menge");
var anzahl = mengen.options[mengen.selectedIndex].value;

var link = "http://XXXXX.de/XXXXX.php/sViewport,checkout/sAction,addArticle/sAdd," + periode + "/sQuantity," + anzahl;

{/block}

As you can see, the link contains 2 vars that are changeable via the dropdown menu. i made a test with alert and document.write and it is always giving me error var link is undefined. what am i doing wrong guys? cheers

Answer 1

As Filipe Silva had mentioned it, first, you have to change your option's code to a valid html code.

Your JS code is good. May be the problem is that it is executed before the selects are loaded. So I suggest you to use jQuery library which will ensure that the DOM is fully loaded before executing your code.

I suggest you too, to wrap your code within {literal} tags so it will be displayed as-is and not interpreted by Smarty.

Your code would be :

{literal}
<script type="text/javascript">
    $(document).ready(function(){

        var periode = $("#lieferperiode").find(":selected").val();

        var anzahl = $("#menge").find(":selected").val();

        var link = "http://XXXXX.de/XXXXX.php/sViewport,checkout/sAction,addArticle/sAdd," + periode + "/sQuantity," + anzahl;

        alert(link);
    });
</script>
{/literal}

Answer 2

First, you have invalid html, since you have:

<option value="{$sArticle.ordernumber|replace:"a":"a"}">jede Woche</option>

If you ask for this element.value it will give you: {$sArticle.ordernumber|replace:

You could change it to:

<option value='{$sArticle.ordernumber|replace:"a":"a"}'>jede Woche</option>

About the javascript, it is very much possible. And you are doing it. You might have some problem connecting your alert to that code you are showing us.

I was able to make your code work. See this jsfiddle

I just added a button to call your javascript and it works