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

Question

I've been searching a lot here and in Google about how to pass selected parameters to the action from URL as I prefer. But I don't have any idea how to do it. The code that I created doesn't meet the purpose since my level is simple in Javascript!

My code:

 $('#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> 

The output I have got:

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

The output I really need:

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

As you see there are three parameters within + sing after a label= then a parameter max-results after & sign.

There is any method to get such as this link above?

Thanks in advance!

Answer 1

You can do the following for your 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");
});

If you want the category values to be category 0* , then you must also update the option values to

<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

To get select option value you can use the following coding:

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