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動態創建表單

回答

相關問題