0

多くの入力が異なる値を持つ動的なフォームがあります。入力が変更された場合、次の値を1つ下にシフトして、変更された値が次の値になるようにします。

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" />

今、私は次のすべての値をこのように1つ下にシフトしたいと思います。

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

これは何もしません。これを行うための可能な方法を見て、提案してください。

ありがとう。

アップデート

私の実際のコード。

update.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セレクター）が見つかり、それらの値を保存した古い値に置き換えることを意味します。もちろん、この後、保存されているデータを更新します。ちなみに、id要素を識別するために名前属性の代わりにsを使用する方がおそらく簡単でしょう。

ここで実用的なフィドルを見つけることができます。

于 2013-01-17T16:07:39.037 に答える