javascript: refresh same page with query string from selects

Question

I have 2 selects: month and year. When the user selects the year and the month then I want to redirect to the same page with a query string produced by the selections.

So this is what I have done:

<div id="custom-select1" class="custom-select" style="width:200px;">
       <select name="month" onchange="if (this.value) window.location.href=this.value">
            <option value="0">Select Month:</option>
            <option value="?date_from={value-from-year-select}-01-01&date_to={value-from-year-select}-01-31&courses=on&events=on">January</option>
            <option value="..">February</option>
            <option value="..">March</option>
            <option value="..">April</option>
            <option value="..">May</option>
            <option value="..">June</option>
            <option value="..">July</option>
            <option value="..">August</option>
            <option value="..">September</option>
            <option value="..">Octomber</option>
            <option value="..">November</option>
            <option value="..">December</option>
        </select>
    </div>
    <div class="custom-select" style="width:200px;">
        <select name="year" >
                <option value="2000">Select Year:</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
                <option value="2021">2021</option>
                <option value="2022">2022</option>
                <option value="2023">2023</option>
        </select>
    </div>

How I can replace {value-from-year-select} to get the value of the year selected?

Is the goal to not catch the event with javascript and then do the redirect? What if the user choses month and wants to change year after? Why not make it a simple form with a submit button and method GET if you don't want to catch the event and read the data? — Patrick
– Patrick, Commented Nov 26, 2018 at 12:13
@Patrick because the big idea is to create a calendar which will be filtered with the selected values of these selects. So I don't want to add a button, but if it's not possible then I will use one — dvn22
– dvn22, Commented Nov 26, 2018 at 12:16
So what you want to do is catch the change of the select boxes, see if the user has selected any values and then redirect the user depending on values chosen. If you don't want to build javascript separately you would have to check the value of "year" in the onchange attribute. — Patrick
– Patrick, Commented Nov 26, 2018 at 12:23
@Patrick ok I think I got it... So I will have to use 2 onchange (one for each select) and check if there is a value selected in the other and pass both values to the query string. right? — dvn22
– dvn22, Commented Nov 26, 2018 at 12:27

Patrick · Accepted Answer · 2018-11-26 12:56:10Z

3

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/

answered Nov 26, 2018 at 12:56

Patrick

3135 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

eustatos · Accepted Answer · 2018-11-26 13:38:37Z

With delay

const month = document.getElementById('month');
const year = document.getElementById('year');

function handleChange() {
  if (month.value && year.value) {
    const urlSearch = new URLSearchParams();
    urlSearch.append('month', month.value);
    urlSearch.append('year', year.value);
    console.log(urlSearch.toString());
  }
}

<select onchange="handleChange()" name="month" id="month">
  <option value="">Choice month</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
</select>
<select onchange="handleChange()" name="year" id="year">
  <option value="">Choice year</option>
  <option value="2001">2001</option>
  <option value="2002">2002</option>
  <option value="2003">2003</option>
  <option value="2004">2004</option>
  <option value="2005">2005</option>
  <option value="2006">2006</option>
  <option value="2007">2007</option>
  <option value="2008">2008</option>
  <option value="2009">2009</option>
  <option value="2010">2010</option>
  <option value="2011">2011</option>
  <option value="2012">2012</option>
</select>

vladwoguer · Accepted Answer · 2018-11-26 14:21:52Z

You can use a form and submit it to refresh the page with the info, to add the extra fields you can use hidden inputs.

monthEnd = function(year, month) {
 
	   date = new Date(year, month - 1, 1);
  
     var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
	   return lastDay.getDate();
     }

     appendHidden = function(formId, name, value) {
	$('#' + formId).append('<input type="text" name="' + name + '" class="hidden" value="' + value + '" />');
     }

     begining = function() {
	year = $('#selectYear').val();
	month = $('#selectMonth').val();	
	
	return year + '-' + month + '-' + '1'
     }

     end = function() {
        year = $('#selectYear').val();
	month = $('#selectMonth').val();
	
	return year + '-' + month + '-' + monthEnd(parseInt(year), parseInt(month));
     }

     $( document ).ready(function() {
	months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

	for(i=0; i< months.length; i++) {
		$('#selectMonth').append('<option value="' + (i + 1) + '">' + months[i] + '</option>');
	}


	for(y=2000; y<= 2023;y++) {
		$('#selectYear').append('<option value="' + y + '">' + y + '</option>');
	}


	$('#selectMonth').on('change', function() {
	   appendHidden('form', 'courses', 'on');
           appendHidden('form', 'events', 'on');
	   appendHidden('form', 'date-from', begining());
	   appendHidden('form', 'date-from', end());
           $('#selectYear').remove();
	   $('#selectMonth').remove();
	   //$('#form').submit(); Uncomment this line to submit and refresh
     alert($('#form').serialize())
	});



});

.hidden {
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" action="" method="GET">
	  <div id="custom-select1" class="custom-select" style="width:200px;" >
	      <select id="selectMonth" name="month" >       
	      </select>
	  </div>
	  <div class="custom-select" style="width:200px;">
	       <select id="selectYear" name="year" ></select>
	  </div>
</form>

Collectives™ on Stack Overflow

javascript: refresh same page with query string from selects

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related