There is a form with selectors

<form > <div class="form-row"> <div class="col-md-4"> <select class="selectpicker" data-show-subtext="true" data-live-search="true"> <option>Марка</option> <option>Audi</option> <option>BMW</option> <option>Chery</option> </select> </div> <div class="col-md-4"> <select class="selectpicker" data-show-subtext="true" data-live-search="true"> <option>Модель</option> <option>Первая модель</option> <option>Вторая модель</option> <option>Третья модель</option> </select> </div> <div class="col-md-4"> <select class="selectpicker" data-show-subtext="true" data-live-search="true"> <option>Поколение</option> <option>1990</option> <option>2005</option> <option>2019</option> </select> </div> <div class="col-md-4"> <button type="submit" class="btn btn-danger">Перейти</button> </div> </div>

How to make it so that when selecting select a certain link is substituted in the button for going to the page, which will be formed based on the value of the selected items in select?

    2 answers 2

     $("button").on('click', function() { var mark = $("#mark option:selected").val(); var model = $("#model option:selected").val(); var age = $("#age option:selected").val(); if(mark != 'Марка' && model != 'Модель' && age != 'Поколение') { // location.href = "http://localhost/?mark="+ mark + "&model="+ model +"&age="+ age; // или вариант в новом окне window.open("http://localhost/?mark="+ mark + "&model="+ model +"&age="+ age); console.log("http://localhost/?mark="+ mark + "&model="+ model +"&age="+ age); } return false; }); 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="mark"> <option>Марка</option> <option value="Audi">Audi</option> <option value="BMW">BMW</option> <option value="Chery">Chery</option> </select> <select id="model"> <option>Модель</option> <option value="Первая модель">Первая модель</option> <option value="Вторая модель">Вторая модель</option> <option value="Третья модель">Третья модель</option> </select> <select id="age"> <option>Поколение</option> <option value="1990">1990</option> <option value="2005">2005</option> <option value="2019">2019</option> </select> <button>Перейти</button>

    • Thank you very much, everything works, but I do not quite understand how to correctly specify a link to a page. Do I need to specify this file name? Mark = Audi & model = Audi & age = Audi? Or how can I specify which link will be equal to the option? - Ivan
    • how do i name the file? I do not understand - Ivan

     $('form button[type="submit"]').click(function() { var params = {}; $('form select[data-type]').each(function(index, element) { var select = $(this); params[select.data('type')] = select.val(); }); var url = $.param(params); alert(url); return false; }); 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <form > <div class="form-row"> <div class="col-md-4"> <select class="selectpicker" data-type="mark" data-show-subtext="true" data-live-search="true"> <option>Марка</option> <option>Audi</option> <option>BMW</option> <option>Chery</option> </select> </div> <div class="col-md-4"> <select class="selectpicker" data-type="model" data-show-subtext="true" data-live-search="true"> <option>Модель</option> <option>Первая модель</option> <option>Вторая модель</option> <option>Третья модель</option> </select> </div> <div class="col-md-4"> <select class="selectpicker" data-type="age" data-show-subtext="true" data-live-search="true"> <option>Поколение</option> <option>1990</option> <option>2005</option> <option>2019</option> </select> </div> <div class="col-md-4"> <button type="submit" class="btn btn-danger">Перейти</button> </div> </div> </form>