Change field Automatically after filled

Asked

Viewed 973 times

2

I have a form:

    <div class="span12" style="padding: 10px;">
        <form action="<?php echo base_url()?>index.php/chamadas" method="get">
        <div class="span2">
            <label for="">Data Inicial:</label>
            <input type="date" name="dataInicial" class="span12" />
        </div>
        <div class="span2">
            <label for="">Data Final:</label>
            <input type="date" name="dataFinal" class="span12" />
        </div>
        <div class="span2">
            <label for="">&nbsp;</label>
            <button class="btn btn-inverse span12"><i class="icon-print icon-white"></i> Filtrar</button>
        </div>
        </form>
    </div>

Would you like to fill in the start date, automatically already go to the other end date field. Can anyone help me? Thank you very much!

1 answer

4


You just need to hear the event change and copy the values from one to the other. So for example:

var inicial = document.querySelector('[name="dataInicial"]');
var final = document.querySelector('[name="dataFinal"]');

inicial.addEventListener('change', function () {
    final.value = this.value;
});

jsFiddle: http://jsfiddle.net/q6ujsa4v/

  • I would not like to copy to each other, I would just like to pass a field to the other, without using the tab, just skip one field to the other... and I would also like to have a checkbox... that when I select, it fills these two fields, will give?

  • @Andrébaill then just have final.focus(); inside Event Handler. Explain better what you want to do with the checkbox... give an empty date?

  • Almost that @Rgio, but there when it fills the initial date, in the YEAR, if I fill only one digit, it already jumps to the other digit.

  • With reference to the checkbox, I want to put one that when clicking, it activates a certain period within these dates: Example: I clicked on the checkbox, it puts the date: 05/21/2015 and 06/20/2015.

  • @Andrébaill and where are those dates? Can you adapt my jsFiddle until you don’t know how to continue? join HTML that has those dates somewhere I help in the rest

  • Dates can be left in an SQL or a function to adjust the period.

Show 1 more comment

Browser other questions tagged

You are not signed in. Login or sign up in order to post.