How to change span to input using javascript

Question

0.00/5 (No votes)

See more:

Hello,

I developing app and i have some problems. I need to see result, but php POST need input field, when I change to input, javascript doesn't work and dont show result in the input field and then everything has to go to the database.

My HTML code with input field:

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 code with span field :

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>

My PHP code:

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

JavaScript

// Hour Auto calculate

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

More Javascript code :

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();

What I have tried:

I have tried a lot of advice online but couldn't resolve this problem.

Posted 29-Apr-20 15:04pm

Matas - developer

Updated 30-Apr-20 5:09am

v4

Add a Solution

Comments

MadMyche 29-Apr-20 21:30pm

And the javascript is where?

Matas - developer 30-Apr-20 5:10am

Added

F-ES Sitecore 30-Apr-20 6:08am

What does "differenceHours.diff_hours" do?

Matas - developer 30-Apr-20 6:29am

It’s javascript file, who calculates time input 1 and input 2 and shows result, maybe in differenceHours.diff file there is a problem?

F-ES Sitecore 30-Apr-20 6:47am

The issue will be in that code. You update an input by setting the value property ("val()" if using jQuery), but a span by setting the innerHTML property ("html()" if using jQuery), so that code will need to be amended.

Matas - developer 30-Apr-20 11:09am

I added more code. Thank you for your answer

F-ES Sitecore 30-Apr-20 12:02pm

You're using .text so that should be ok for updating a span. There's a lot of code there, you should use debugging (server side and client side) to step through what the code is doing to see when it stops doing what you expect it to.

Matas - developer 30-Apr-20 22:11pm

Thank you so much!

Richard Deeming 30-Apr-20 12:10pm

vars.$el.text(...)

As F-ES said, you're trying to set the inner text of the element. That doesn't work with inputs; you need to use vars.$el.val(...) instead.

.text() | jQuery API Documentation[^]
.val() | jQuery API Documentation[^]

Matas - developer 30-Apr-20 22:11pm

Thank you so much!

Richard Deeming 30-Apr-20 6:53am

Your code is vulnerable to SQL Injection[^]. NEVER use string concatenation / interpolation to build a SQL query. ALWAYS use a parameterized query.

PHP: SQL Injection - Manual[^]

Matas - developer 30-Apr-20 11:10am

Thank you for your opinion, I'll fix this problem

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)