My form has a simple Datepicker on it, which paints and apparently operates correctly, but when I post the results with the submit button, although the rest of the fields go through correctly, the one with the datepicker doesn't.
For example, I have a part of my form like this:
....
and then some time later, at the end, I have
Notice how there's no entry for the datepicker field, which is named field17 - not even an empty field posted. Also notice that I've definitely set the name attribute on the input field.
I'm using the latest version of Kendo UI (just redownloaded it today to check). The datepicker also behaves like this, even if I don't open up the date widget and type the date in (in dd/MMM/yyyy format). What do you think the problem is?
For example, I have a part of my form like this:
<tr><td class=view><font color=red>Third Phone Type</td><td class=view><input type=hidden name="oldfield13" value="Not Given"><select id="i13" class=view name="field13"> <option value=""></option> <option selected value="Not Given">Not Given</option> <option value="Home">Home</option> <option value="Office">Office</option> <option value="Mobile">Mobile</option> <option value="Direct Dial">Direct Dial</option> <option value="Primary">Primary</option> </select> </td></tr> <tr><td class=view>Contact EMail Address</td><td class=view><input type=hidden name="oldfield14" value="xxxx23285@gmail.com"><input type=text class=view name=field14 value="arun23285@gmail.com"></td></tr> <tr><td class=view>Payslip EMail Address</td><td class=view><input type=hidden name="oldfield15" value=""><input type=text class=view name=field15 value=""></td></tr> <tr><td class=view><font color=red>Gender</td><td class=view><input type=hidden name="oldfield16" value="Female"><select id="i16" class=view name="field16"> <option value=""></option> <option value="Not Given">Not Given</option> <option value="Male">Male</option> <option selected value="Female">Female</option> </select> </td></tr> <tr><td class=view>Date of Birth</td><td class=view><input type=hidden name="oldfield17" value="1 July 1986 00:00:00"><input id="i17" type=text class=view name=field17 value=""></td></tr>
....
and then some time later, at the end, I have
<script> $(document).ready(function() { $("#i17").kendoDatePicker({format:"dd MMM yyyy"}) }); </script>I pick a date, when I close the datepicker window, the value has filled in on the text box, and then when I post, I have a debug routine that reads all the posted data, and displays it in a table. I get this (amongst other stuff)then some time later, at the end, I have
| oldfield13 | Not Given |
| field13 | Not Given |
| oldfield14 | xxxx23285@gmail.com |
| field14 | xxxx23285@gmail.com |
| oldfield15 | |
| field15 | |
| oldfield16 | Female |
| field16 | Female |
| oldfield17 | 1 Jan 1900 00:00:00 |
| oldfield18 | Indian |
| field18 | Indian |
I'm using the latest version of Kendo UI (just redownloaded it today to check). The datepicker also behaves like this, even if I don't open up the date widget and type the date in (in dd/MMM/yyyy format). What do you think the problem is?
5 Answers, 1 is accepted
0
Hello Clive,
Georgi Krustev
the Telerik team
I prepared a simple jsBin demo, but I was not able to replicate the issue. Check this screencast which shows that the value is posted correctly. The problem could be on the server side.
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Clive
Top achievements
Rank 1
Rank 1
answered on 17 Dec 2012, 11:26 AM
I'm still investigating, but it looks very much like this code works outside a table, and doesn't work inside a table structure. So... try the following:
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<table>
<form method="POST">
<tr><td>
<input id="works" name="works" type="text" value="Hello">
<input id="i17" name="field17" class="mouse" type="date">
</td></tr>
<tr><td>
<button>click</button>
</td></tr>
</form>
</table>
</body>
</html>
... when you run this, I get 'works' being posted through correctly, but field17 doesn't. I added the class, and type fields in my testing by the way because that's closer to how my actual code works, but it doesn't seem to have any effect on whether this works or not. The thing that seems to stop it working is the surrounding table.
Can you reproduce this?
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<table>
<form method="POST">
<tr><td>
<input id="works" name="works" type="text" value="Hello">
<input id="i17" name="field17" class="mouse" type="date">
</td></tr>
<tr><td>
<button>click</button>
</td></tr>
</form>
</table>
</body>
</html>
Can you reproduce this?
0
Clive
Top achievements
Rank 1
Rank 1
answered on 17 Dec 2012, 11:41 AM
I can confirm that stripping <table></table> from the form on my application fixes the issue. That's not a practical solution for me unfortunately, but at least pins down the problem. Is there a bug here, or am I missing some subtle way of relating to the field when it's inside a table?
0
Hello,
Atanas Korchev
the Telerik team
The problem is that a form cannot be immediate child of a table element. Move the form tag outside of the table.
Regards,Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Clive
Top achievements
Rank 1
Rank 1
answered on 17 Dec 2012, 01:26 PM
Yep, that sorted it out in my application - thanks!