0

jQueryを使用して動的なhtmlフォームを作成しています。
換気のために各部屋の空気を測定するためのフォームです。

部屋名と風量値の2つの入力が必要です。
私の仕事は、[選択]、[入力]、[削除]ボタンを使用して動的に行を追加することです。後でそれをphpプロセッサに送信する必要があります。

私の計画はdivのクローンを作成することで、それは機能するように見えましたが、Select入力フィールドで問題が発生します。
元のDivの選択メニューは機能しますが、i clonedivSelectの値は変更されません。私は解決策を探していましたが、なんとか見つけることができませんでした。削除ボタンを押すことにより、要素を含む現在のDIVを削除する必要があります。それも機能しません:)

私はjQueryを始めたばかりなので、それをすべて実現する正しい方法であるかどうかはわかりません。
助けてくれてありがとう！

フォームのコードは次のとおりです。

<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript"> 

function Addonemoretilluft() {
    $('#tilluft_line').clone().insertAfter("#tilluft_line"); 
}

function Removetilluft() {
    $('#page').remove("#tilluft_line"); 
}


$(document).ready(function() {     
    $("#add_tilluft").click(function(){
      Addonemoretilluft();
    });  

    $("#remove_tilluft").click(function(){
      Removetilluft();
    });    
});
</script>  
</head>
<body>
<div class="page" data-iscroll="" id="page">      
               <form action="handle.php" method="post" data-ajax="false" id="tilluft_form"> 

                  <div id="tilluft_line" class="ui-grid-b">
                        <div id="select_value" class="ui-block-a">
                         <select name="tilluft_name[]" id="tilluft_name[]" data-mini="true">
                            <option value="val1">Val 1</option>
                            <option value="val2">Val 2</option>
                            <option value="val3">Val 3</option>
                            <option value="val4">Val 4</option>    
                         </select>  
                        </div>
                        <div id="input_value" class="ui-block-b">
                            <input name="tilluft_value[]" id="tilluft_value[]" data-mini="true">
                        </div>
                        <div class="ui-block-c" style="width:35px;">
                            <a href="#" id="remove_tilluft" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a> 
                        </div>
                    </div>
                    <a id="add_tilluft"  href="#" data-role="button" data-icon="add" data-mini="true" data-inline="true">Add one more</a> 
               </form>  
               <input type="submit" form="tilluft_form" value="Submit Form" data-mini="true" data-inline="true"/>
          </div>​
</body>

テストバージョンhttp://jsfiddle.net/D4MPu/

4

1 に答える 1

0

主な問題は、行を複製すると、ID 値が複製されることです。HTML仕様ごと：

デバッグが困難な方法でスクリプトが失敗する可能性が高いエラー 一部のエラーは、デバッグが困難なスクリプトの問題を防止するのに役立つことを目的としています。

これが、たとえば、同じ値を持つ 2 つの id 属性を持つことが不適合である理由です。ID が重複していると、間違った要素が選択され、原因を特定するのが難しい悲惨な結果が生じる場合があります

これは許可されていません。ID 要素は一意である必要があります。代わりに、クラスのようなもの (重複する可能性があります) を使用してこの問題を修正するか、ID を変更します (ただし、クラスの使用をお勧めします)。

于 2012-11-21T15:32:39.423 に答える