GosuSan GosuSan - 2 months ago 9
HTML Question

JQuery Datepicker values does not get submitted

i try to submit some basic data to a PHP script via GET.
Two of my 5 values are populated by a JqueryUI datepicker.
When I check those two input-fields via alert, they show up correctly, however they don't get passed to the PHP script on submit.

Code: JSFiddle

index.php - Note: the

addHourOptions()
php functions just add some select
<option>
-fields, nothing fancy.

<?php
include('inc/functions.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Filter</title>

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src="js/main.js"></script>
<!--<script language="javascript" type="text/javascript" src="ajax/ajax.js"></script>-->
</head>
<body>
<form id="filter" action="filter.php" method="GET">
<label for="date-from">
from Date: <input id="date-from" type="text" />
</label>
&nbsp;
<label for="date-to">
to Date: <input id="date-to" type="text" />
</label>
&nbsp;
<label for="time-from">from Time:
<select id="time-from" name="time-from" size="1">
<?php addHourOptions(); ?>
</select>
</label>
&nbsp;
<label for="time-to">to Time:
<select id="time-to" name="time-to" size="1">
<?php addHourOptions(); ?>
</select>
</label>
&nbsp;
<label for="corps">Corporation:
<select id="corps" name="corps" size="1">
<option value="98256608">Scroll Lock.</option>
<option value="955058602">German Angels</option>
<option value="98323502">Rat der 66er</option>
<option value="98183461">Girl Friends Please Ignore</option>
<option value="98371266">Know your Role</option>
</select>
</label>
&nbsp;
<button type="submit" id="filterButton">Filter</button>
<button type="button" id="debug">Debug</button>
</form>
</body>
</html>


main.js

//initialize datepicker: yy-mm-dd / yesterday
$(function(){
$.datepicker.setDefaults(
$.extend($.datepicker.regional[''])
);
$('#date-from').datepicker({dateFormat: 'yy-mm-dd'}).datepicker("setDate", -1);
$('#date-to').datepicker({dateFormat: 'yy-mm-dd'}).datepicker("setDate", "TODAY");
});

// set defaults for time timespan-dropdowns
$(function() {
$('#time-from option[value="19:00"]').attr("selected",true);
$('#time-to option[value="23:59"]').attr("selected",true);
});

$('#debug').click( function() {
alert($('#date-from').val() + " " + $('#date-to').val());
}


filter.php - only displays _GET variables for now, no logic

<?php
foreach($_GET as $key => $param){
echo $key . " => " . $param . "<br />";
}
?>


So there should be 5 lines in the output of filter.php,
one for each form-value. But there are only 3.

Example Output:

time-from => 19:00
time-to => 23:59
corps => 98256608


Can someone please tell me why the two input-fields that contain
my dates just don't get submitted with the rest of the form?

Thanks in Advance

EDIT: I used the search here, and read many questions and answers about it, but nothing seemed to work for me.

Answer
<label for="date-from">
     from Date: <input id="date-from" type="text" name="date-form" />
</label>
&nbsp;
<label for="date-to">
     to Date: <input id="date-to" type="text" name="date-to" />
</label>

Create name attribute for them and I think your problem is solved.