javascript – Link select doesn't work?

Question:

Hello everyone, good afternoon!

I have the following code, which I need to form a link at the end, and display the filtered page to the client, but the link always falls on the first ID, which in this case is: Agrale.

My question is: How could I be making this filter work?

Note: I need only the "Filter" button to be ONclick of the values.

<div class="container">
    <select>
        <option id="" type="text" value="">Selecione o departamento...</option>
        <option id="departamento" type="text" value="automotivo">Automotivo</option>
    </select>
    <select>
        <option id="" type="text" value="">Selecione a categoria...</option>
        <option id="categoria" type="text" value="pastilhas-de-freio">Pastilhas de Freio</option>
    </select>
    <select>
        <option id="" type="text" value="">Selecione a montadora...</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Agrale">Agrale</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Alfa Romeo">Alfa Romeo</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Audi">Audi</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Cadillac">Cadillac</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Chevrolet">Chevrolet</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Chrysler">Chrysler</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Citroën">Citroën</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Daewoo">Daewoo</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Fiat">Fiat</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Ford">Ford</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Gurgel">Gurgel</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Honda">Honda</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Hyundai">Hyundai</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Isuzu">Isuzu</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Iveco">Iveco</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Jac Motors">Jac Motors</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Jeep">Jeep</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Kia Motors">Kia Motors</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Lancia">Lancia</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Land Rover">Land Rover</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Marcopolo">Marcopolo</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Mercedes Benz">Mercedes Benz</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Nissan">Nissan</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Peugeot">Peugeot</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Renault">Renault</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Scania">Scania</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Seat">Seat</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:SsangYong">SsangYong</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Subaru">Subaru</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Suzuki">Suzuki</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Toyota">Toyota</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Troller">Troller</option>
        <option id="montadora" type="text" value="?fq=specificationFilter_351:Troller">Volkswagen</option>
    </select>
    <INPUT id="filtro-j" type="submit" name="b1" value="Filtrar" onClick="location.href='http://www.rs1.com.br/' document.getElementById('departamento').value '/' document.getElementById('categoria').value '/' document.getElementById('montadora').value">
</div>

Answer:

You have to use the + to concatenate this url. In fact you shouldn't do this in the middle of the HTML but separately:

Rather than

onClick="location.href='http://www.rs1.com.br/' document.getElementById('departamento').value '/' document.getElementById('categoria').value '/' document.getElementById('montadora').value"

you should do:

<script>
var departamento = document.getElementById('departamento');
var categoria= document.getElementById('categoria');
var montadora= document.getElementById('montadora');
var input = document.getElementById('filtro-j');
input.addEventListener('click', function(e){
    e.preventDefault(); // não precisarias disto se o input fosse <button type="button">Filtrar</button>
    location.href = ['http://www.rs1.com.br', departamento.value, categoria.value, montadora.value].join('/');
});
</script>

and put that code at the end of the page.

Another important thing : The select must have the ID and not the same ID in every option . IDs have to be unique, he was always selecting the same element, the first one he found. Change this in HTML.

Online example: http://codepen.io/anon/pen/zvwGVj

Scroll to Top