Question

我正在使用jQuery创建一个动态的html表单它是一种用于测量每个房间通风的空气的形式。

我需要两个输入：房间名称和空气量值我的任务是使用“选择”和“输入”和“删除”按钮动态添加一行。稍后它应该提交给php处理器。

我的计划是克隆div并且它看起来有效，但是我在选择输入字段时出现问题在原始Div工作中选择菜单，但是i clone div选择值不会改变。我正在寻找解决方案，但我还没有找到答案。通过按下删除按钮，我需要删除元素的当前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/

Answer 1

您的主要问题是，当您克隆该行时，您正在复制ID值。根据{{3}}：

可能导致脚本难以调试的错误   方法有些错误旨在帮助防止脚本问题   很难调试。

这就是为什么，例如，它不符合两个id   具有相同值的属性。重复ID会导致错误   元素被选中，有时会带来灾难性的后果   很难确定

这是不允许的。 ID元素必须是唯一的。相反，使用像类（你可以有重复）的东西来解决这个问题，或者更改ID（虽然，我建议使用类）。

无法通过Jquery设法获得动态表单

1 个答案: