I've encountered an unusual problem with my form data being POSTed via AJAX. For some reason, certain parts of the form are not being sent - specifically, the date and time sections. Here's a snippet of my form:
<script src="/js/x.js" ></script>
<div class="right">
<form id="xForm" method="POST" autocomplete="on">
<input id="xname" name="xname" type="text" placeholder="Name" />
<input id="address" name="address" type="text" placeholder="Address" />
<br/>
<input id="fromdate" name="fromdate" type="date" />
<input id="fromtime" name="fromtime" type="time" />
<br/>
<input id="todate" name="todate" type="date" />
<input id="totime" name="totime" type="time" />
<br/>
<input id="description" name="description" type="text" />
<input id="phone" name="phone" type="phone" />
<input id="friend1" name="friend1" type="hidden" />
<input id="friend2" name="friend2" type="hidden" />
<button class="xCreateButton" type="submit">create!</button>
</form>
</div>
When I use my POST ajax call (the code located in /js/X.js):
$("#xForm").submit(function(evt)
{
evt.preventDefault();
alert ("date = " + document.getElementById("fromdate").value);
$.ajax({
type: "POST",
url: "/xSubmission",
data: $(this).serialize(),
success: function(response)
{
alert(response);
$("#eventAjaxContent").text = "Success! Added!";
$("#eventAjaxContent").fadeOut(300);
}
});
The form data is being sent correctly except for the fromdate/time and todate/time fields (checked on my Spring MVC controller logs for /xSubmission and Chrome console debugger). Interestingly, the alert before the ajax POST shows the date set correctly.
What could be causing the issue with fromdate/time and todate/time in my code? All input elements have both an id and a name, so that should not be the problem. Is there something syntax-related that I might be missing?
Any advice or assistance would be greatly appreciated.