0

我有一个动态表单，其中许多输入具有不同的值，当任何输入发生更改时，我希望下一个值向下移动一个位置，以便更改的值成为下一个值，依此类推。

html

<form name="top-download-update-edit">
<input name="v1" type="text" value="value1" />
<input name="v2" type="text" value="value2" />
<input name="v3" type="text" value="value3" />
<input name="v4" type="text" value="value4" />
<input name="v5" type="text" value="value5" />
</form>

说输入 v2 更改为 value6 就像

<input name="v2" type="text" value="value6" />

现在我希望下一个所有值都像这样向下移动一个位置。

<input name="v1" type="text" value="value1" />
<input name="v2" type="text" value="value6" />
<input name="v3" type="text" value="value2" />
<input name="v4" type="text" value="value3" />
<input name="v5" type="text" value="value4" />

我正在尝试这种方式

$('#nav').on('change', 'form[name=update] input', function(){
    var input = $(this).val();
    $(this).next('input').val(input);
    //and some thing here to shift all next values one place.
});

这无济于事。请查看并建议任何可能的方法来做到这一点。

谢谢。

更新

我的实际代码。

更新.php

<div id="update">

<form name="update" action="update-edit.php" method="post">

  <?php $i=1; while($row = mysqli_fetch_assoc($result)):?>
  <label><?php echo $i.'. ' ?><input name="v<?php echo $i; ?>" type="text" value="<?php  echo $row['title'] ?>" /></label>
  <?php $i++; endwhile;?>

  <input type="submit" value="Submit" id="submit" />
</form>

</div>

jQuery

$.post('../update.php',{value:value},function(data){
    $('#center-container').html(data);

    var v1 = $('input[name=v1]').val();
    var v2 = $('input[name=v2]').val();
    var v3 = $('input[name=v3]').val();
    var v4 = $('input[name=v4]').val();
    var v5 = $('input[name=v5]').val();
    var v6 = $('input[name=v6]').val();

    $("form[name=update]").data("values", {"v1": v1, "v2": v1, "v3": v3, "v4": v4, "v5": v5, "v6": v6});

    $('form[name=update] input').change(function(){
        var form = $(this).parent().parent();
        var name = $(this).attr('name');
        form.find('input').each(function() {
            var thisName = $(this).attr('name');
            var prevName = $(this).parent().prev('label').children('input').attr('name');
            if($(this).attr('name') > name){
                $(this).val(form.data('values')[prevName]);
            }
        });
        form.find('input').each(function() {
            form.data('values')[$(this).attr('name')] = $(this).val();
        });
    });     


});
4

1 回答 1

0

好的，我会做这样的事情：因为在.change()函数中您无法知道 的先前值，所以input您需要将当前值存储在某处以转移所有内容。您可以使用该.data()功能。

$("form[name=update]").data("values", {"v1": "value1", "v2": "value2", "v3": "value3", "v4": "value4", "v5": "value5"});
$("form[name=update] input").change(function(){
    var form = $(this).parent();
    var name = $(this).attr("name");
    form.find("[name="+name+"] ~ input").each(function() {
        var thisName = $(this).attr("name");
        var prevName = $(this).prev("input").attr("name");
        $(this).val(form.data("values")[prevName]);
    });
    form.find("input").each(function() {
        form.data("values")[$(this).attr("name")] = $(this).val();
    });
});

这基本上意味着每次更改输入值时，您都会找到所有下一个输入“兄弟”（即~css 选择器）并将它们的值替换为您存储的旧值。在此之后，当然，您更新存储的数据。顺便说一句，使用ids 而不是 name 属性来识别您的元素可能会更容易。

你可以在这里找到一个工作小提琴。

于 2013-01-17T16:07:39.037 回答