Question

我有一个带有输入文本字段的表单。如果一行或多行留空，我希望所有文本向上移动并填写空白行。

实施例：有6个输入框。第3行和第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/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
});

Answer 2

非常简单的代码。 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 3

我假设你实际上并不需要重新排列自己的行，看到因为页面提交而没有人真正看到它。所以最简单的方法就是在提交时动态分配名称。

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);
});

这比其他答案更简单易懂。

如何使用javascript删除提交时的空白表单行？

3 个答案:

这是您的代码http://jsfiddle.net/qXWgZ/3/