We Keep Coding

How to make the date input mask in angular?

I am trying to make the input date of birth mask in angular and format of date is dd/mm/yyyy ,but it not set and return the input according to our requirement input value.
my code given below.
<input type="text" placeholder="{{timePlaceholder}}" (focus)="showlable()" (focusout)="hidelable()" (keypress)="this.value =fixDatePattern($event);">
currentDate:any = "";
currentLength:any ="";
lastNumberEntered:any ="";
transformedDate:any="";
dateCountTracker:any="";
fixDatePattern(event) {
this.currentDate = event.target.value;
this.currentLength = this.currentDate.length;
this.lastNumberEntered = this.currentDate[this.currentLength - 1];
if (this.currentLength > 10) {
return this.currentDate.substring(0, 10);
}
if (this.currentLength == 1 && this.currentDate > 1) {
this.transformedDate = "0" + this.currentDate + '/';
this.dateCountTracker = 2;
this.currentLength = this.transformedDate.length;
return this.transformedDate;
} else if (this.currentLength == 4 && this.currentDate[3] > 3) {
this.transformedDate = this.currentDate.substring(0, 3) + "0" + this.currentDate[3] + '/';
this.dateCountTracker = 5;
this.currentLength = this.transformedDate.length;
return this.transformedDate;
} else if (this.currentLength == 2 && (this.dateCountTracker != 2 && this.dateCountTracker != 3)) {
this.dateCountTracker = this.currentLength;
return this.currentDate + '/';
} else if (this.currentLength == 5 && (this.dateCountTracker != 5 && this.dateCountTracker != 6)) {
this.dateCountTracker = this.currentLength;
return this.currentDate + '/';
}
this.dateCountTracker = this.currentLength;
return this.currentDate;
}

<input placeholder="mm/dd/yyyy" (input)="KeyUpCalled($event.target.value)" maxlength="10" [(ngModel)]="inputValue">
inputValue;
KeyUpCalled(value){
var dateCountTracker;
var currentDate = value;
var currentLength = currentDate.length;
var lastNumberEntered = currentDate[currentLength - 1];
if (currentLength > 10) {
var res = currentDate.substring(0, 10)
this.inputValue = res;
return this.inputValue
}
if (currentLength == 1 && currentDate > 1) {
var transformedDate = "0" + currentDate + '/';
dateCountTracker = 2;
currentLength = transformedDate.length;
this.inputValue = transformedDate;
return this.inputValue;
} else if (currentLength == 4 && currentDate[3] > 3) {
var transformedDate = currentDate.substring(0, 3) + "0" + currentDate[3] + '/';
dateCountTracker = 5;
currentLength = transformedDate.length;
this.inputValue = transformedDate;
return this.inputValue;
} else if (currentLength == 2 && (dateCountTracker != 2 && dateCountTracker != 3)) {
dateCountTracker = currentLength;
this.inputValue = currentDate + '/'
return this.inputValue;
} else if (currentLength == 5 && (dateCountTracker != 5 && dateCountTracker != 6)) {
dateCountTracker = currentLength;
// return currentDate + '/';
this.inputValue = currentDate + '/'
return this.inputValue;
}
dateCountTracker = currentLength;
this.inputValue = currentDate;
}

Using primeng :
in app module :
import {InputMaskModule} from 'primeng/inputmask';
#NgModule({
imports: [
...
InputMaskModule,
FormsModule
],
for the HTML :
<div class="p-col-12 p-md-6 p-lg-4">
<span>Date</span>
<p-inputMask mask="99/99/9999" [(ngModel)]="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy"></p-inputMask>
</div>
source : https://www.primefaces.org/primeng/inputmask

Equivalent of arrow functions for IE

