如何通过jQuery或JavaScript将所选参数传递给表单操作URL

Question

我一直在这里和谷歌搜索关于如何根据我的喜好将所选参数传递给URL中的操作。 但我不知道该怎么做。 我创建的代码不符合目的，因为我的级别在Javascript中很简单！

我的代码：

 $('#search-filter').on('submit', function() { var $this = $(this), getValue = $this.attr('action') + $('.uk-radio').val(); $this.attr('action', getValue); $this.submit(); }); 

 #search-filter { padding: 40px; } #search-filter .uk-form-icon { padding: 0 10px; right: 40px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form id="search-filter" class="uk-margin-medium" action="https://example.com/search" target="_top"> <h4 class="search-title">Search Filter</h4> <div class="search-input"> <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid"> <div class="filters-title">Level:</div> <label><input class="uk-radio" type="radio" name="level" value="beginner"> Beginner</label> <label><input class="uk-radio" type="radio" name="level" value="intermediate"> Intermediate</label> <label><input class="uk-radio" type="radio" name="level" value="advanced"> Advanced</label> </div> <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid"> <div class="filters-title">Type:</div> <label><input class="uk-radio" type="radio" name="type" value="theorie"> Theorie</label> <label><input class="uk-radio" type="radio" name="type" value="practical"> Practical</label> </div> <div class="uk-margin"> <label class="uk-form-label" for="form-horizontal-select">Select a category:</label> <div class="uk-form-controls"> <select class="uk-select" id="form-horizontal-select"> <option value="category1">Category 01</option> <option value="category2">Category 02</option> <option value="category3">Category 03</option> <option value="category4">Category 04</option> </select> </div> </div> <button class="uk-button uk-button-primary">Filter</button> </div> </form> 

我得到的输出：

https://example.com/searchbeginnerbeginnerbeginner?level=beginner&type=practical

我真正需要的输出：

https://example.com/search?label=beginner+practical+category01&max-results=4

如你所见，在标签= +之后有三个参数，然后是＆符号后面的参数max-results 。

有什么方法可以获得如上面这个链接？

提前致谢！

Answer 1

您可以为JavaScript执行以下操作

$('#search-filter').on('submit', function(e) {
    e.preventDefault();
    var $this = $(this);
    var queryParams = 'label=' + $('input[name="level"]').val() 
                               + '+' + $('input[name="type"]').val()
                               + '+' + $('#form-horizontal-select').val()
                     + '&max-results=4';
    window.open('https://example.com/search?'+queryParams, "_blank");
});

如果希望类别值为类别0 * ，则还必须将选项值更新为

<select class="uk-select" id="form-horizontal-select">
    <option value="category01">Category 01</option>
    <option value="category02">Category 02</option>
    <option value="category03">Category 03</option>
    <option value="category04">Category 04</option>
</select>

Answer 2

要获得选择选项值，您可以使用以下编码：

var selectBox=document.getElementById("form-horizontal-select");
getSelect=selectBox.options[selectBox.selectedIndex].value;