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
Related
function turn(id, player) {
let value = parseInt($('#' + id).attr('data-value'));
showValue();
id = parseInt(id);
for (let i = 1; i <= value; i++) {
let newId = id + i;
setTimeout(function () {
if (player == 'p1') {
let value = parseInt($('#' + newId).attr('data-value'));
if (newId == 14) {
let mainValue = parseInt($('#main-1').attr('data-value'));
$('#main-1').attr('data-value', mainValue + 1);
// i want to add i++; but nothing happen
} else {
$('#' + newId).attr('data-value', value + 1);
}
} else {
let value = parseInt($('#' + newId).attr('data-value'));
if (newId == 7) {
let mainValue= parseInt($('#main-2').attr('data-value'));
$('#main-2').attr('data-value', mainValue + 1);
//here too
} else {
$('#' + newId).attr('data-value', value + 1);
}
} showValue();
}, i * 500);
}
}
when i console.log the i in that spot, nothing happened.
but when i change i outside setTimeout function, it works.
how can i fix that?
You should use setInterval instead of setTimeout in your case.
function turn(id, player) {
let value = parseInt($("#" + id).attr("data-value"));
showValue();
id = parseInt(id);
let i = 1;
const timer = setInterval(function () {
if (player == "p1") {
let newId = id + i;
let value = parseInt($("#" + newId).attr("data-value"));
if (newId == 14) {
let mainValue = parseInt($("#main-1").attr("data-value"));
$("#main-1").attr("data-value", mainValue + 1);
// i want to add i++; but nothing happen
} else {
$("#" + newId).attr("data-value", value + 1);
}
} else {
let value = parseInt($("#" + newId).attr("data-value"));
if (newId == 7) {
let mainValue = parseInt($("#main-2").attr("data-value"));
$("#main-2").attr("data-value", mainValue + 1);
//here too
} else {
$("#" + newId).attr("data-value", value + 1);
}
}
showValue();
i++;
if (i > value) {
clearInterval(timer);
}
}, 500);
}
function turn(id, player) {
let value = parseInt($('#' + id).attr('data-value'));
showValue();
id = parseInt(id);
let i = 1;
for (i = 1; i <= value; i++) {
let newId = id + i;
setTimeout(function () {
if (player == 'p1') {
let value = parseInt($('#' + newId).attr('data-value'));
if (newId == 14) {
let mainValue = parseInt($('#main-1').attr('data-value'));
$('#main-1').attr('data-value', mainValue + 1);
i++;
} else {
$('#' + newId).attr('data-value', value + 1);
}
} else {
let value = parseInt($('#' + newId).attr('data-value'));
if (newId == 7) {
let mainValue= parseInt($('#main-2').attr('data-value'));
$('#main-2').attr('data-value', mainValue + 1);
i = i + 1
} else {
$('#' + newId).attr('data-value', value + 1);
}
} showValue();
}, i * 500);
}
}
I think this here should work as it worked for me! Have a nice day :)
I am working on a small AngularJS application with with Material Steppers.
I have to select items from two sections of the page and return true only if the items from both sections belong to the category with id (categoryID) 1.
Choosing items from section A already changes the variable this.isTriggerB, that should only be change after choosing from section A:
class Controller {
constructor($mdStepper) {
this.isTriggerA = false;
this.isTriggerB = false;
this.clickedStepNumber = 0;
getCurrentStep() {
this.steppers = this.$mdStepper('stepper');
const steps = this.steppers.steps;
steps.forEach((el, index) => {
let step = this.steppers.steps[index];
if (step.isClicked()) {
this.clickedStepNumber = step.stepNumber;
}
});
}
checkCategory() {
this.getCurrentStep();
if (this.filter.provider) {
let categoryID = parseInt(this.filter.category.id, 10);
console.log('Cid: ' + categoryID);
if (categoryID !== 1) {
this.isTestPassed = false;
} else {
if (parseInt(this.clickedStepNumber, 10 === 1)) {
this.isTriggerA = true;
console.log('Step: ' + this.clickedStepNumber);
console.log("A1: " + this.isTriggerA);
console.log("B1: " + this.isTriggerB);
}
if (parseInt(this.clickedStepNumber, 10 === 2)) {
this.isTriggerB = true;
console.log('Step: ' + this.clickedStepNumber);
console.log("A2: " + this.isTriggerA);
console.log("B2: " + this.isTriggerB);
}
if (this.isTriggerA === true && this.isTriggerB === true) {
this.isTestPassed = true;
} else {
this.isTestPassed = false;
}
}
}
}
}
The script should not even go inside if it is executing.
It should treat the 2 cases (steps) differently.
What am I doing wrong?
Move the banana:
if (categoryID !== 1) {
this.isTestPassed = false;
} else {
̶i̶f̶ ̶(̶p̶a̶r̶s̶e̶I̶n̶t̶(̶t̶h̶i̶s̶.̶c̶l̶i̶c̶k̶e̶d̶S̶t̶e̶p̶N̶u̶m̶b̶e̶r̶,̶ ̶1̶0̶ ̶=̶=̶=̶ ̶1̶)̶)̶ ̶{̶
if (parseInt(this.clickedStepNumber, 10) === 1) {
this.isTriggerA = true;
console.log('Step: ' + this.clickedStepNumber);
console.log("A1: " + this.isTriggerA);
console.log("B1: " + this.isTriggerB);
}
̶i̶f̶ ̶(̶p̶a̶r̶s̶e̶I̶n̶t̶(̶t̶h̶i̶s̶.̶c̶l̶i̶c̶k̶e̶d̶S̶t̶e̶p̶N̶u̶m̶b̶e̶r̶,̶ ̶1̶0̶ ̶=̶=̶=̶ ̶2̶)̶)̶ ̶{̶
if (parseInt(this.clickedStepNumber, 10) === 2) {
this.isTriggerB= true;
console.log('Step: ' + this.clickedStepNumber);
console.log("A2: " + this.isTriggerA);
console.log("B2: " + this.isTriggerB);
}
I am trying to disable option required when I select checkbox to "No"
So when I select "NO" and when I submit form I get a required message and It's return dropdown menu.
So in picture you can see better and you will understand the problem
When choice is selected to "NO"
https://i.imgur.com/kCFxTFA.jpg
When choice is selected to "YES"
https://i.imgur.com/cUPlZeb.jpg
When I selected choice NO and submit form I get required message
https://i.imgur.com/LvIxMM1.jpg
Source Code
Showing/Hidden content
$(document).ready(function () {
$("input[name$='Chapel']").click(function () {
var test = $(this).val();
if (test == 'No') {
$("div#hideChapel").hide();
}
else {
$("div#hideChapel").show();
}
});
});
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.URL);
});
Function for time and date validation
function dateValidation() {
if (document.getElementById('dateOfEvent').value == "")
document.getElementById("valDate").innerHTML = "<p>Date Field required.</p>";
else
document.getElementById("valDate").innerHTML = "";
}
function timeValidation() {
if (document.getElementById('TimeFrom').value == "")
{
document.getElementById("valTime").innerHTML = "<p>Time From Field required.</p>";
}
else
{
provjera();
document.getElementById("valTime").innerHTML = "";
}
}
Chapel Time validation
var isValidTIme = 1;
function chapelTime() {
var t = new Date();
var timeFrom = document.getElementById("TimeFrom").value;
var timeTo = document.getElementById("TimeTo").value;
var chapelTimeFrom = document.getElementById("ChapelTimeFrom").value;
var chapelTimeTo = document.getElementById("ChapelTimeTo").value;
d = t.getDate();
m = t.getMonth() + 1;
y = t.getFullYear();
//Convert time into date object
var d1 = new Date(m + "/" + d + "/" + y + " " + timeFrom);
var d2 = new Date(m + "/" + d + "/" + y + " " + timeTo);
var chd1 = new Date(m + "/" + d + "/" + y + " " + chapelTimeFrom);
var chd2 = new Date(m + "/" + d + "/" + y + " " + chapelTimeTo);
//Get timestamp
var t1 = d1.getTime();
var t2 = d2.getTime();
var cht1 = chd1.getTime();
var cht2 = chd2.getTime();
if (t2 < t1) {
var endDay = new Date(m + "/" + d + "/" + y + " " + "11:45 PM");
var startAnotherDay = new Date(m + "/" + d + "/" + y + " " + "12:00 AM");
if (cht1 > t2 && cht1 < t1) {
document.getElementById("valChapelTimeFrom").innerHTML = "<p>Chapel Time From must be between Event Time From and Event Time To values.</p>";
return false;
}
else if (cht1 < t1) {
document.getElementById("valChapelTimeFrom").innerHTML = "";
if (cht2 < cht1 || cht2 > t2) {
document.getElementById("valChapelTimeTo").innerHTML = "<p>Chapel Time To must be between Chapel Time From and Event Time To values.</p>";
return false;
}
else {
document.getElementById("valChapelTimeTo").innerHTML = "";
return true;
}
}
else if (cht2 < t1 && cht2 > t2) {
document.getElementById("valChapelTimeTo").innerHTML = "<p>Chapel Time To must be between Chapel Time From and Event Time To values.</p>";
return false;
}
else {
document.getElementById("valChapelTimeFrom").innerHTML = "";
document.getElementById("valChapelTimeTo").innerHTML = "";
return true;
}
}
else {
if (cht1 < t1 || cht1 > t2) {
document.getElementById("valChapelTimeFrom").innerHTML = "<p>Chapel Time From must be between Event Time From and Event Time To values.</p>";
return false;
}
else if (cht2 < t1 || cht2 > t2) {
document.getElementById("valChapelTimeFrom").innerHTML = "";
document.getElementById("valChapelTimeTo").innerHTML = "<p>Chapel Time To must be between Event Time From and Event Time To values.</p>";
return false;
}
else if (cht1 >= cht2) {
document.getElementById("valChapelTimeFrom").innerHTML = "";
document.getElementById("valChapelTimeTo").innerHTML = "";
document.getElementById("valChapelTimeTo").innerHTML = "<p>Chapel Time To must be greater then Chapel Time From.</p>";
return false;
}
else {
document.getElementById("valChapelTimeFrom").innerHTML = "";
document.getElementById("valChapelTimeTo").innerHTML = "";
return true;
}
}
}
There are rest of function for checking time and date
function provjera() {
if (chapelTime() == false || cocktailTime() == false || mainTime() == false) {
isValidTIme = 0;
}
else {
isValidTIme = 1;
}
}
function checkIfEmpty() {
if (document.getElementById("TimeFrom").value == "" || document.getElementById("TimeTo").value == "" || document.getElementById("ChapelTimeFrom").value == "" || document.getElementById("ChapelTimeTo").value == "" || document.getElementById("CocktailTimeFrom").value == "" || document.getElementById("CocktailTimeTo").value == "" || document.getElementById("MainTimeFrom").value == "" || document.getElementById("MainTimeTo").value == "") {
return false;
}
else {
provjera();
return true;
}
}
function provjeraBezChapela() {
if (cocktailTimeWithoutChapel() == false || mainTime() == false) {
isValidTIme = 0;
}
else {
isValidTIme = 1;
}
}
function checkIfEmptyWithoutChapel() {
if (document.getElementById("TimeFrom").value == "" || document.getElementById("TimeTo").value == "" || document.getElementById("CocktailTimeFrom").value == "" || document.getElementById("CocktailTimeTo").value == "" || document.getElementById("MainTimeFrom").value == "" || document.getElementById("MainTimeTo").value == "") {
return false;
}
else {
provjeraBezChapela();
return true;
}
}
I just only to disable required message when I choice "NO" and it should allow me to submit form.
Any suggestion ?
In your submit code you have to verify if the No option is selected, somethink like this:
if(document.getElementById('YesOption').checked) {
.........do something.......
}
if(document.getElementById('NoOption').checked) {
..... do other things without message....
}
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]+/);
I would like to add a $5.00 charge whenever the txtBwayEDUGift checkbox is selected. The javascript code I currently have is reducing the amount when checkbox is unchecked, but not applying the charge when selected. I can provide additonal code if needed.
Here is my input type from my aspx page:
<input type="checkbox" name="txtBwayEDUGift" id="txtBwayEDUGift" onchange="checkboxAdd(this);" checked="checked" />
Here is my javascript:
{
var divPrevAmt;
if (type == 0)
{
divPrevAmt = document.getElementById("divBwayGiftPrevAmt");
}
else if (type == 1)
{
divPrevAmt = document.getElementById("divBwayEDUGiftPrevPmt");
}
var txtAmt = document.getElementById(obj);
var amt = txtAmt.value;
amt = amt.toString().replace("$","");
amt = amt.replace(",","");
var prevAmt = divPrevAmt.innerHTML;
try
{
amt = amt * 1;
}
catch(err)
{
txtAmt.value = "";
return;
}
if (amt >= 0) //get the previous amount if any
{
if (type == 0)
{
if (prevAmt.toString().length > 0)
{
prevAmt = prevAmt * 1;
}
else
{
prevAmt = 0;
}
}
else if (type == 1)
{
if (prevAmt.toString().length > 0)
{
prevAmt = prevAmt * 1;
}
else
{
prevAmt = 0;
}
}
//now update the master total
var total = document.getElementById("txtTotal");
var dTotal = total.value.toString().replace("$","");
dTotal = dTotal.replace(",","");
dTotal = dTotal * 1;
var newTotal = dTotal - prevAmt;
newTotal = newTotal + amt;
divPrevAmt.innerHTML = amt.toString();
newTotal = addCommas(newTotal);
amt = addCommas(amt);
txtAmt.value = "$" + amt;
total.value = "$" + newTotal;
}
else
{
txtAmt.value = "";
return;
}
}
function disable()
{
var txtTotal = document.getElementById("txtTotal");
var txt = txtTotal.value;
txtTotal.value = txt;
var BwayGift = document.getElementById("txtBwayGift");
BwayGift.focus();
}
function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
var newTotal = x1 + x2;
if (newTotal.toString().indexOf(".") != -1)
{
newTotal = newTotal.substring(0,newTotal.indexOf(".") + 3);
}
return newTotal;
}
function checkChanged()
{
var cb = document.getElementById("cbOperaGala");
if (cb.checked == true)
{
var tableRow = document.getElementById("trCheckbox");
tableRow.style.backgroundImage = "url('images/otTableRowSelect.jpg')";
}
else if (cb.checked == false)
{
var tableRow = document.getElementById("trCheckbox");
tableRow.style.backgroundImage = "";
}
}
function alertIf()
{
var i = 0;
for (i=5;i<=10;i++)
{
try{
var subtotal2 = document.getElementById("txtSubTotal" + i);
var dSubtotal2 = subtotal2.value;
dSubtotal2 = dSubtotal2.replace("$","");
dSubtotal2 = dSubtotal2 * 1;}
catch (Error){dSubtotal2 = 0}
if (dSubtotal2 > 0)
{
alert("You have selected the I want it all package, \n however you have also selected individual tickets to the same events. \n If you meant to do this, please disregard this message.");
break;
}
}
}
function disableEnterKey(e)
{
var key;
if(window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox
return (key != 13);
}
//Add $5.00 donation to cart
function checkboxAdd(ctl) {
if (ctl.checked == true) {
// alert("adding $5");
calculateTotal(5, "A");
} else {
// alert("deducting $5");
calculateTotal( 5, "S");
}
}
</script>
I do not understand the context of the scenario. When a user clicks the checkbox are you making an HTTP request to the server? Or is this a simple form POST page? What is calculateTotal() doing?
I figured it out. So the functionality I had in place was fine.
//Add $5.00 donation to cart
function checkboxAdd(txtBwayEDUGift) {
if (txtBwayEDUGift.checked == true) {
// alert("adding $5");
calculateTotal(5, "A");
} else {
// alert("deducting $5");
calculateTotal(5, "S");
}
}
But I needed to add a load function:
function load() {
calculateTotal(5, "A");
}
<body onload="load()">
Along with adding a reference to my c# page:
if (txtBwayEDUGift.Checked)
{
addDonations(5.00, 93);
}
You can use jQuery :)
$(txtBwayEDUGift).change(calculateTotal(5, "S"));