CODEWITHSUNDEEP
javascripthtmlselect
dvn22
dvn22

Reputation: 151

javascript: refresh same page with query string from selects

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?

Upvotes: 0

Views: 398

Answers (3)

vladwoguer
vladwoguer

Reputation: 978

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>

Upvotes: 0

eustatos
eustatos

Reputation: 704

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>

Upvotes: 3

Patrick
Patrick

Reputation: 313

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/

Upvotes: 3

Related Questions