Fill 4 input with one textarea
- by Patrice Poliquin
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();
}
});
