Как увеличить значение одной формы на значение другой, формата type=time?

Question

[raymon94]

Здравствуйте, есть два поля:


Так, как в js полный нуб, прошу помощи. Нужно, чтобы при изменении ЧАС:МИН (например на 02:30), это же значение прибавлялось к значению в поле ВРЕМЯ УХОДА.

Гугл облазил, не где ясного ответа нету , курить js времени нету.

Заранее спасибо за ответы!

Answer 1

[Николай Лапшин]

var id1="name";
var id2="phone";
jQuery("#"+id1).click(function(){adjust1st_field(id1);}).keyup(function(){adjust1st_field(id1);})
jQuery("#"+id2).click(function(){adjust_field(id1,id2);}).keyup(function(){adjust_field(id1,id2);})

var first_field_init_value=0;
var already_added=0;
var val1_exploded;
var val1_timestamp;

function adjust1st_field(id1) {
  first_field_init_value=jQuery("#"+id1).val();
  val1_exploded=explode(':',first_field_init_value);
  val1_timestamp=val1_exploded[0]*60*60+val1_exploded[1]*60-already_added;//время в секундах
}


function adjust_field(id1,id2) {
  if(first_field_init_value==0) {
    adjust1st_field(id1);
  }
var val2=$("#"+id2).val();// - берет значение 2

var val2_exploded=explode(':',val2);
var val2_timestamp=val2_exploded[0]*60*60+val2_exploded[1]*60;//время в секундах
var total_timestamp;
    total_timestamp= val2_timestamp+ val1_timestamp;
    
    jQuery("#"+id1).val(secondsToHm(total_timestamp));//записывает новое значение
  already_added=val2_timestamp;
}

function secondsToHm(d) {
d = Number(d);
var h = Math.floor(d / 3600);
var m = Math.floor(d % 3600 / 60);
  while(h>=24) {
    h=h-24;
  }
return ((h > 0 ? h + ":" + (m < 10 ? "0" : "") : "") + m); 
}


function explode( delimiter, string ) {	// Split a string by string
  // 
  // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   improved by: kenneth
  // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)

  var emptyArray = { 0: '' };

  if ( arguments.length != 2
    || typeof arguments[0] == 'undefined'
    || typeof arguments[1] == 'undefined' )
  {
    return null;
  }

  if ( delimiter === ''
    || delimiter === false
    || delimiter === null )
  {
    return false;
  }

  if ( typeof delimiter == 'function'
    || typeof delimiter == 'object'
    || typeof string == 'function'
    || typeof string == 'object' )
  {
    return emptyArray;
  }

  if ( delimiter === true ) {
    delimiter = '1';
  }

  return string.toString().split ( delimiter.toString() );
}

Comments

[raymon94]

Я искренне благодарен за столь быстрый ответ, но к сожалению, я jq/js не понимаю вообще. Если возможно, можете привести полный код с объяснением , того, что за что отвечает? Так мне будет проще понять , что и как работает.

[Николай Лапшин]

Тогда нужен код формы

[raymon94]

Николай Лапшин:

<form action="t_form.php" method="post">
<div class="col-lg-2">
    <label>Время ухода</label>

<input type="time" name="time_end" class="form-control" value="<?php echo $time_today_day; ?>">
</div>

<div class="col-lg-2">
    <label>Час:Мин</label>

<input type="time" name="timer" class="form-control" value="00:00">
</div>
<button style="margin-top:22px;" type="sumbit" class="btn btn-primary"><i class="fa fa-check"></i></button>

[Николай Лапшин]

Отредактировал свой ответ. Там код. Просто id первого и второго поля поставьте нужные. В свои input'ы добавьте еще атрибут id. В коде только name

[raymon94]

Николай Лапшин: Возможно я где то допустил ошибку , но у меня Ваш код не работает , jqeury подключил , вставил скрипт ниже формы , что то не получилось

var val1=jQuery("#timer").val();// - берет значение 1
var val2=jQuery("#time_end").val();// - берет значение 2

var val1_exploded=explode(':',val1);
var val2_exploded=explode(':',val2);
var val1_timestamp=val1_exploded[0]*60*60+val1_exploded[1]*60;//время в секундах
var val2_timestamp=val2_exploded[0]*60*60+val2_exploded[1]*60;//время в секундах
var total_timestamp= val1_timestamp+ val2_timestamp;
jQuery("#time_end").val(secondsToHm(total_timestamp));//записывает новое значение


function secondsToHm(d) {
d = Number(d);
var h = Math.floor(d / 3600);
var m = Math.floor(d % 3600 / 60);
return ((h > 0 ? h + ":" + (m < 10 ? "0" : "") : "") + m); 
}


function explode( delimiter, string ) { // Split a string by string
  // 
  // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   improved by: kenneth
  // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)

  var emptyArray = { 0: '' };

  if ( arguments.length != 2
    || typeof arguments[0] == 'undefined'
    || typeof arguments[1] == 'undefined' )
  {
    return null;
  }

  if ( delimiter === ''
    || delimiter === false
    || delimiter === null )
  {
    return false;
  }

  if ( typeof delimiter == 'function'
    || typeof delimiter == 'object'
    || typeof string == 'function'
    || typeof string == 'object' )
  {
    return emptyArray;
  }

  if ( delimiter === true ) {
    delimiter = '1';
  }

  return string.toString().split ( delimiter.toString() );
}

[Николай Лапшин]

Забыл... В 1-й, 2-й и 6-й строке jQuery поменяйте на $. А еще: вам нужно, чтобы при каждом изменении значения поля 2 в поле 1 менялось значение налету?

[raymon94]

Николай Лапшин: Да , если это возможно. PS Спасибо , что возитесь со мной

[Николай Лапшин]

Я поправил код. На click и keyup поля будет вызываться функция. Попробуйте

[raymon94]

Скрипт очень странно себя ведет

[Николай Лапшин]

Ну да. Все логично. Я не учел. Он ж на каждое изменение справа прибавляет это значение слева. Поэтому сначала час, потом 2 и так далее, а после 24 часов плагин, который красиво отображает время, слетает.
Нужно два мелочевых момента учесть.
Я исправлю, но часа через два.

[raymon94]

Хорошо, спасибо. Буду ждать

[Николай Лапшин]

Это очень муторно. Нужно запоминать первое значение, учитывать кучу всякой ерунды. Проверил - вроде работает.

Проверьте у себя. В самом верху нужно только задать id левого и id правого поля.

[raymon94]

Николай Лапшин: Отлично! Работает , как надо!! Спасибо больше!!!

[raymon94]

Николай Лапшин: Николай, позвольте отблагодарить Вас рублем. Пришлите свой RКошелек

[Николай Лапшин]

Работает и отлично. Потестируйте. Если что-то всплывет - пишите.
С rкошельком забейте, спасибо. :)