只有两个$ _POST变量中的两个被设置

时间:2017-10-25 19:26:39

标签: javascript php html

所以我的形式如下:

<?php
echo $_POST['timepicker'];
echo $_POST['timepicker1'];
echo "Data nuo: " . $_POST['data'];
echo "Adresatas: " .$_POST['adresatas'];
 ?>

我有一个简单的php文件来测试输出:

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和timepicker1)变得未定义:

timepicker

timepicker1var_dump($_POST)字段设置了timepicker:

http://senthilraj.github.io/TimePicki/options.html

它们也没有显示在array(3) { ["adresatas"]=> string(9) "123456" ["data"]=> string(10) "2017-10-16" ["submit"]=> string(10) "Išsaugoti" } 中:

/*
 * 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));

可能有什么不对?看起来像一个简单的表单和PHP来输出值,但它不起作用。

Timepicker javascript:

<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>

我称之为:

for

3 个答案:

答案 0 :(得分:1)

使用相同的文件。 将它们放在同一个文档根目录中。 (包括html和test.php)。 工作没有问题。 检查下面的图片。

enter image description here

答案 1 :(得分:1)

您的浏览器无法正确呈现HTML,因为它无效。

您不能将form作为tabletbodytr的子元素。您必须拥有<form>中的整个表格,而不仅仅是其中的一部分。尝试将整个表单移出表格,它应该可以正常工作。

答案 2 :(得分:0)

您也可以将其写为

<?php
if(isset($_POST['submit'])){
echo $_POST['timepicker'];
echo $_POST['timepicker1'];
echo "Data nuo: " . $_POST['data'];
echo "Adresatas: " .$_POST['adresatas'];
}
 ?>

这将删除错误未定义的索引