I have a question for the community.

My problem is that I have 4 input files with a maxlength of 60 caracters for a total of 240 caracters.

Because the "backend" of the customer's system, it need to be 4 differents inputs max to be inserted and they say it is not user-friendly to fill 4 fields.

My solution

I want to make a textarea and when you fill it, il complete the 4 fields.

[input text #1] max60
[input text #2] max60
[input text #3] max60
[input text #4] max60

[textarea max 240]

What I am trying to do is to make by javascript/jQuery to fill up the four field while typing in.

At the moment, here is my code.

$(document).ready(function()
{
            // My text area
    $("#inf_notes").bind('keydown', function () {

                    var maxLength = 240;

        if ($(this).val().length <= 60) {
                       // The first 60 caracters
            $('#inf_notes_1').val($(this).val());
        }

        if ($(this).val().length > 60 && $(this).val().length <= 120) {
                      // If more then 60, fill the second field
            $('#inf_notes_2').val($(this).val());
        }

                    // If 121 - 180 ...
                    // If 181 - 240 ...

                    if($(this).val().length == 240) {
                           $(this).val($(this).val().substring(0, maxLength));
               $('.alert_textarea').show(); // Simple alert
        else
        {
            $('.alert_textarea').hide();
        }
    });
});

It actually works for the first one, but I would like to have some feedbacks to help me complete the script to fill the 3 nexts.

Any guess to complete it?

-- EDIT #1

I found a way that could maybe work! When the first input is completly filled, it will jump to the next field with a .focus()

   $(".inf_notes").bind('keydown', function () 
{
    var notes1 = $('#inf_notes_1').val();
    var notes2 = $('#inf_notes_2').val();
    var notes3 = $('#inf_notes_3').val();
    if (notes1.length == 60) 
    {
        $('#inf_notes_2').focus();
    }
    if (notes2.length == 60) 
    {
        $('#inf_notes_3').focus();
    }
    if (notes3.length == 60) 
    {
        $('#inf_notes_4').focus();
    }
});