ow can I use JQuery to refresh the page with dates coming from a series of SELECT puldowns?

Here's my challenge:

I got a page where my user can select a date using three pulldowns: one for month, another for the day and another for the year. When they hit the button "change date," I need the page to be refreshed with the new date they've chosen embedded in the URL.

So, if my URL is records.php?beginning_date=2018-01-27, the code of that page looks like this:

<html>
<head>
<title>Date Selector</title>
</head>

<body>

<table>
<tr>
	<td>
		<select name="month">
        <option> -- Select Month --</option>
		<option>January</option>
		<option>February</option>
		<option>March</option>
		<option>April</option>
		<option>May</option>
		<option>June</option>
		<option>July</option>
		<option>August</option>
		<option>September</option>
		<option>October</option>
		<option>November</option>
		<option>December</option>        
		</select>
	</td>
	<td>
		<select name="day">
        <option> -- Select Day --</option>
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
		<option>6</option>
		<option>7</option>
		<option>8</option>
		<option>9</option>
		<option>10</option>
		<option>11</option>
		<option>12</option>
		<option>13</option>
		<option>14</option>
		<option>15</option>
		<option>16</option>
		<option>17</option>
		<option>18</option>
		<option>19</option>
		<option>20</option>
		<option>21</option>
		<option>22</option>
		<option>23</option>
		<option>24</option>
		<option>25</option>
		<option>26</option>
		<option>27</option>
		<option>28</option>
		<option>29</option>
		<option>30</option>
		<option>31</option>        
		</select>
	</td>
	<td>
		<select name="year">
		<option> -- Select Year --</option>
		<option>2017</option>
		<option>2018</option>
		<option>2019</option>
		</select>
	</td>
	<td><a id="change_date" href="#">change date</a></td>
</tr>
</table>
		

</body>
</html>

Open in new window


Let's say they choose January 28, 2017. Then, when the user clicks on "change date," the page refreshes and this time the URL is records.php?beginning_date=2018-01-28

How?
brucegustPHP DeveloperAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
please note I set ID attribue of the dropdowns :
<html>
<head>
    <title>Date Selector</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        jQuery(function() {
           $("#change_date").click(function(evt){
               evt.preventDefault();
               var m = $("#month").prop("selectedIndex");
               m = m>9?m:"0"+m;
               var d = $("#day").val();
               d = d>9?d:"0"+d;
               var y = $("#year").val();
               location.href = "records.php?beginning_date=" + y + "-" + m + "-" + d;
           });
        });
    </script>
</head>

<body>

<table>
    <tr>
        <td>
            <select name="month" id="month">
                <option> -- Select Month --</option>
                <option>January</option>
                <option>February</option>
                <option>March</option>
                <option>April</option>
                <option>May</option>
                <option>June</option>
                <option>July</option>
                <option>August</option>
                <option>September</option>
                <option>October</option>
                <option>November</option>
                <option>December</option>
            </select>
        </td>
        <td>
            <select name="day" id="day">
                <option> -- Select Day --</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
                <option>13</option>
                <option>14</option>
                <option>15</option>
                <option>16</option>
                <option>17</option>
                <option>18</option>
                <option>19</option>
                <option>20</option>
                <option>21</option>
                <option>22</option>
                <option>23</option>
                <option>24</option>
                <option>25</option>
                <option>26</option>
                <option>27</option>
                <option>28</option>
                <option>29</option>
                <option>30</option>
                <option>31</option>
            </select>
        </td>
        <td>
            <select name="year" id="year">
                <option> -- Select Year --</option>
                <option>2017</option>
                <option>2018</option>
                <option>2019</option>
            </select>
        </td>
        <td><a id="change_date" href="#">change date</a></td>
    </tr>
</table>
</body>
</html>

Open in new window

0
 
brucegustPHP DeveloperAuthor Commented:
Perfect!

Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.