За последние 24 часа нас посетили 19463 программиста и 1633 робота. Сейчас ищут 1869 программистов ...

Добавление елемента при нажатии на кнопку

Тема в разделе "JavaScript и AJAX", создана пользователем Виктор К., 16 июн 2016.

  1. Виктор К.

    Виктор К. Новичок

    С нами с:
    1 апр 2016
    Сообщения:
    139
    Симпатии:
    6
    Адрес:
    Украина
    Здраствуйте. На сайте при нажатии на плюс показывается елемент. Использую скрипт:
    Код (Text):
    1.  
    2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    3.  
    4. <script type="text/javascript">
    5. $(function() {
    6.         $('.add').toggle(function(){
    7.         $(this).siblings(".food-item").show();
    8.         }, function(){
    9.        $(this).siblings(".food-item").hide();
    10.         $(this).removeClass('red');
    11. });
    12. });
    13. </script>
    Код страницы:

    Код (Text):
    1. <form method="POST" action="/added">
    2. <div class="block">
    3. <br><img class="add" src="/add.png"/>
    4. <div class="food-item">
    5. <br><select size="1" name="food1">
    6. <?php
    7. $Param1 = 'SELECT `id`, `name` FROM `food`';
    8. $Result = mysqli_query($CONNECT, $Param1);
    9. while ($Row = mysqli_fetch_assoc($Result)){
    10. echo '
    11. <option value="'.$Row['id'].'">'.$Row['name'].'</option>';}
    12. ?>
    13. </select>
    14. <input type="number" size="3" name="food-weight-1" min="1" max="5000" value="100"> г
    15. </div>
    16. </div>
    17.  
    18. <br><div class="block">
    19. <br><img class="add" src="/add.png"/>
    20. <div class="food-item">
    21. <br><select size="1" name="food2">
    22. <?php
    23. $Param1 = 'SELECT `id`, `name` FROM `food`';
    24. $Result = mysqli_query($CONNECT, $Param1);
    25. while ($Row = mysqli_fetch_assoc($Result)){
    26. echo '
    27. <option value="'.$Row['id'].'">'.$Row['name'].'</option>';}
    28. ?>
    29. </select>
    30. <input type="number" size="3" name="food-weight-2" min="1" max="5000" value="100"> г
    31. </div>
    32. </div>
    33.  
    34.  
    35. <br><div class="block">
    36. <br><img class="add" src="/add.png"/>
    37. <div class="food-item">
    38. <br><select size="1" name="food3">
    39. <?php
    40. $Param1 = 'SELECT `id`, `name` FROM `food`';
    41. $Result = mysqli_query($CONNECT, $Param1);
    42. while ($Row = mysqli_fetch_assoc($Result)){
    43. echo '
    44. <option value="'.$Row['id'].'">'.$Row['name'].'</option>';}
    45. ?>
    46. </select>
    47. <input type="number" size="3" name="food-weight-3" min="1" max="5000" value="100"> г
    48. </div>
    49. </div>
    Не знаю как реализовать такое: есть один отображаемый "block" и одна кнопка "add". И при нажатии на кнопку добавляется один елемент, и так 10 елементов. Нету ли готовых решений?
     
  2. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    https://jsfiddle.net/8duo6w6b/2/

    HTML:
    1. <div id="forms" data-count="1">
    2. <input type="text" name="str[1]" id="str_1">
    3. </div>
    4. <input type="button" value="add" id="addbtn">
    Код (Javascript):
    1. $( "#addbtn" ).on( "click", function() {
    2.   count = $("#forms").data("count");
    3.   count = count + 1;
    4.   $("#forms").data("count", count);
    5.   $( "#forms" ).append( '<br><input type="text" name="str['+count+']" id="str_'+count+'">' );
    6. });
     
    Виктор К. нравится это.