Как можно удалить пустые строки формы при отправке с использованием JavaScript?

Question

У меня есть форма с полями ввода текста. Если оставить одну или несколько строк пустыми, я хочу, чтобы весь текст переместился вверх и заполнил пустые строки.

Пример: Есть 6 полей ввода. Строки 3 и 5 оставлены пустыми.

<input type="text" tabindex="2"  value="Some Text" name="itemLine_1_1">
<input type="text" tabindex="2"  value="Some Text" name="itemLine_1_2">
<input type="text" tabindex="2"  value="" name="itemLine_1_3">
<input type="text" tabindex="2"  value="Some Text" name="itemLine_1_4">
<input type="text" tabindex="2"  value="" name="itemLine_1_5">
<input type="text" tabindex="2"  value="Some Text" name="itemLine_1_6">

Но когда форма будет отправлена, информация появится следующим образом. 2 пустые строки перемещаются вверх, а последние 2 строки теперь пусты.

<input type="text" tabindex="2"  value="Some Text" name="itemLine_1_1">
<input type="text" tabindex="2"  value="Some Text" name="itemLine_1_2">
<input type="text" tabindex="2"  value="Some Text" name="itemLine_1_3">
<input type="text" tabindex="2"  value="Some Text" name="itemLine_1_4">
<input type="text" tabindex="2"  value="" name="itemLine_1_5">
<input type="text" tabindex="2"  value="" name="itemLine_1_6">

Answer 1

Очень простой код. http://jsfiddle.net/HxK4F/1/

$('form').submit(function(){
    var els = $('input[type=text]');
    for(var i=0; i<els.length; i++)
    {
        if (els.eq(i).val()=='')
        {
            for(var j=i; j<els.length-1; j++)
                els.eq(j).val(els.eq(j+1).val());
            els.eq(els.length-1).val('');
        }
    }
    return false;
});

И чистый раствор JS http://jsfiddle.net/9Ng4d/4/

document.getElementById('myform').onsubmit = function(){
    var el = this.getElementsByTagName('input'), els = [];
    for(var i=0; i<el.length; i++)
        if (el[i].type == 'text') els.push(el[i]); // remove non text elements

    for(var i=0; i<els.length; i++)
    {
        if (els[i].value=='')
        {
            for(var j=i; j<els.length-1; j++)
                 els[j].value = els[j+1].value;
            els[els.length-1].value = '';
        }
    }
    return false;
};

Answer 2

Я предполагаю, что вам на самом деле не нужно, чтобы строки перестраивались, потому что никто не увидит этого, потому что страница отправляется Поэтому проще всего просто динамически назначать имена при отправке.

HTML:

<form name="frmLines" id="frmLines">
    <input type="text" tabindex="2"  value="Some Text"><br>
    <input type="text" tabindex="2"  value="Some Text"><br>
    <input type="text" tabindex="2"  value=""><br>
    <input type="text" tabindex="2"  value="Some Text"><br>
    <input type="text" tabindex="2"  value=""><br>
    <input type="text" tabindex="2"  value="Some Text"><br>
    <br>
    <input type="submit" value="Submit" />
</form>

JavaScript:

$("#frmLines").submit(function(){
    var count = 1;
    var assign_names = function() {
        $(this).attr('name', 'itemLine_1_' + count);
        count++;
    };
    $(this).find('input[type="text"][value!=""]').each(assign_names);
    $(this).find('input[type="text"][value=""]').each(assign_names);
});

Это намного проще и легче понять, чем другие ответы.

Answer 3

Вот ваш код http://jsfiddle.net/qXWgZ/3/

HTML

<form name="frmLines" id="frmLines">
<input type="text" tabindex="2"  value="Some Text" name="itemLine_1_1"><br>
<input type="text" tabindex="2"  value="Some Text" name="itemLine_1_2"><br>
<input type="text" tabindex="2"  value="" name="itemLine_1_3"><br>
<input type="text" tabindex="2"  value="Some Text" name="itemLine_1_4"><br>
<input type="text" tabindex="2"  value="" name="itemLine_1_5"><br>
<input type="text" tabindex="2"  value="Some Text" name="itemLine_1_6"><br>
<br>
<input type="submit" value="Submit" />
</form>

JS

$("#frmLines").submit(function(){
 // list of inputs
 var inputs = $("input[type=text]");
 for (var i = 0; i < inputs.length; i++) {
   var input = $(inputs[i]);
   // ignore not empty input or there is no more input left
   if (input.val() != "" || i >= inputs.length - 1)
     continue;
   // looking for next not empty input
   for (var j = i + 1; j < inputs.length; j++) {
     var nextInput = $(inputs[j]);
     // ignore empty input
     if (nextInput.val() == "")
       continue;
     // fullfill last input by next not empty input
     input.val(nextInput.val());
     // make next input as empty
     nextInput.val("");
     // break out of looking
     break;
   }
 }
 return false; // return true for production
});