Matas - developer Ответов: 0

Как изменить span на input с помощью javascript

Привет,

Я разрабатываю приложение, и у меня есть некоторые проблемы. Мне нужно чтобы увидеть результат, но php POST нужно ввести поле ввода, когда я изменяю для ввода JavaScript не работает и не показывает результат в поле ввода, а затем все должно идти в базу данных.

Мой HTML-код с полем ввода: 
<tbody>
        <tr>
          <td><input type="time" class="form-control form-control-sm" id="start" name="darb_work"></td>
          <td><input type="time" class="form-control form-control-sm" id="end"   name="darb_finish"></td>
          <td><input type="text" class="form-control form-control-sm" id="diff"  name="darb_result"></td>
        </tr>
      </tbody>


HTML-код поле занимать :

<tbody>
        <tr>
          <td><input type="time" class="form-control form-control-sm" id="start" name="darb_work"></td>
          <td><input type="time" class="form-control form-control-sm" id="end"   name="darb_finish"></td>
          <td><span type="time" class="form-control form-control-sm" id="diff"  name="darb_result"></td>
        </tr>
      </tbody>


Мой PHP код:
if (isset($_POST['create_darb'])) {
    $darb_title        = escape($_POST['title']);
    $darb_user         = escape($_POST['darb_user']);
    $darb_status       = escape($_POST['darb_status']);

    $darb_content      = escape($_POST['darb_content']);
    $darb_date         = escape(date('d-m-y'));

    $darb_fileUpload      =  escape($_FILES['darb_fileUpload']['name']);
    $darb_fileUpload_temp = escape($_FILES['darb_fileUpload']['tmp_name']);

    $darb_work         =  escape($_POST['darb_work']);
    $darb_finish       =  escape($_POST['darb_finish']);
    $darb_result       =  escape($_POST['darb_result']);


    move_uploaded_file($darb_fileUpload_temp, "../uploads/$darb_fileUpload");

    $query = "INSERT INTO darb(darb_title, darb_user, darb_date, darb_content, darb_status, darb_fileUpload, darb_work, darb_finish, darb_result) ";

    $query .= "VALUES('{$darb_title}','{$darb_user}',now(),'{$darb_content}','{$darb_status}','{$darb_fileUpload}', '{$darb_work}','{$darb_finish}','{$darb_result}')";

    $create_darb_query = mysqli_query($connection, $query);

    confirmQuery($create_darb_query);

    $the_darb_id = mysqli_insert_id($connection);


код JavaScript: 
// Hour Auto calculate

$('#hours input').on('keyup change',function () {
  differenceHours.diff_hours('start', 'end', 'diff');
});


Больше кода Javascript :

var DifferenceHours = function(options){

    /*
     * Variables
     * in the class
     */
    const vars = {
        first_hour_split: null,
        second_hour_split: null,
        $el: null
    };

    /*
     * Can access this.method
     * inside other methods using
     * _this.method()
     */
    let _this = this;

    /*
     * Constructor
     */
    this.construct = function (options) {
        $.extend(vars , options);
    };

    /*
     * PUBLIC
     */

    this.diff_hours = function (time1, time2, result) {
        vars.first_hour_split = $('#' + time1).val().split(':');
        vars.second_hour_split = $('#' + time2).val().split(':');
        vars.$el = $('#' + result);

        let hours;
        let minute;

        if (parseInt(vars.first_hour_split[0]) < parseInt(vars.second_hour_split[0]) && parseInt(vars.first_hour_split[1]) < parseInt(vars.second_hour_split[1])) {

            //As for the addition, the subtraction is carried out separately, column by column.
            hours = parseInt(vars.second_hour_split[0]) - parseInt(vars.first_hour_split[0]);
            minute = parseInt(vars.second_hour_split[1]) - parseInt(vars.first_hour_split[1]);

            let _hours = '';
            let _minute = '';

            if (hours < 10) {
                _hours ='0' + hours;
            } else {
                _hours = hours;
            }

            if (minute < 10) {
                _minute = '0' + minute;
            } else {
                _minute = minute;
            }

            vars.$el.text(_hours + 'h' + _minute + 'm')

        }else if (parseInt(vars.second_hour_split[0]) > parseInt(vars.first_hour_split[0])) {
            if (parseInt(vars.second_hour_split[1]) < parseInt(vars.first_hour_split[1])) {

                // As before we subtract column by column ... and we realize that it's impossible because our minute in second hour is greater than our minute in first hour
                // We will transform 1 hour in 60 minutes
                let _hours = parseInt(vars.second_hour_split[0]) - 1;
                let _minute = parseInt(vars.second_hour_split[1]) + 60;
                let final_hours = '';
                let final_min = '';

                hours = _hours - parseInt(vars.first_hour_split[0]);
                minute = _minute - parseInt(vars.first_hour_split[1]);

                if (hours < 10) {
                    final_hours = '0' + hours;
                } else {
                    final_hours = hours;
                }

                if (minute < 10) {
                    final_min = '0' + minute;
                } else {
                    final_min = minute;
                }

                vars.$el.text(final_hours + 'H' + final_min)
            }

            if (parseInt(vars.second_hour_split[1]) === parseInt(vars.first_hour_split[1])) {
                hours = parseInt(vars.second_hour_split[0]) - parseInt(vars.first_hour_split[0]);
                let final_hours = '';

                if (hours < 10) {
                    final_hours = '0' + hours;
                } else {
                    final_hours = hours;
                }

                vars.$el.text(final_hours + 'H' + '00')
            }

        }else if (parseInt(vars.first_hour_split[0]) > parseInt(vars.second_hour_split[0])) {
            let first_hour_only_hour = parseInt(vars.first_hour_split[0]);
            let second_hour_only_hour = parseInt(vars.second_hour_split[0]);

            let first_hour_only_min = parseInt(vars.first_hour_split[1]);
            let second_hour_only_min = parseInt(vars.second_hour_split[1]);

            let tmp_hour = 24 - first_hour_only_hour;
            let tmp_ttl_hour = tmp_hour + second_hour_only_hour;

            let tmp_ttl_min = first_hour_only_min + second_hour_only_min;
            let tmp_new_hour = 0;
            let tmp_new_min_mod = 0;

            let _hours = '';
            let _min = '';

            if (tmp_ttl_min > 59) {
                tmp_new_hour = parseInt(tmp_ttl_min/60);
                tmp_new_min_mod = tmp_ttl_min%60;

                tmp_ttl_hour += tmp_new_hour;
            } else {
                tmp_new_min_mod = tmp_ttl_min
            }

            if (tmp_ttl_hour < 10) {
                _hours = '0' + tmp_ttl_hour;
            } else {
                _hours = tmp_ttl_hour
            }

            if (tmp_new_min_mod < 10) {
                _min = '0' + tmp_new_min_mod
            } else {
                _min = tmp_new_min_mod
            }

            vars.$el.text(_hours + 'H' + _min)
        } else if (parseInt(vars.first_hour_split[0]) === parseInt(vars.second_hour_split[0])) {
            hours = '00';
            let minute = 0;
            if (parseInt(vars.first_hour_split[1]) < parseInt(vars.second_hour_split[1])) {
                minute = parseInt(vars.second_hour_split[1]) - parseInt(vars.first_hour_split[1]);
            }

            if (minute < 10) {
                vars.$el.text(hours + 'H0' + minute)
            } else  {
                vars.$el.text(hours + 'H' + minute)
            }
        }else if (parseInt(vars.first_hour_split[0]) === 0 && parseInt(vars.first_hour_split[1]) === 0) {
            hours = parseInt(vars.second_hour_split[0]);
            minute = parseInt(vars.second_hour_split[1]);

            if (hours === 0) {
                vars.$el.text('00H' + minute)
            }else if (minute === 0){
                if (hours < 10) {
                    vars.$el.text('0' + hours + 'H00');
                }else {
                    vars.$el.text(hours + 'H00');
                }
            }else {
                vars.$el.text(hours + 'H' + minute)
            }
        }
    };

    /* END PUBLIC FUNCTION */

    this.construct(options);
};


const differenceHours = new DifferenceHours();


Что я уже пробовал:

Я перепробовал много советов в интернете, но не смог решить эту проблему.

MadMyche

А javascript-это где?

Matas - developer

Добавлен

F-ES Sitecore

Что делает "differenceHours.diff_hours"?

Matas - developer

Это javascript-файл, который вычисляет время ввода 1 и ввода 2 и показывает результат, может быть, в файле differenceHours.diff есть проблема?

F-ES Sitecore

Проблема будет заключаться в этом коде. Вы обновляете входные данные, устанавливая свойство value ("val()" при использовании jQuery), но span, устанавливая свойство innerHTML ("html()" при использовании jQuery), так что этот код необходимо будет изменить.

Matas - developer

Я добавил еще код. Спасибо за ваш ответ

F-ES Sitecore

Вы используете .text, так что это должно быть нормально для обновления диапазона. Там много кода, Вы должны использовать отладку (на стороне сервера и на стороне клиента), чтобы шагнуть через то, что делает код, чтобы увидеть, когда он перестает делать то, что вы ожидаете.

Matas - developer

Большое вам спасибо!

Richard Deeming 

vars.$el.text(...)

Как сказал F-ES, вы пытаетесь установить внутренний текст элемента. Это не работает с входными данными; вам нужно использовать vars.$el.val(...) вместо.

.text() | jQuery API документация[^]
.val() | документация по API jQuery[^]

Matas - developer

Большое вам спасибо!

Richard Deeming

Ваш код уязвим для SQL-инъекция[^]. НИКОГДА используйте конкатенацию строк / интерполяцию для построения SQL-запроса. ВСЕГДА используйте параметризованный запрос.

PHP: SQL-инъекция - руководство пользователя[^]

Matas - developer

Спасибо за Ваше мнение, я исправлю эту проблему

0 Ответов