Jquery/Javascript — динамическое создание форм с помощью средства выбора даты

Я новичок в js/jquery, и я пытаюсь динамически создавать html-формы с помощью jquery, но я не могу понять, как «повторить» (извините, что я не знаю испытательный термин) функция «выбор даты» jquery.

Ниже приведен 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


forms datepicker jquery dynamic-forms
person Lopofsky    schedule 26.09.2015    source источник
comment
Вы хотите создать новый указатель даты или новый (Имя, Фамилия, Дата), когда вы нажимаете «Добавить новый»?   -  person Franklin Satler    schedule 26.09.2015

Ответы (2)


arrow_upward
0
arrow_downward

Если вы пытаетесь клонировать свои поля, это путь.

$(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
    });
});
person Franklin Satler    schedule 26.09.2015

arrow_upward

arrow_downward

person    schedule
comment
Спасибо друг! по какой-то причине датапикер под добавлением был и на другом форуме, но я почему-то не смог его прибить! В любом случае ура и еще раз спасибо! - person Lopofsky; 26.09.2015
comment
Добро пожаловать, но я надеюсь, вы поняли, почему это не сработало в вашем коде, потому что вы инициируете средство выбора даты до того, как оно будет добавлено к коду. Правильный способ - добавить ввод Datepicker, а затем инициализировать его: D - person Diptox; 26.09.2015