Fill in several input fields with values from other fields

Navigation
1

I have three rows with four fields input of type time , and I want to create a button so that the two rows below can be filled equal to the first one.

I'm following this SOen response , and adapted to catch by classe instead of id , then I can already fill several fields from one, but I want, from a button, to make the fill of the line below with the value of the other four of the line above (see image below).

The HTML of the lines: 

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

For the time being, I managed to get here by touching the SOen script: 

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>Enteryourtagandclickadd</strong><br/><inputtype="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>

The result I hope is something like this:

The solution can be in simple javascript, with jQuery, or even with Bootstrap.

    
asked by anonymous 07.05.2015 / 21:14

1 answer

1

There are several ways to implement this. My solution is as follows:

  • Add a class linhaX to each input , where X is the line number.
  • Add a button on each line identified with a repeat class. The button has a data-source attribute that is the line from where the data to be copied comes from, and data-target , which is the copy target line.
  • The logic of JS is basically the following: for every% of% of% of% with, copy the value to corresponding in% with% (which has the same index). 

$(document).ready(function(){
  $('.repeat').click(function(){
    var target = $('.' + $(this).data('target'));
    $('.' + $(this).data('source')).each(function(index, value){
      target.eq(index).val($(this).val());
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><labelid="Cseg2" class="hora">Linha 1:</label>
<label for="Cseg3">Entrada:</label>
<input type="time" id="Cseg3" name="Tsegs" class="linha1">
<label for="Cseg4">Saída:</label>
<input type="time" id="Cseg4" name="Tsegss" class="linha1">
<label for="Cseg5">Retorno:</label>
<input type="time" id="Cseg5" name="Tsegsss" class="linha1">
<label for="Cseg6">Saída:</label>
<input type="time" id="Cseg6" name="Tsegssss" class="linha1">
<br>
<label id="Cter2" class="hora">Linha 2:</label>
<label for="Cter3">Entrada:</label>
<input type="time" id="Cter3" name="Tter" class="linha2">
<label for="Cter4">Saída:</label>
<input type="time" id="Cter4" name="Tters" class="linha2">
<label for="Cter5">Retorno:</label>
<input type="time" id="Cter5" name="Tterss" class="linha2">
<label for="Cter6">Saída:</label>
<input type="time" id="Cter6" name="Ttersss" class="linha2">
<button type="button" class="repeat" data-source="linha1" data-target="linha2">Repetir linha anterior</button>
<br>
<label id="Cqua2" class="hora">Linha 3:</label>
<label for="Cqua3">Entrada:</label>
<input type="time" id="Cqua3" name="Tqua" class="linha3">
<label for="Cqua4">Saída:</label>
<input type="time" id="Cqua4" name="Tquas" class="linha3">
<label for="Cqua5">Retorno:</label>
<input type="time" id="Cqua5" name="Tquass" class="linha3">
<label for="Cqua6">Saída:</label>
<input type="time" id="Cqua6" name="Tquasss" class="linha3">
<button type="button" class="repeat" data-source="linha2" data-target="linha3">Repetir linha anterior</button>
    
07.05.2015 / 22:31
Generate Pie Chart with PHP javascript Problem with PDO connection and mysql_query