CODEWITHSUNDEEP
javascriptphpjqueryheader
user3038421
user3038421

Reputation: 25

Add variables to header using jquery

Im trying to get an option value and add it to the header location. 

<select id="time">
<option value="1"> 1 hour</option>
<option value="2"> 2 hours</option>
</select>

When an option is selected from the above list it should then add it as a get variable to the current header url.. such as

header=www.test.com?time=2

<select id="time2">
<option value="1"> 1 min</option>
<option value="2"> 2 min</option>
</select>

While current header being www.test.com?time=2 If a value was chosen from that list then min=2 should be added to the current header. i.e - www.test.com?time=2&min=2

(there are multiple select options, so when each one is selected how can i add the get variable to the current header ?

$('time').on('change', function (e) 
{?
});

Upvotes: 0

Views: 643

Answers (1)

David Thomas
David Thomas

Reputation: 253358

I'd suggest:

// binding an event-handler to the 'change' event (selecting by class-name):
$('.query').change(function(){
    // retrieving the current hash (though search is, of course, an alternative):
    var query = window.location.hash;
    /* if there is a current hash we apppend the name and value of the
       current select element to that hash:
    */
    window.location.hash = (query.length > 0 ? query + '&' : '') + this.name + this.value;
    // verifying the change/showing what was set/changed:
    console.log(window.location.hash);
/* triggering the change-handler function, this can be omitted if you don't
   want the handler to run on page-load: */
}).change();

Coupled with the slightly amended HTML:

<select name="hour" class="query">
    <option value="1"> 1 hour</option>
    <option value="2"> hours</option>
</select>

<select name="mins" class="query">
    <option value="1"> 1 min</option>
    <option value="2"> 2 min</option>
</select>

JS Fiddle demo.

This updates the window.location.hash (#time=2), rather than the window.location.search (?time=2) because updating the latter will cause the page to reload (with the new search-string), whereas updating the hash prevents the page from reloading.

If, however, the page-reload isn't a problem for you, then you can simply use the window.location.search instead of the window.location.hash.

Upvotes: 1

Related Questions