За последние 24 часа нас посетили 42487 программистов и 1816 роботов. Сейчас ищут 838 программистов ...

Добавление div блока по нажатию кнопки

Тема в разделе "JavaScript и AJAX", создана пользователем RazerVG, 29 окт 2014.

  1. RazerVG

    RazerVG Активный пользователь

    С нами с:
    5 дек 2013
    Сообщения:
    103
    Симпатии:
    0
    Здравствуйте стоит проблем в форме создать div блок по нажатию на кнопку.

    Я прочитал данный мануал http://javascript.ru/forum/events/41455-sozdanie-bloka-div-s-soderzhimym-po-nazhatiyu-knopki.html

    И применил его к своему div блоку

    Код (Text):
    1.  
    2. <form class="w-clearfix" id="email-form-2" name="email-form-2" data-name="Email Form 2" method="post">
    3.                 <div class="w-row">
    4.                     <div class="w-col w-col-1">
    5.                         <a href="#" onclick="addQuestion()">
    6.                             <img src="images/add139.svg" width="40" alt="544afaedd6b0cd3169ec99ed_add139.svg">
    7.                         </a>
    8.                     </div>
    9.                     <div id="parentId" class="w-col w-col-11 w-clearfix">
    10.  
    11.                         <script>
    12.                             function addService() {
    13.                                 var newdiv =document.createElement("div");
    14.                                 newdiv.innerHTML = "<div class='specification_service'>\n
    15.                                     <div>\n
    16.                                 <label class='label_services service'>Услуга:<\/label>\n
    17.                                 <div class='w-checkbox service_check'>\n
    18.                                 <input class='w-checkbox-input' id='print' type='checkbox' name='print' data-name='print' required='required'>\n
    19.                                 <label class='w-form-label' for='print'>Печать<\/label>\n
    20.                                 <\/div>\n
    21.                                 <div class='w-checkbox service_check'>\n
    22.                                 <input class='w-checkbox-input' id='design' type='checkbox' name='design' data-name='design'>\n
    23.                                 <label class='w-form-label' for='design'>Дизайн<\/label>\n
    24.                                 <\/div>\n
    25.                                 <div class='w-checkbox service_check'>\n
    26.                                 <input class='w-checkbox-input' id='layout' type='checkbox' name='layout' data-name='layout'>\n
    27.                                 <label class='w-form-label' for='layout'>Верстка<\/label>\n
    28.                                 <\/div>\n
    29.                                 <\/div>\n
    30.                                 <div class='w-row'>\n
    31.                                 <div class='w-col w-col-3'>\n
    32.                                 <label class='label_services higt' for='product'>Продукция:<\/label>\n
    33.                                 <label class='label_services'>Формат бумаги:<\/label>\n
    34.                                 <label class='label_services'>Плотность бумаги:<\/label>\n
    35.                                 <\/div>\n
    36.                                 <div class='w-col w-col-3'>\n
    37.                                 <select class='w-select select_servises' id='product' name='product' data-name='product'>\n
    38.                                 <option value=''>Выберите продукт<\/option>\n
    39.                                 <option value='First'>First Choice<\/option>\n
    40.                                 <option value='Second'>Second Choice<\/option>\n
    41.                                 <option value='Third'>Third Choice<\/option>\n
    42.                                 <\/select>\n
    43.                                 <input class='w-input' id='paper_format' type='text' placeholder='Введите формат бумаги' name='paper_format' required='required' data-name='paper_format'>\n
    44.                                 <input class='w-input' id='paper_weight' type='text' placeholder='Введите плотность бумаги' name='paper_weight' required='required' data-name='paper_weight'>\n
    45.                                 <\/div>\n
    46.                                 <div class='w-col w-col-3'>\n
    47.                                 <label class='label_services higt' for='tirag'>Тираж:<\/label>\n
    48.                                 <div class='label_services'>Количество страниц<\/div>\n
    49.                                 <label class='label_services'>Нумерация:<\/label>\n
    50.                                 <label class='label_services'>Размер макета:<\/label>\n
    51.                                 <\/div>\n
    52.                                 <div class='w-col w-col-3'>\n
    53.                                 <input class='w-input select_servises tirag' id='tirag' type='text' placeholder='Введите тираж продукции' name='tirag' required='required' data-name='tirag'>\n
    54.                                 <input class='w-input' id='pages' type='text' placeholder='Введите количество страниц' name='pages' required='required' data-name='pages'>\n
    55.                                 <input class='w-input' id='numbering' type='text' placeholder='С .. по ..' name='numbering' required='required' data-name='numbering'>\n
    56.                                 <input class='w-input' id='size' type='text' placeholder='000 x 999' name='size' required='required' data-name='size'>\n
    57.                                 <\/div>\n
    58.                                 <\/div>\n
    59.                                     <label>Стороны печати :<\/label>\n
    60.                                 <div class='w-radio'>\n
    61.                                 <input class='w-radio-input' id='1 сторона' type='radio' name='print_storony' value='1 сторона' data-name='print_storony'>\n
    62.                                 <label class='w-form-label' for='1 сторона'>1 сторона<\/label>\n
    63.                                 <\/div>\n
    64.                                 <div class='w-radio'>\n
    65.                                 <input class='w-radio-input' id='2 стороны' type='radio' name='print_storony' value='2 стороны' data-name='print_storony'>\n
    66.                                 <label class='w-form-label' for='2 стороны'>2 стороны<\/label>\n
    67.                                 <\/div>\n
    68.                                     <label>Красочность :<\/label>\n
    69.                                 <div class='w-radio'>\n
    70.                                 <input class='w-radio-input' id='черно-белая' type='radio' name='colorfulness' data-name='colorfulness' value='черно-белая'>\n
    71.                                 <label class="w-form-label" for='черно-белая'>Черно-белая печать<\/label>\n
    72.                                 <\/div>\n
    73.                                 <div class='w-radio'>\n
    74.                                 <input class='w-radio-input' id='полноцветная-3' type='radio' name='colorfulness' value='полноцветная' data-name='colorfulness'>\n
    75.                                 <label class='w-form-label' for='полноцветная-3'>Полноцветная печать<\/label>\n
    76.                                 <\/div>\n
    77.                                 <div class='w-radio'>\n
    78.                                 <input class='w-radio-input' id='с применением понтонов-4' type='radio' name='colorfulness' value='с применением понтонов' data-name='colorfulness'>\n
    79.                                 <label class='w-form-label' for='с применением понтонов-4'>Печать с применением понтонов&nbsp;<\/label>\n
    80.                                 <\/div>\n
    81.                                 <\/div>";
    82.                                 document.getElementById("parentId").appendChild(newdiv);
    83.                                 return false;
    84.                             }
    85.                         </script>
    86.  
    87.                     </div>
    88.                 </div>
    89.                 <input class="w-button button updata" type="submit" value="Заказать" data-wait="Please wait...">
    90.             </form>
    Добавлено спустя 1 минуту 26 секунд:
    В первом столбце у меня находиться форма во втором которую нужно клонировать
     
    #1 RazerVG, 29 окт 2014
  2. Хыиуду

    Хыиуду Активный пользователь

    С нами с:
    3 июн 2014
    Сообщения:
    618
    Симпатии:
    5
    У вас по нажатию на картинку вызывается addQuestion, а функция называется addService
     
    #2 Хыиуду, 29 окт 2014
  3. RazerVG

    RazerVG Активный пользователь

    С нами с:
    5 дек 2013
    Сообщения:
    103
    Симпатии:
    0
    Исправил и все равно не работает

    Код (Text):
    1. <form class="w-clearfix" id="email-form-2" name="email-form-2" data-name="Email Form 2" method="post">
    2.                 <div class="w-row">
    3.                     <div class="w-col w-col-1">
    4.                         <a href="#" onclick="addService()">
    5.                             <img src="images/add139.svg" width="40" alt="544afaedd6b0cd3169ec99ed_add139.svg">
    6.                         </a>
    7.                     </div>
    8.                     <div id="parentId" class="w-col w-col-11 w-clearfix">
    9.  
    10.                         <script>
    11.                             function addService() {
    12.                                 var newdiv =document.createElement("div");
    13.                                 newdiv.innerHTML = "<div class='specification_service'>\n
    14.                                     <div>\n
    15.                                 <label class='label_services service'>Услуга:<\/label>\n
    16.                                 <div class='w-checkbox service_check'>\n
    17.                                 <input class='w-checkbox-input' id='print' type='checkbox' name='print' data-name='print' required='required'>\n
    18.                                 <label class='w-form-label' for='print'>Печать<\/label>\n
    19.                                 <\/div>\n
    20.                                 <div class='w-checkbox service_check'>\n
    21.                                 <input class='w-checkbox-input' id='design' type='checkbox' name='design' data-name='design'>\n
    22.                                 <label class='w-form-label' for='design'>Дизайн<\/label>\n
    23.                                 <\/div>\n
    24.                                 <div class='w-checkbox service_check'>\n
    25.                                 <input class='w-checkbox-input' id='layout' type='checkbox' name='layout' data-name='layout'>\n
    26.                                 <label class='w-form-label' for='layout'>Верстка<\/label>\n
    27.                                 <\/div>\n
    28.                                 <\/div>\n
    29.                                 <div class='w-row'>\n
    30.                                 <div class='w-col w-col-3'>\n
    31.                                 <label class='label_services higt' for='product'>Продукция:<\/label>\n
    32.                                 <label class='label_services'>Формат бумаги:<\/label>\n
    33.                                 <label class='label_services'>Плотность бумаги:<\/label>\n
    34.                                 <\/div>\n
    35.                                 <div class='w-col w-col-3'>\n
    36.                                 <select class='w-select select_servises' id='product' name='product' data-name='product'>\n
    37.                                 <option value=''>Выберите продукт<\/option>\n
    38.                                 <option value='First'>First Choice<\/option>\n
    39.                                 <option value='Second'>Second Choice<\/option>\n
    40.                                 <option value='Third'>Third Choice<\/option>\n
    41.                                 <\/select>\n
    42.                                 <input class='w-input' id='paper_format' type='text' placeholder='Введите формат бумаги' name='paper_format' required='required' data-name='paper_format'>\n
    43.                                 <input class='w-input' id='paper_weight' type='text' placeholder='Введите плотность бумаги' name='paper_weight' required='required' data-name='paper_weight'>\n
    44.                                 <\/div>\n
    45.                                 <div class='w-col w-col-3'>\n
    46.                                 <label class='label_services higt' for='tirag'>Тираж:<\/label>\n
    47.                                 <div class='label_services'>Количество страниц<\/div>\n
    48.                                 <label class='label_services'>Нумерация:<\/label>\n
    49.                                 <label class='label_services'>Размер макета:<\/label>\n
    50.                                 <\/div>\n
    51.                                 <div class='w-col w-col-3'>\n
    52.                                 <input class='w-input select_servises tirag' id='tirag' type='text' placeholder='Введите тираж продукции' name='tirag' required='required' data-name='tirag'>\n
    53.                                 <input class='w-input' id='pages' type='text' placeholder='Введите количество страниц' name='pages' required='required' data-name='pages'>\n
    54.                                 <input class='w-input' id='numbering' type='text' placeholder='С .. по ..' name='numbering' required='required' data-name='numbering'>\n
    55.                                 <input class='w-input' id='size' type='text' placeholder='000 x 999' name='size' required='required' data-name='size'>\n
    56.                                 <\/div>\n
    57.                                 <\/div>\n
    58.                                     <label>Стороны печати :<\/label>\n
    59.                                 <div class='w-radio'>\n
    60.                                 <input class='w-radio-input' id='1 сторона' type='radio' name='print_storony' value='1 сторона' data-name='print_storony'>\n
    61.                                 <label class='w-form-label' for='1 сторона'>1 сторона<\/label>\n
    62.                                 <\/div>\n
    63.                                 <div class='w-radio'>\n
    64.                                 <input class='w-radio-input' id='2 стороны' type='radio' name='print_storony' value='2 стороны' data-name='print_storony'>\n
    65.                                 <label class='w-form-label' for='2 стороны'>2 стороны<\/label>\n
    66.                                 <\/div>\n
    67.                                     <label>Красочность :<\/label>\n
    68.                                 <div class='w-radio'>\n
    69.                                 <input class='w-radio-input' id='черно-белая' type='radio' name='colorfulness' data-name='colorfulness' value='черно-белая'>\n
    70.                                 <label class="w-form-label" for='черно-белая'>Черно-белая печать<\/label>\n
    71.                                 <\/div>\n
    72.                                 <div class='w-radio'>\n
    73.                                 <input class='w-radio-input' id='полноцветная-3' type='radio' name='colorfulness' value='полноцветная' data-name='colorfulness'>\n
    74.                                 <label class='w-form-label' for='полноцветная-3'>Полноцветная печать<\/label>\n
    75.                                 <\/div>\n
    76.                                 <div class='w-radio'>\n
    77.                                 <input class='w-radio-input' id='с применением понтонов-4' type='radio' name='colorfulness' value='с применением понтонов' data-name='colorfulness'>\n
    78.                                 <label class='w-form-label' for='с применением понтонов-4'>Печать с применением понтонов&nbsp;<\/label>\n
    79.                                 <\/div>\n
    80.                                 <\/div>";
    81.                                 document.getElementById("parentId").appendChild(newdiv);
    82.                                 return false;
    83.                             }
    84.                         </script>
    85.  
    86.                     </div>
    87.                 </div>
    88.                 <input class="w-button button updata" type="submit" value="Заказать" data-wait="Please wait...">
    89.             </form>
     
    #3 RazerVG, 1 ноя 2014
  4. metadon

    metadon Активный пользователь

    С нами с:
    6 фев 2006
    Сообщения:
    779
    Симпатии:
    0
    Так начни всё с начала. Делай по чучуть и наращивай функционал, каждый раз проверяя.
    Прочти книгу по JavaScript, используй инструменты разработчика в google chrome чтобы отладить код.
     
    #4 metadon, 1 ноя 2014
  5. torrius

    torrius Активный пользователь

    С нами с:
    28 июн 2014
    Сообщения:
    35
    Симпатии:
    1
    Код (Text):
    1. <html>
    2. <head>
    3.     <script>
    4. function addService(this_form) {
    5.     if(document.getElementById("parentId").innerHTML !== '') this_form.submit();
    6.     var newdiv =document.createElement("div");
    7.     newdiv.innerHTML = "<div class='specification_service'>\n\
    8.         <div>\n\
    9.     <label class='label_services service'>Услуга:<\/label>\n\
    10.     <div class='w-checkbox service_check'>\n\
    11.     <input class='w-checkbox-input' id='print' type='checkbox' name='print' data-name='print' required='required'>\n\
    12.     <label class='w-form-label' for='print'>Печать<\/label>\n\
    13.     <\/div>\n\
    14.     <div class='w-checkbox service_check'>\n\
    15.     <input class='w-checkbox-input' id='design' type='checkbox' name='design' data-name='design'>\n\
    16.     <label class='w-form-label' for='design'>Дизайн<\/label>\n\
    17.     <\/div>\n\
    18.     <div class='w-checkbox service_check'>\n\
    19.     <input class='w-checkbox-input' id='layout' type='checkbox' name='layout' data-name='layout'>\n\
    20.     <label class='w-form-label' for='layout'>Верстка<\/label>\n\
    21.     <\/div>\n\
    22.     <\/div>\n\
    23.     <div class='w-row'>\n\
    24.     <div class='w-col w-col-3'>\n\
    25.     <label class='label_services higt' for='product'>Продукция:<\/label>\n\
    26.     <label class='label_services'>Формат бумаги:<\/label>\n\
    27.     <label class='label_services'>Плотность бумаги:<\/label>\n\
    28.     <\/div>\n\
    29.     <div class='w-col w-col-3'>\n\
    30.     <select class='w-select select_servises' id='product' name='product' data-name='product'>\n\
    31.     <option value=''>Выберите продукт<\/option>\n\
    32.     <option value='First'>First Choice<\/option>\n\
    33.     <option value='Second'>Second Choice<\/option>\n\
    34.     <option value='Third'>Third Choice<\/option>\n\
    35.     <\/select>\n\
    36.     <input class='w-input' id='paper_format' type='text' placeholder='Введите формат бумаги' name='paper_format' required='required' data-name='paper_format'>\n\
    37.     <input class='w-input' id='paper_weight' type='text' placeholder='Введите плотность бумаги' name='paper_weight' required='required' data-name='paper_weight'>\n\
    38.     <\/div>\n\
    39.     <div class='w-col w-col-3'>\n\
    40.     <label class='label_services higt' for='tirag'>Тираж:<\/label>\n\
    41.     <div class='label_services'>Количество страниц<\/div>\n\
    42.     <label class='label_services'>Нумерация:<\/label>\n\
    43.     <label class='label_services'>Размер макета:<\/label>\n\
    44.     <\/div>\n\
    45.     <div class='w-col w-col-3'>\n\
    46.     <input class='w-input select_servises tirag' id='tirag' type='text' placeholder='Введите тираж продукции' name='tirag' required='required' data-name='tirag'>\n\
    47.     <input class='w-input' id='pages' type='text' placeholder='Введите количество страниц' name='pages' required='required' data-name='pages'>\n\
    48.     <input class='w-input' id='numbering' type='text' placeholder='С .. по ..' name='numbering' required='required' data-name='numbering'>\n\
    49.     <input class='w-input' id='size' type='text' placeholder='000 x 999' name='size' required='required' data-name='size'>\n\
    50.     <\/div>\n\
    51.     <\/div>\n\
    52.         <label>Стороны печати :<\/label>\n\
    53.     <div class='w-radio'>\n\
    54.     <input class='w-radio-input' id='1 сторона' type='radio' name='print_storony' value='1 сторона' data-name='print_storony'>\n\
    55.     <label class='w-form-label' for='1 сторона'>1 сторона<\/label>\n\
    56.     <\/div>\n\
    57.     <div class='w-radio'>\n\
    58.     <input class='w-radio-input' id='2 стороны' type='radio' name='print_storony' value='2 стороны' data-name='print_storony'>\n\
    59.     <label class='w-form-label' for='2 стороны'>2 стороны<\/label>\n\
    60.     <\/div>\n\
    61.         <label>Красочность :<\/label>\n\
    62.     <div class='w-radio'>\n\
    63.     <input class='w-radio-input' id='черно-белая' type='radio' name='colorfulness' data-name='colorfulness' value='черно-белая'>\n\
    64.     <label class='w-form-label' for='черно-белая'>Черно-белая печать<\/label>\n\
    65.     <\/div>\n\
    66.     <div class='w-radio'>\n\
    67.     <input class='w-radio-input' id='полноцветная-3' type='radio' name='colorfulness' value='полноцветная' data-name='colorfulness'>\n\
    68.     <label class='w-form-label' for='полноцветная-3'>Полноцветная печать<\/label>\n\
    69.     <\/div>\n\
    70.     <div class='w-radio'>\n\
    71.     <input class='w-radio-input' id='с применением понтонов-4' type='radio' name='colorfulness' value='с применением понтонов' data-name='colorfulness'>\n\
    72.     <label class='w-form-label' for='с применением понтонов-4'>Печать с применением понтонов&nbsp;<\/label>\n\
    73.     <\/div>\n\
    74.     <\/div>";
    75.     document.getElementById("parentId").appendChild(newdiv);
    76.     return false;
    77. }
    78.     </script>
    79. </head>
    80. <body>
    81. <form onsubmit="addService(this); return false;" class="w-clearfix" id="email-form-2" name="email-form-2" data-name="Email Form 2" method="post">
    82.     <div id="parentId" class="w-col w-col-11 w-clearfix"></div>
    83.     <input class="w-button button updata" type="submit" value="Заказать" data-wait="Please wait...">
    84. </form>
    85. </body>
    86. </html>
     
    #5 torrius, 4 ноя 2014
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)