I wrote a program that works well in Google Chrome, but I just realized that it is having problems in IE. IE states that this is due to a syntax error given by the use of arrow functions since they are not supported in the latest IE. Can anyone tell me how to change my code to be able to run it on IE?
function removeRow(a, ref, plt, pcs, loc, trk, din) {
var pro;
swal("Enter the shipment's tracking information:", {
content: "input",
buttons: {
cancel: true,
roll: {
text: "Don't have it",
value: " ",
},
confirm: {
text: "Submit",
}
}
})
.then((value) => {
pro = value;
//console.log(pro);
if (pro !== null || pro === ' ') {
b = '#' + a;
c = '#H' + a;
var d = new Date();
var n = Math.round(d.getTime() / 1000);
var table = $('#mytable')
.DataTable();
// Remove a row by Id:
table.row(b)
.remove()
.draw();
var url = "delete.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: {
id: a,
track: pro,
dateout: n
},
success: function(data) {
//alert(data); // show response from the php script.
//console.log('Success!');
}
});
swal("Success", "Shipment was entered successfully!", "success");
if (ref == '') {
}
var t = $('#myhistory').DataTable();
t.row(c)
.remove()
.draw();
var reference = ref;
var pallets = plt;
var pieces = pcs;
var location = loc;
var carrier = trk;
var datein = din;
var dateout = n;
var rowid = 'H' + a;
if (datein.length < 12) {
var month = datein.toString().substring(0, 1);
if (month == '01') {
month = 'Jan';
} else if (month == '02') {
month = 'Feb';
} else if (month == '03') {
month = 'Mar';
} else if (month == '04') {
month = 'Apr';
} else if (month == '05') {
month = 'May';
} else if (month == '06') {
month = 'Jun';
} else if (month == '07') {
month = 'Jul';
} else if (month == '08') {
month = 'Aug';
} else if (month == '09') {
month = 'Sep';
} else if (month == '10') {
month = 'Oct';
} else if (month == '11') {
month = 'Nov';
} else if (month == '12') {
month = 'Dec';
}
var day = datein.toString().substring(1, 3);
var year = datein.toString().substring(3, 7);
var hour = datein.toString().substring(7, 9);
var second = datein.toString().substring(9, 11);
} else {
var month = datein.toString()
.substring(0, 2);
if (month == '01') {
month = 'Jan';
} else if (month == '02') {
month = 'Feb';
} else if (month == '03') {
month = 'Mar';
} else if (month == '04') {
month = 'Apr';
} else if (month == '05') {
month = 'May';
} else if (month == '06') {
month = 'Jun';
} else if (month == '07') {
month = 'Jul';
} else if (month == '08') {
month = 'Aug';
} else if (month == '09') {
month = 'Sep';
} else if (month == '10') {
month = 'Oct';
} else if (month == '11') {
month = 'Nov';
} else if (month == '12') {
month = 'Dec';
}
var day = datein.toString().substring(2, 4);
var year = datein.toString().substring(4, 8);
var hour = datein.toString().substring(8, 10);
var second = datein.toString().substring(10, 12);
}
var tout = new Date();
var timeout = tout.toString();
var monthout = tout.toString().substring(4, 7);
var dayout = tout.toString().substring(8, 10);
var yearout = tout.toString().substring(11, 16);
var hourout = tout.toString().substring(16, 18);
var secondout = tout.toString().substring(19, 21);
var dateout = monthout + ', ' + dayout + ' ' + yearout + ' at ' + hourout + ':' + secondout;
var datein = month + ', ' + day + ' ' + year + ' at ' + hour + ':' + second;
t.row.add([
reference,
pallets,
pieces,
location,
carrier,
datein,
dateout,
pro
])
.node()
.id = rowid;
t.draw(false);
}
});
}

