Tenho três linhas com quatro campos input
do tipo time
, e quero criar um botão para que as duas linhas abaixo possam ser preenchidas igual a primeira.
Estou seguindo esta resposta do SOen, e adaptei para pegar por classe
ao invés de id
, então já consigo preencher vários campos à partir de um, mas quero, à partir de um botão, disponibilizar o preenchimento da linha abaixo com o valor dos outros quatro da linha acima (vide imagem abaixo).
O HTML das linhas:
<label id="Cseg2" class="hora">Linha 1:</label>
<label for="Cseg3">Entrada:</label>
<input type="time" id="Cseg3" name="Tsegs">
<label for="Cseg4">Saída:</label>
<input type="time" id="Cseg4" name="Tsegss">
<label for="Cseg5">Retorno:</label>
<input type="time" id="Cseg5" name="Tsegsss">
<label for="Cseg6">Saída:</label>
<input type="time" id="Cseg6" name="Tsegssss">
<br>
<label id="Cter2" class="hora">Linha 2:</label>
<label for="Cter3">Entrada:</label>
<input type="time" id="Cter3" name="Tter">
<label for="Cter4">Saída:</label>
<input type="time" id="Cter4" name="Tters">
<label for="Cter5">Retorno:</label>
<input type="time" id="Cter5" name="Tterss">
<label for="Cter6">Saída:</label>
<input type="time" id="Cter6" name="Ttersss">
<br>
<label id="Cqua2" class="hora">Linha 3:</label>
<label for="Cqua3">Entrada:</label>
<input type="time" id="Cqua3" name="Tqua">
<label for="Cqua4">Saída:</label>
<input type="time" id="Cqua4" name="Tquas">
<label for="Cqua5">Retorno:</label>
<input type="time" id="Cqua5" name="Tquass">
<label for="Cqua6">Saída:</label>
<input type="time" id="Cqua6" name="Tquasss">
<br>
Por enquanto consegui chegar até aqui mexendo no script do SOen:
var tags = [];
$(function() {
$('#tagAdd').click(function(){
//get the tag value and trim the spaces
var tVal = $('#tagEntry').val().trim();
if(tVal == '')
return;
//verify tag not already saved
for(var i=0;i<tags.length;i++)
if(tags[i] == tVal)
return;
//add the tag to the array
tags.push(tVal);
//set the tags entry box
$('.tagsEntered').val(tags.join(', '));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<strong>Enter your tag and click add</strong>
<br/>
<input type="time" id="tagEntry" />
<button id="tagAdd">Add</button>
</div>
<div>
<strong>Entered Tags</strong>
<br/>
<input type="time" class="tagsEntered"/>
</div>
<div>
<strong>Entered Tags 2</strong>
<br/>
<input type="time" class="tagsEntered"/>
</div>
<div>
<strong>Entered Tags3</strong>
<br/>
<input type="time" class="tagsEntered"/>
</div>
O resultado que espero é algo assim:
A solução pode ser em javascript simples, com jQuery, ou com mesmo com o Bootstrap.