jquery/Javascript - 使用Datepicker动态创建表单

我是js/jquery的新手，我试图用jquery动态创建html表单，但我无法弄清楚如何“重复”（对不起，我不' t知道试用期）jquery的“datepicker”函数。jquery/Javascript - 使用Datepicker动态创建表单

下面是HTML：

<html lang="en"> 
    <head> 

    <meta charset="utf-8"> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 


<script> 
     $(document).ready(function(){ 
      var x = 0; 
      $("#datepicker").datepicker({dateFormat: 'yy-mm-dd'}); 
      $("#add").click(function(){ 
       x++; 
       var dateFuncName = "#datepicker" + x.toString(); 
       var dateFuncName2Call = "datepicker" + x.toString(); 
       $(dateFuncName).datepicker({dateFormat: 'yy-mm-dd'}); 
       $("#name_data").append('<p>First Name: <input name="name['+x+'][first]" type="text"> Last Name: <input name="name['+x+'][last]" type="text"> Date: <input id="' + dateFuncName2Call + '" name="name['+x+'][date]" type="text"> <input id="remove'+x+'" type="button" name="remove" value="remove"></p>'); 
       $("#remove"+x).click(function(){ 
        $(this).parent('p').remove(); 
       }); 
      }); 
      }); 
</script> 


<form action="test.php" method="post"> 
      <div id="name_data"> 
       <p>First Name: <input name="name[0][first]" type="text"> 
        Last Name: <input name="name[0][last]" type="text"> 
        Date: <input id="datepicker" name="name[0][date]"></p> 
      </div> 
      <p><input id="add" type="button" name="add" value="Add more"></p> 
      <p><input type="submit" name="submit" value="Submit..."></p> 
     </form> 


</html>

具体是什么我已经从以前的实现想通的是，在HTML中，每日期时间字段，我需要一个新的“#datetime”迭代（即＃DATETIME2，3等），这对预定义数量的字段工作正常。

这就是我试图在这里做的，特别是在这一点上面的代码：

x++; 
var dateFuncName = "#datepicker" + x.toString(); 
var dateFuncName2Call = "datepicker" + x.toString(); 
$(dateFuncName).datepicker({dateFormat: 'yy-mm-dd'});

请原谅这里跛脚使用jQuery的，但我真的很小白的时刻： d

预先感谢您的任何指导意见/建议：d

来源

2015-09-26 Lopofsky

当您点击添加新图标时，是否要创建新的日期选择器或新的（姓，名，日期）？ –

全部三个字段。 – Lopofsky

$(document).ready(function(){ 
    var x = 0; 
    $("#datepicker").datepicker({dateFormat: 'yy-mm-dd'}); 
    $("#add").click(function(){ 
     x++; 
     var dateFuncName = "datepicker" + x.toString(); 
     $("#name_data").append('<p>First Name: <input name="name['+x+'][first]" type="text"> Last Name: <input name="name['+x+'][last]" type="text"> Date: <input id="' + dateFuncName + '" name="name['+x+'][date]" type="text"> <input id="remove'+x+'" type="button" name="remove" value="remove"></p>'); 
     $("#"+dateFuncName).datepicker({dateFormat: 'yy-mm-dd'}); 
     $("#remove"+x).click(function(){ 
      $(this).parent('p').remove(); 
     }); 
    }); 
});

来源

2015-09-26 00:59:03 Diptox

谢谢队友！由于某种原因，“append”下方的“datepicker”也出现在另一个论坛上，但由于某种原因，我无法完成它！无论如何欢呼和再次感谢！ – Lopofsky

不客气，但我希望你能明白为什么它不能在你的代码上工作，因为你在将代码添加到代码之前初始化日期选择器。正确的方法是追加日期选择器输入然后初始化它：D – Diptox

如果你想酷龙你的领域，这是要走的路。

$(document).ready(function(){ 
    $("#add").click(function(){ 
     var $cloneFields = $("#name_data").clone(); // Clone your 3 inputs into a variable 
     $cloneFields.find(":input").val('');  // Clear the fields of this variable 
     $($cloneFields).insertAfter("#name_data"); // Insert your array of DOM elements after your cloned div 
    }); 
});

来源

2015-09-26 01:12:33

jquery/Javascript - 使用Datepicker动态创建表单

回答

相关问题