I could be missing something, but after a quick skim of your code, only this line appears to use any ES6 syntax:
.then((value) => {
Simply change it to:
.then(function(value) {
If you have much more code and don't want to remove such references by hand, #jonrsharpe's suggestion of a transpiler is a good one.

only two of four $_POST variables gets set

so I have simple form like one below:
<table class='table table-striped table-bordered table-hover' id='dataTables-example'>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<form name='form' method='post' action='test.php'>
<tr>
<td>TEXT</td>
<td><input id='timepicker' type='text' name='timepicker' value='17:00' /></td>
<td><input id='timepicker1' type='text' name='timepicker1' value='23:00' /></td>
<td><input type='text' name='adresatas' value='123456'/></td>
<input type='hidden' name='data' value='2017-10-15'/>
<td><input type='submit' name='submit' value='Išsaugoti'></td>
</tr>
</form>
</tbody>
</table>
And I have a simple php file to test the output:
<?php
echo $_POST['timepicker'];
echo $_POST['timepicker1'];
echo "Data nuo: " . $_POST['data'];
echo "Adresatas: " .$_POST['adresatas'];
?>
But when I enter (or leave as it was) new values two of them (timepicker and timepicker1) becomes undefined:
Notice: Undefined index: timepicker in C:\xampp\htdocs\test.php on line 2
Notice: Undefined index: timepicker1 in C:\xampp\htdocs\test.php on line 3
Data nuo: 2017-10-15Adresatas: 123456
timepicker and timepicker1 fields are set with timepicker:
http://senthilraj.github.io/TimePicki/options.html
They aren't showed in var_dump($_POST) as well:
array(3) { ["adresatas"]=> string(9) "123456" ["data"]=> string(10) "2017-10-16" ["submit"]=> string(10) "Išsaugoti" }
What could be wrong? Looks like a simple form and php to output the values but it doesn't work.
Timepicker javascript:
/*
* Author: #senthil2rajan
* plugin: timepicker
* website: senthilraj.github.io/Timepicki
*/
(function($) {
$.fn.timepicki = function(options) {
var defaults = {
format_output: function(tim, mini, meri) {
if (settings.show_meridian) {
// limit hours between 1 and 12 - inculsive.
tim = Math.min(Math.max(parseInt(tim), 1), 12);
if (tim < 10)
tim = "0" + tim;
mini = Math.min(Math.max(parseInt(mini), 0), 59);
if (mini < 10)
mini = "0" + mini;
return tim + ":" + mini + " " + meri;
} else {
// limit hours between 0 and 23 - inculsive.
tim = Math.min(Math.max(parseInt(tim), 0), 23);
if (tim < 10)
tim = "0" + tim;
mini = Math.min(Math.max(parseInt(mini), 0), 59);
if (mini < 10)
mini = "0" + mini;
mini = Math.min(Math.max(parseInt(mini), 0), 59);
return tim + ":" + mini;
}
},
increase_direction: 'up',
custom_classes: '',
min_hour_value: 1,
max_hour_value: 12,
show_meridian: true,
step_size_hours: '1',
step_size_minutes: '1',
overflow_minutes: false,
disable_keyboard_mobile: false,
reset: false,
on_change: null,
input_writable: false
};
var settings = $.extend({}, defaults, options);
return this.each(function() {
var ele = $(this);
var ele_hei = ele.outerHeight();
ele_hei += 10;
$(ele).wrap("<div class='time_pick'>");
var ele_par = $(this).parents(".time_pick");
// developer can specify which arrow makes the numbers go up or down
var top_arrow_button = (settings.increase_direction === 'down') ?
"<div class='prev action-prev'></div>" :
"<div class='prev action-next'></div>";
var bottom_arrow_button = (settings.increase_direction === 'down') ?
"<div class='next12 action-next'></div>" :
"<div class='next12 action-prev'></div>";
var new_ele = $(
"<div class='timepicker_wrap " + settings.custom_classes + "'>" +
"<div class='arrow_top'></div>" +
"<div class='time'>" +
top_arrow_button +
"<div class='ti_tx'><input type='text' class='timepicki-input'" + (settings.disable_keyboard_mobile ? "readonly" : "") + "></div>" +
bottom_arrow_button +
"</div>" +
"<div class='mins'>" +
top_arrow_button +
"<div class='mi_tx'><input type='text' class='timepicki-input'" + (settings.disable_keyboard_mobile ? "readonly" : "") + "></div>" +
bottom_arrow_button +
"</div>");
if(settings.show_meridian){
new_ele.append(
"<div class='meridian'>" +
top_arrow_button +
"<div class='mer_tx'><input type='text' class='timepicki-input' readonly></div>" +
bottom_arrow_button +
"</div>");
}
if(settings.reset){
new_ele.append(
"<div><a href='#' class='reset_time'>Reset</a></div>");
}
ele_par.append(new_ele);
var ele_next = $(this).next(".timepicker_wrap");
var ele_next_all_child = ele_next.find("div");
var inputs = ele_par.find('input');
$('.reset_time').on("click", function(event) {
ele.val("");
close_timepicki();
});
$(".timepicki-input").keydown(function (keyevent) {
// our goal here is very simple.
// no matter what the user presses
// we must ensure that the values in our
// timepicki inputs are valid, and that pressing
// enter does not submit the form if the
// input field on which timepicki is applied is a part of a form.
// With that in mind. We proceed like this:
// 1) If enter is pressed:
// i) Prevent default operations - form submission.
// ii) close_timepicki().
// iii) return.
//
// 2) For any other key presses:
// i) realize that we cannot check what the user has typed
// just yet, because this function is a handler
// that runs before any text is rendered in the input
// box.
// ii) So, register a function validate() that will execute right
// after the keypress character is rendered. All validation
// is done inside validate().
//-----------------------------------------------------------------------------------
// NOTE:.change() event does not work here, as it is called when input looses focus|
//-----------------------------------------------------------------------------------
// (1)
// prevent potential form submission, if enter is pressed.
if (keyevent.keyCode == 13) {
keyevent.preventDefault();
set_value();
close_timepicki();
// nothing to do here.
return;
}
// the grand father div specifies the type of
// input that we are dealing with. if the grandFatherDiv
// has a class "time", then its a time input, if it has a class
// "mins", then its a minutes input, and if it has a class "meridian"
// then its a meridian input.
var grandfatherDiv = $(this).parent().parent();
// aliasing for readability
var input = $(this);
// pick the value from the field,
// because before change the field always has a
// valid value.
var lastValue = input.val();
// (2)
// validate() function validates the
// user input.
function validate() {
var isValidNumber = /^\d+$/.test(input.val());
var isEmpty = input.val() === "";
if (grandfatherDiv.hasClass("time")) { /// HOUR
// if its a valid number.
// clip it and assign it.
if (isValidNumber) {
// clip number.
var hours = (settings.show_meridian) ?
Math.min(Math.max(parseInt(input.val()), 1), 12) : // for 12 hour date picker.
Math.min(Math.max(parseInt(input.val()), 0), 23); // for 24 hours date picker.
// assign number.
input.val(hours);
} else if(!isEmpty) {
// else if the number is invalid and not empty
// assign the lastValue
input.val(lastValue);
}
} else if (grandfatherDiv.hasClass("mins")) { /// MINUTE
// if its a valid number.
// clip it and assign it.
if (isValidNumber) {
// clip number.
var minutes = Math.min(Math.max(parseInt(input.val()), 0), 59);
// assign number.
input.val(minutes);
} else if (!isEmpty) {
// else if the number is invalid and not empty
// assign the lastValue
input.val(lastValue);
}
} else if (grandfatherDiv.hasClass("meridian")) { /// MERIDIAN
// key presses should not affect
// meridian - except up and down
// which are handled else where
// and will still work.
keyevent.preventDefault();
} else {
// alert("This should not happen.");
}
}
// wrapValidate() ensures that validate()
// is not called more than once. 'done'
// is a flag used to ensure this.
done = false;
function wrapValidate() {
if (!done) {
validate();
done = true;
}
}
// enqueue wrapValidate function before any thing
// else takes place. For this we use setTimeout()
// with 0
setTimeout(wrapValidate, 0);
});
// open or close time picker when clicking
$(document).on("click", function(event) {
if (!$(event.target).is(ele_next) && ele_next.css("display")=="block" && !$(event.target).is($('.reset_time'))) {
if (!$(event.target).is(ele)) {
set_value(event, !is_element_in_timepicki($(event.target)));
} else {
var ele_lef = 0;
ele_next.css({
"top": ele_hei + "px",
"left": ele_lef + "px"
});
open_timepicki();
}
}
});
// open the modal when the user focuses on the input
ele.on('focus', open_timepicki);
// select all text in input when user focuses on it
inputs.on('focus', function() {
var input = $(this);
if (!input.is(ele)) {
input.select();
}
});
// allow user to increase and decrease numbers using arrow keys
inputs.on('keydown', function(e) {
var direction, input = $(this);
// UP
if (e.which === 38) {
if (settings.increase_direction === 'down') {
direction = 'prev';
} else {
direction = 'next';
}
// DOWN
} else if (e.which === 40) {
if (settings.increase_direction === 'down') {
direction = 'next';
} else {
direction = 'prev';
}
}
if (input.closest('.timepicker_wrap .time').length) {
change_time(null, direction);
} else if (input.closest('.timepicker_wrap .mins').length) {
change_mins(null, direction);
} else if (input.closest('.timepicker_wrap .meridian').length && settings.show_meridian) {
change_meri(null, direction);
}
});
// close the modal when the time picker loses keyboard focus
inputs.on('blur', function() {
setTimeout(function() {
var focused_element = $(document.activeElement);
if (focused_element.is(':input') && !is_element_in_timepicki(focused_element)) {
set_value();
close_timepicki();
}
}, 0);
});
function is_element_in_timepicki(jquery_element) {
return $.contains(ele_par[0], jquery_element[0]) || ele_par.is(jquery_element);
}
function set_value(event, close) {
// use input values to set the time
var tim = ele_next.find(".ti_tx input").val();
var mini = ele_next.find(".mi_tx input").val();
var meri = "";
if(settings.show_meridian){
meri = ele_next.find(".mer_tx input").val();
}
if (tim.length !== 0 && mini.length !== 0 && (!settings.show_meridian || meri.length !== 0)) {
// store the value so we can set the initial value
// next time the picker is opened
ele.attr('data-timepicki-tim', tim);
ele.attr('data-timepicki-mini', mini);
if(settings.show_meridian){
ele.attr('data-timepicki-meri', meri);
// set the formatted value
ele.val(settings.format_output(tim, mini, meri));
}else{
ele.val(settings.format_output(tim, mini));
}
}
//Call user on_change callback function if set
if (settings.on_change !== null) {
settings.on_change(ele[0]);
}
if (close) {
close_timepicki();
}
}
function open_timepicki() {
set_date(settings.start_time);
ele_next.fadeIn();
if(!settings.input_writable) {
// focus on the first input and select its contents
var first_input = ele_next.find('input:visible').first();
first_input.focus();
}
// if the user presses shift+tab while on the first input,
// they mean to exit the time picker and go to the previous field
var first_input_exit_handler = function(e) {
if (e.which === 9 && e.shiftKey) {
first_input.off('keydown', first_input_exit_handler);
var all_form_elements = $(':input:visible:not(.timepicki-input)');
var index_of_timepicki_input = all_form_elements.index(ele);
var previous_form_element = all_form_elements.get(index_of_timepicki_input-1);
previous_form_element.focus();
}
};
first_input.on('keydown', first_input_exit_handler);
}
function close_timepicki() {
ele_next.fadeOut();
}
function set_date(start_time) {
var d, ti, mi, mer;
// if a value was already picked we will remember that value
if (ele.is('[data-timepicki-tim]')) {
ti = Number(ele.attr('data-timepicki-tim'));
mi = Number(ele.attr('data-timepicki-mini'));
if(settings.show_meridian){
mer = ele.attr('data-timepicki-meri');
}
// developer can specify a custom starting value
} else if (typeof start_time === 'object') {
ti = Number(start_time[0]);
mi = Number(start_time[1]);
if(settings.show_meridian){
mer = start_time[2];
}
// default is we will use the current time
} else {
d = new Date();
ti = d.getHours();
mi = d.getMinutes();
mer = "AM";
if (settings.show_meridian){
if (ti == 0) { // midnight
ti = 12;
} else if (ti == 12) { // noon
mer = "PM";
} else if (ti > 12) {
ti -= 12;
mer = "PM";
}
}
}
if (ti < 10) {
ele_next.find(".ti_tx input").val("0" + ti);
} else {
ele_next.find(".ti_tx input").val(ti);
}
if (mi < 10) {
ele_next.find(".mi_tx input").val("0" + mi);
} else {
ele_next.find(".mi_tx input").val(mi);
}
if(settings.show_meridian){
if (mer < 10) {
ele_next.find(".mer_tx input").val("0" + mer);
} else {
ele_next.find(".mer_tx input").val(mer);
}
}
}
function change_time(cur_ele, direction) {
var cur_cli = "time";
var cur_time = Number(ele_next.find("." + cur_cli + " .ti_tx input").val());
var ele_st = Number(settings.min_hour_value);
var ele_en = Number(settings.max_hour_value);
var step_size = Number(settings.step_size_hours);
if ((cur_ele && cur_ele.hasClass('action-next')) || direction === 'next') {
if (cur_time + step_size > ele_en) {
var min_value = ele_st;
if (min_value < 10) {
min_value = '0' + min_value;
} else {
min_value = String(min_value);
}
ele_next.find("." + cur_cli + " .ti_tx input").val(min_value);
} else {
cur_time = cur_time + step_size;
if (cur_time < 10) {
cur_time = "0" + cur_time;
}
ele_next.find("." + cur_cli + " .ti_tx input").val(cur_time);
}
} else if ((cur_ele && cur_ele.hasClass('action-prev')) || direction === 'prev') {
var minValue = Number(settings.min_hour_value)
if (cur_time - step_size < minValue) {
var max_value = ele_en;
if (max_value < 10) {
max_value = '0' + max_value;
} else {
max_value = String(max_value);
}
ele_next.find("." + cur_cli + " .ti_tx input").val(max_value);
} else {
cur_time = cur_time - step_size;
if (cur_time < 10) {
cur_time = "0" + cur_time;
}
ele_next.find("." + cur_cli + " .ti_tx input").val(cur_time);
}
}
}
function change_mins(cur_ele, direction) {
var cur_cli = "mins";
var cur_mins = Number(ele_next.find("." + cur_cli + " .mi_tx input").val());
var ele_st = 0;
var ele_en = 59;
var step_size = Number(settings.step_size_minutes);
if ((cur_ele && cur_ele.hasClass('action-next')) || direction === 'next') {
if (cur_mins + step_size > ele_en) {
ele_next.find("." + cur_cli + " .mi_tx input").val("00");
if(settings.overflow_minutes){
change_time(null, 'next');
}
} else {
cur_mins = cur_mins + step_size;
if (cur_mins < 10) {
ele_next.find("." + cur_cli + " .mi_tx input").val("0" + cur_mins);
} else {
ele_next.find("." + cur_cli + " .mi_tx input").val(cur_mins);
}
}
} else if ((cur_ele && cur_ele.hasClass('action-prev')) || direction === 'prev') {
if (cur_mins - step_size <= -1) {
ele_next.find("." + cur_cli + " .mi_tx input").val(ele_en + 1 - step_size);
if(settings.overflow_minutes){
change_time(null, 'prev');
}
} else {
cur_mins = cur_mins - step_size;
if (cur_mins < 10) {
ele_next.find("." + cur_cli + " .mi_tx input").val("0" + cur_mins);
} else {
ele_next.find("." + cur_cli + " .mi_tx input").val(cur_mins);
}
}
}
}
function change_meri(cur_ele, direction) {
var cur_cli = "meridian";
var ele_st = 0;
var ele_en = 1;
var cur_mer = null;
cur_mer = ele_next.find("." + cur_cli + " .mer_tx input").val();
if ((cur_ele && cur_ele.hasClass('action-next')) || direction === 'next') {
if (cur_mer == "AM") {
ele_next.find("." + cur_cli + " .mer_tx input").val("PM");
} else {
ele_next.find("." + cur_cli + " .mer_tx input").val("AM");
}
} else if ((cur_ele && cur_ele.hasClass('action-prev')) || direction === 'prev') {
if (cur_mer == "AM") {
ele_next.find("." + cur_cli + " .mer_tx input").val("PM");
} else {
ele_next.find("." + cur_cli + " .mer_tx input").val("AM");
}
}
}
// handle clicking on the arrow icons
var cur_next = ele_next.find(".action-next");
var cur_prev = ele_next.find(".action-prev");
$(cur_prev).add(cur_next).on("click", function() {
var cur_ele = $(this);
if (cur_ele.parent().attr("class") == "time") {
change_time(cur_ele);
} else if (cur_ele.parent().attr("class") == "mins") {
change_mins(cur_ele);
} else {
if(settings.show_meridian){
change_meri(cur_ele);
}
}
});
});
};
}(jQuery));
And I call it like:
<script src="js/timepicki.js"></script>
<script type='text/javascript'>
$('#timepicker').timepicki({
show_meridian:false,
min_hour_value:00,
max_hour_value:23,
step_size_minutes:10,
overflow_minutes:true,
increase_direction:'up',
disable_keyboard_mobile: true});
$('#timepicker1').timepicki({
show_meridian:false,
min_hour_value:00,
max_hour_value:23,
step_size_minutes:10,
overflow_minutes:true,
increase_direction:'up',
disable_keyboard_mobile: true});
</script>

Your browser is not rendering the HTML correctly since it is invalid.
You cannot have a form as a child element of a table, tbody or tr. You must either have the entirety of the table within the <form>, not only part of it. Try moving the entire form out-with the table and it should work.

used same files .
Put them in the same document root.
(both html and test.php).
Works without an issue.
check the image below .

You can also write this as
<?php
if(isset($_POST['submit'])){
echo $_POST['timepicker'];
echo $_POST['timepicker1'];
echo "Data nuo: " . $_POST['data'];
echo "Adresatas: " .$_POST['adresatas'];
}
?>
That will remove the error undefined index

JQuery / JavaScript Keyboard event

I have a typing speed test with a textarea and I have I paragraph split into spans. Every time the user hits space, it highlights the next span. Then I split the textarea val() and compare the two at the end. I have everything working except I cannot get the enter key to do what I want it to do. I need it to act like the space bar(in the background) and act as the enter key on screen.
$(function() {
//APPEARANCE
$('#error').hide();
$('#oldTextOne').hide();
$('#oldTextTwo').hide();
$('#oldTextThree').hide();
$('#oldTextFour').hide();
$('#oldTextFive').hide();
$('.linkBox').hover(function() {
$(this).removeClass('linkBox').addClass('linkHover');
}, function() {
$(this).removeClass('linkHover').addClass('linkBox');
});
//FUNCTIONALITY VARIABLES
var min = '5';
var sec = '00';
var realSec = 0;
var errorTest = "hasn't started yet";
var oldTextVal;
var para;
// PICK A RANDOM PARAGRAPH
function pickRandom() {
var date = new Date();
date = date.getTime();
date += '';
var dateSplit = date.split('');
var temp = dateSplit.length - 1;
var picker = dateSplit[temp];
if (picker === '0' || picker === '1') {
para = $('#oldTextOne').text();
}
else if (picker === '2' || picker === '3') {
para = $('#oldTextTwo').text();
}
else if (picker === '4' || picker === '5') {
para = $('#oldTextThree').text();
}
else if (picker === '6' || picker === '7') {
para = $('#oldTextFour').text();
}
else {
para = $('#oldTextFive').text();
}
var splitPara = para.split(' ');
for (i in splitPara) {
$('#oldTextBox').append('<span id="pw' + i + '">' + splitPara[i] + '</span> ');
}
}
pickRandom();
//FUNCTION FOR TIMER
//APPEARANCE
function show() {
$('#timer').text(min + ' : ' + sec);
}
show();
//COUNT-DOWN
var count = function() {
sec = +sec - 1;
sec += '';
realSec++;
if (+sec === -1) {
sec = '59';
min -= 1;
min += '';
}
if (sec.length === 1) {
sec = '0' + sec;
}
show();
if (sec === '00' && min === '0') {
clearInterval(run);
checkIt();
}
};
// TYPE THE TEXT INTO #TYPEDTEXTBOX
$('#pw0').addClass('green');
var lastLetter;
$('#typedTextBox').focus().keypress(function() {
if (errorTest === "hasn't started yet") {
errorTest = 'running';
run = setInterval(count, 1000);
}
//STOP ERRORS FROM PEOPLE HITTING SPACE BAR TWICE IN A ROW !!NOT WORKING IN IE8
var thisLetter = event.which;
if (lastLetter === 32 && event.which === 32) {
event.preventDefault();
}
lastLetter = thisLetter;
}).keyup(function() {
//STOP ERRORS FROM BACKSPACE NOT REGISTERING WITH KEYPRESS FUNCTION
if (event.which === 8) {
lastLetter = 8;
}
if (event.which === 13) {
?????????????????????????????????????????????
}
//SPLIT THE TYPED WORDS INTO AN ARRAY TO MATCH THE OLD TXT SPANS (TO HIGHLIGHT THE CURRENT WORD IN OLDTXT)
var typedWords = $(this).val().split(' ');
var temp = typedWords.length - 1;
var oldTemp = temp - 1;
var stopErrors = temp + 1;
$('span:nth(' + temp + ')').addClass('green');
$('span:nth(' + oldTemp + ')').removeClass('green');
$('span:nth(' + stopErrors + ')').removeClass('green');
//SCROLL
if (typedWords.length < 50) {
return;
}
else if (typedWords.length > 50 && typedWords.length < 100) {
$('#oldTextBox').scrollTop(30);
}
else if (typedWords.length > 100 && typedWords.length < 150) {
$('#oldTextBox').scrollTop(60);
}
else if (typedWords.length > 150 && typedWords.length < 200) {
$('#oldTextBox').scrollTop(90);
}
else if (typedWords.length > 200) {
$('#oldTextBox').scrollTop(120);
}
//KEEP FOCUS IN THE TYPING AREA
}).blur(function() {
if (errorTest !== 'done') {
$(this).focus();
}
});
//COMPARE
//MAKE AN ARRAY OF THE OLDTEXT
var oldWords = para.split(' ');
//FUNCTION TO DISPLAY RESULTS
var checkIt = function() {
errorTest = 'done';
var correct = 0;
var typed = $('#typedTextBox').val();
var typedWords = typed.split(' ');
$('#typedTextBox').blur();
for (i = 0; i < typedWords.length; i++) {
if (typedWords[i] === oldWords[i]) {
correct += 1;
}
}
var errors = typedWords.length - correct;
var epm = (errors / realSec) * 60;
var wpm = Math.round(( ($('#typedTextBox').val().length / 5 ) / realSec ) * 60);
var realWpm = Math.round(wpm - epm);
//SHOW RESULTS
$('#oldTextBox').html('<br><span id="finalOne">WPM : <strong>' + realWpm + ' </strong></span><span class="small">(error adjusted)</span><br><br><span id="finalTwo">You made ' + errors + ' errors </span><br><span id="finalThree">Total character count of ' + $('#typedTextBox').val().length + '</span><br><span id="finalFour">Gross WPM : ' + wpm + '</span>');
};
//STOP BUTTON APPEARANCE AND FUNCTIONALITY
$('#stop').mouseover(function() {
$(this).addClass('stopHover');
}).mouseout(function() {
$(this).removeClass('stopHover');
}).click(function() {
if (errorTest === 'running') {
checkIt();
clearInterval(run);
errorTest = 'done';
}
});
});

try this:
//ENTER KEY
if (event.which === 13) {
//event.stopPropagation(); or
event.preventDefault();
//simulate spacebar
$(window).trigger({type: 'keypress', which: 32, keyCode: 32});
}

#james - Thanks for the help. I found a better way of thinking about the problem. Instead of changing the enter key action, I changed the split function to var typedWords = typed.split(/[ \r\n]+/);

Why will my Javascript not run in IE

Below is my code. It is supposed to filter a table. It functions great in everything but IE. Can you help?
Perhaps there is a missing tag or something. I've been over it a number of times and could really do with someone's help please!
<script type="text/javascript">
function hasPath(element, cls) {
return (' ' + element.getAttribute('pathway')).indexOf(cls) > -1;
}
function hasLevel(element, cls) {
return (' ' + element.getAttribute('level')).indexOf(cls) > -1;
}
function hasBody(element, cls) {
return (' ' + element.getAttribute('body')).indexOf(cls) > -1;
}
function QualificationSearch() {
var imgdiv = document.getElementById("Chosen_Pathway_img");
var p = document.getElementById("PathwaySelect");
var pathway = p.options[p.selectedIndex].value;
if (pathway == "ALLPATHS") {
pathway = "";
imgdiv.src = "/templates/superb/images/QualChecker/pic_0.png"
}
if (pathway == "ES") {
imgdiv.src = "/templates/superb/images/QualChecker/pic_1.png"
}
if (pathway == "HOUSING") {
imgdiv.src = "/templates/superb/images/QualChecker/pic_2.png"
}
if (pathway == "PLAYWORK") {
imgdiv.src = "/templates/superb/images/QualChecker/pic_3.png"
}
if (pathway == "SC") {
imgdiv.src = "/templates/superb/images/QualChecker/pic_4.png"
}
if (pathway == "YW") {
imgdiv.src = "/templates/superb/images/QualChecker/pic_5.png"
}
var a = document.getElementById("AwardingBodySelect");
var awardingBody = a.options[a.selectedIndex].value;
if (awardingBody == "ALLBODIES") {
awardingBody = "";
}
var levelGroup = document.getElementsByName("LevelGroup");
var chosenLevel = ""
for (var g = 0; g < levelGroup.length; g++) {
if (levelGroup[g].checked) {
chosenLevel += levelGroup[g].value + " ";
}
}
if (chosenLevel == undefined) {
var chosenLevel = "";
} else {
var splitLevel = chosenLevel.split(" ");
var levelA = splitLevel[0];
var levelB = splitLevel[1];
var levelC = splitLevel[2];
var levelD = splitLevel[3];
if (levelA == "") {
levelA = "NOLVL"
}
if (levelB == "") {
levelB = "NOLVL"
}
if (levelC == "") {
levelC = "NOLVL"
}
if (levelD == "") {
levelD = "NOLVL"
}
}
var fil = document.getElementsByName("QList");
for (var i = 0; i < fil.length; i++) {
fil.item(i).style.display = "none";
if ((hasBody(fil.item(i), awardingBody) == true || awardingBody == "") && (hasPath(fil.item(i), pathway) == true || pathway == "") && ((hasLevel(fil.item(i), levelA) == true || hasLevel(fil.item(i), levelB) == true || hasLevel(fil.item(i), levelC) == true || hasLevel(fil.item(i), levelD) == true) || chosenLevel == "")) {
fil.item(i).style.display = "block";
}
}
}
</script>

Check your semicolons. IE is far more strict on that kind of stuff than FF.