Javascript: Refresh Same Page With Query String from Selects

javascript: refresh same page with query string from selects

I would have chosen to use jquery to catch the change event (it's just what I'm used to). But my guess is that you want to keep your vanilla JS approach, you could write an eventlistener in javascript instead of using the onchange attribute. But here is a solution that keeps to how you work right now. Just add the javascript in a script tag in the DOM.

function customSelectChange() {
    var year = document.getElementsByName("year");
    var month = document.getElementsByName("month");
    if(year[0].value !== "0" && month[0].value !== "0"){
        // DO your redirect
            alert(year[0].value+'-'+month[0].value);
    }
}

https://jsfiddle.net/4d9phtgv/

Reload page with new params js

Replace window.location.href = url to window.location=window.location.href + "?country=" + this.value window.location.href is just returns the href (URL) of the current page please find below snippet as well to understand

And for remove querystring from href you can add .split('?')[0] after getting url like window.location.href.split('?')[0]

$(function(){      $("#country").change(function(){        debugger;        window.location=window.location.href.split('?')[0] + "?country=" + this.value      });    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select name="country_id" id="country" class="validate-select" title="Country">    <option value=""></option>    <option value="BH">Bahrain</option>    <option value="KW">Kuwait</option>    <option value="OM">Oman</option>    <option value="QA">Qatar</option>    <option value="SA">Saudi Arabia</option>    <option value="AE">United Arab Emirates</option></select>

Javascript - reload page with different QueryString

window.location is an object. You need to access the href property on it, like this:

window.location.href="test1.aspx?user=abc&place=xyz";

How to reload a page with javascript sending both GET and POST, and append additional parameter?

To accomplish this you are going to have to rebuild a request from scratch. In the case of get requests, the arguments are easily accessible in the query string but post requests are a little trickier. You will need to stash all that data in hidden input elements or something so that you can access it.

Then you can try something like this:

var queryString = windlow.location.search; //args from a previous getvar postArgs = $("#myPostArgsForm").serialize(); //args from a previous post... these need to be saved and added to the html by the server
//your additional data... this part you probably need to adapt//to fit your specific needs. this is an examplevar myNewArgName = encodeURIComponent("newArg");var myNewArgVal = encodeURIComponent("Hello!");var myNewArgString = myNewArgName + "=" + myNewArgVal;
//if there is no queryString, begin with ?if(!queryString) {  queryString = "?"}//if there is, then we need an & before the next argselse {  myNewArgString = "&" + myNewArgString;}
//add your new dataqueryString += myNewArgString;
//add anything from a previous postif(postArgs) {  queryString += "&" + postArgs;}
window.location.href = window.location.hostname + window.location.pathname + querystring

<form id="myPostArgsForm">  <input type="hidden" name="prevQuery" value="whats up?" /></form>

Javascript Refresh with only one query string

As Edmund24 mentioned, you shouldn't need to clear the timeout since you're reloading the page, so then our code looks like:

<script type="text/javascript">
  var timeout = setTimeout("location.reload(true);", 50000);
</script>

Similarly, we don't need to keep track of the handler id, so we can disregard storing that:

<script type="text/javascript">
  setTimeout("location.reload(true);", 50000);
</script>

The major issue with Edmund's code is that, in the case that the RoomID query string is not the first query string in the URL, this will not behave as you expected. So instead, we need to go explicitly search for and grab the query string that contains 'RoomID':

<script type="text/javascript">
  setTimeout(function () {
    var domain = location.href.split('?')[0],
        queryStrings = location.href.split('?')[1].split('&'),
        roomIDqs;

    queryStrings.forEach(function (e, i, a) {
      if(~e.indexOf('RoomID')) roomIDqs = e;
    });

    location.href = domain + roomIDqs;

  }, 50000);
</script>

I haven't tested this code, but this should be the idea.

Notes:

~.indexOf('other string') is a shortcut for contains(), since javascript doesn't have a built-in contains() method.
Array.foreach(function (e, i, a){}) -- the callback function is automatically passed the current element (e), the current index (i), and the complete array (a). We use e here to talk about the current query string.

i want to refresh my page 5 times on one click

You can add query string parameter refreshesLeft and on button click redirect to mypage?refreshesLeft=5. Add onLoad handler to check if you have query string parameter set, and if yes, decrement it and redirect.

<button type="button" onClick="Refresh()">Close</button>

<script>

function Refresh(refreshesLeft) {
  refreshesLeft = refreshesLeft || 5;
  window.parent.location = window.parent.location.href + '?refreshesLeft='+refreshesLeft;
}

function onLoad() {
  let params = new URLSearchParams(document.location.search.substring(1)); 
  let rl = params.get("refreshesLeft")
  if (rl) Refresh( (rl | 0 ) -1)
}

document.addEventListener("DOMContentLoaded", onLoad)

</script>

Javascript: Refresh Same Page With Query String from Selects