За последние 24 часа нас посетили 11328 программистов и 794 робота. Сейчас ищут 298 программистов ...

Как программно создать несколько полей типа "TextBox"(TextArea для ввода текста)

Тема в разделе "PHP для новичков", создана пользователем inkom, 2 апр 2018.

  1. inkom

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

    С нами с:
    2 апр 2018
    Сообщения:
    28
    Симпатии:
    0
    Как программно создать несколько текстовых полей на странице?
    На странице окно со скролом, а внутри располагаются несколько текстовых полей (см. скрин)

    Имеем
    - Страница 1 (содержит: поле для ввода количества создаваемых полей, кнопка);
    - Страница 2 (содержит: окно в котором предполагается создать поля);

    Сценарий:
    - вводим количество полей, которое нужно создать;
    - нажимаем кнопку;
    - На "Странице 2" создаётся необходимое количество полей;

    Или может сделать на одной странице... Смотря как целесообразнее с позиции кода.. Если это влияет...
     

    Вложения:

    • 01.jpg
      01.jpg
      Размер файла:
      15,6 КБ
      Просмотров:
      7
    • 02.jpg
      02.jpg
      Размер файла:
      35,9 КБ
      Просмотров:
      7
  2. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.523
    Симпатии:
    504
    Целесообразней смотреть на задачу в целом: что, для чего, какие могут быть промежуточные этапы и какая конечная цель.
    Просто создать N-ное количество элементов, можно и на JS без каких-либо переходов и задействования серверной части.
     
  3. виталий032

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

    С нами с:
    31 янв 2014
    Сообщения:
    227
    Симпатии:
    30
    Адрес:
    Владивосток
    Сейчас быстро сделаю аналог на js, подумал я, сделав php вариант. Час боли.

    Лови кучку, конечно же это просто анархия)
    Открываешь index.php, выбираешь сколько колонок создать, и галка - создать, используя js на текущей странице или на следующей странице, используя php.

    Файл forms у меня лежал в подпапке phpru.
    HTML:
    1. // index.php
    2.  
    3. <!doctype html>
    4. <html lang="en">
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport"
    7.          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    8.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    9.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    10.     <title>First</title>
    11.     <style>
    12.          #wrap, .row {
    13.             margin-top: 10px;
    14.         }
    15.     </style>
    16. </head>
    17.     <div id="wrap">
    18.         <div class="container">
    19.             <div class="row">
    20.                 <form action="/phpru/forms.php" method="get" onsubmit="return drawTables(event)">
    21.                     <select name="colsNum" id="">
    22.                         <option disabled selected>Количество полей</option>
    23.                         <option value="1">1</option>
    24.                         <option value="2">2</option>
    25.                         <option value="3">3</option>
    26.                         <option value="4">4</option>
    27.                     </select><br>
    28.  
    29.                     <p style="display: inline-block">Создать с помощью js</p><input id="checkbox" type="checkbox"><br>
    30.                     <button type="submit">Создать</button>
    31.                 </form>
    32.             </div>
    33.         </div>
    34.     </div>
    35.  
    36.     <script>
    37.         function drawTables(e) {
    38.             console.log(e.target);
    39.  
    40.             let isChecked = document.getElementById('checkbox').checked;
    41.             if(isChecked) {
    42.                 alert('Create with js');
    43.  
    44.                 let selectElem = document.getElementsByTagName('select')[0];
    45.                 let colsNum = selectElem.options[selectElem.selectedIndex].value;
    46.                 let row = document.createElement('div');
    47.                 row.className = "row";
    48.                 let bstrpCols = 12 / colsNum;
    49.                 let htmlLayout = "";
    50.  
    51.                 for(let i = 0; i < colsNum; i++) {
    52.                    htmlLayout += `
    53.                        <div class="col-sm-${bstrpCols}">
    54.                             <table border="1" width="100%" cellpadding="6">
    55.                                 <tr>
    56.                                     <td>Dog</td>
    57.                                     <td>Cat</td>
    58.                                 </tr>
    59.                                 <tr>
    60.                                     <td>Banana</td>
    61.                                     <td>Orange</td>
    62.                                 </tr>
    63.                                 <tr>
    64.                                     <td>Cucumber</td>
    65.                                     <td>Potato</td>
    66.                                 </tr>
    67.                                 <tr>
    68.                                     <td>...</td>
    69.                                     <td>...</td>
    70.                                 </tr>
    71.                             </table>
    72.                         </div>
    73.                     `;
    74.                 }
    75.  
    76.                 row.insertAdjacentHTML( 'beforeend', htmlLayout);
    77.                 document.getElementsByClassName('container')[0].appendChild(row);
    78.  
    79.                 return false;
    80.             } else {
    81.                 alert('Create with php');
    82.             }
    83.         }
    84.     </script>
    85. </body>
    86. </html>
    HTML:
    1. <?php
    2. if(empty($_GET['colsNum'])) die("Number of columns wasn't specified");
    3. $colsNum = $_GET['colsNum'];
    4. $bstrpCols = 12 / $colsNum;
    5. ?>
    6.  
    7. <!doctype html>
    8. <html lang="en">
    9.     <meta charset="UTF-8">
    10.     <meta name="viewport"
    11.          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    12.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    13.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    14.     <title>Forms</title>
    15.     <style>
    16.         #wrap, .row {
    17.             margin-top: 10px;
    18.         }
    19.     </style>
    20. </head>
    21. <div id="wrap">
    22.     <div class="container">
    23.         <div class="row">
    24.             <?php for($i=0;$i<$colsNum;$i++): ?>
    25.                 <div class="col-sm-<?=$bstrpCols?>">
    26.                     <table border="1" width="100%" cellpadding="6">
    27.                         <tr>
    28.                             <td>Dog</td>
    29.                             <td>Cat</td>
    30.                         </tr>
    31.                         <tr>
    32.                             <td>Banana</td>
    33.                             <td>Orange</td>
    34.                         </tr>
    35.                         <tr>
    36.                             <td>Cucumber</td>
    37.                             <td>Potato</td>
    38.                         </tr>
    39.                         <tr>
    40.                             <td>...</td>
    41.                             <td>...</td>
    42.                         </tr>
    43.                     </table>
    44.                 </div>
    45.             <?php endfor; ?>
    46.         </div>
    47.     </div>
    48. </div>
    49. </body>
    50. </html>
     
    #3 виталий032, 2 апр 2018
    Последнее редактирование: 2 апр 2018
    inkom нравится это.
  4. inkom

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

    С нами с:
    2 апр 2018
    Сообщения:
    28
    Симпатии:
    0
    Да. Просто создать N-ное количество элементов.
    Мне нужна следующая "конструкция" на странице:
    - окно со скролом;
    - внутри окна поля;
    - поля будут с текстовым редактором;
    - поля будут получать/отправлять текст в(из) базу данных
    - по средствам кнопки;
    или
    - автоматически;
    см. Гиф

    Кнопка может располагаться как на этой же странице или на отдельной странице.

    Хотя я могу быть некорректен в постановке задачи и это можно решить более рациональнее...
    Буду признателен, если поправите меняююю

    @виталий032
    У меня создаются таблицы....
    Или я что-то не правильно делаю?
    А хотелось бы - см. Гиф
     

    Вложения:

    • Screenshot_5.jpg
      Screenshot_5.jpg
      Размер файла:
      35,6 КБ
      Просмотров:
      4
    • 01.gif
      01.gif
      Размер файла:
      57,5 КБ
      Просмотров:
      6
  5. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    Такое лучше на react vue сделать. Да и данными управлять проще будет
     
    inkom нравится это.
  6. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.523
    Симпатии:
    504
    Тогда, просто создадим
    Код (Javascript):
    1. const inputNum = document.querySelector('input'),
    2.     output = document.querySelector('output'),
    3.     template = `<div>
    4.                 <label></label>
    5.                 <textarea name="key[]"></textarea>
    6.                 <button>Save</button>
    7.                 </div>`;
    8. document.getElementById('generate').addEventListener('click', () => {
    9.     output.innerHTML = template.repeat(+inputNum.value)
    10. });
     
    виталий032 и inkom нравится это.
  7. inkom

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

    С нами с:
    2 апр 2018
    Сообщения:
    28
    Симпатии:
    0
    Спасибо... Практически то, что надо....

    1. Не могли бы вы ещё сделать следующее:
    - textarea располагаются в одну линию;
    - "массив" textarea располагаются внутри специального окна со скролом (см. скрин "01.jpg", см. гиф "01.gif");

    2. Как эти два кода связать?
    Т.е. в файлах с каким расширением размещать?
     

    Вложения:

    • 01.jpg
      01.jpg
      Размер файла:
      27,1 КБ
      Просмотров:
      3
    • 01.gif
      01.gif
      Размер файла:
      57,5 КБ
      Просмотров:
      6
    #7 inkom, 4 апр 2018
    Последнее редактирование: 4 апр 2018
  8. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.523
    Симпатии:
    504
    Для родительского элемента, в который будете выводить textarea, добавьте CSS-свойства:
    Код (CSS):
    1. /* width или max-width с фиксированной шириной */
    2. width: 200px;  /* значение - определяете сами*/
    3. white-space: nowrap;
    4. overflow-x: auto; /* auto или hidden */
    5. overflow-y: hidden; /* опционально*/

    Обычно - это .html
     
    inkom нравится это.
  9. inkom

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

    С нами с:
    2 апр 2018
    Сообщения:
    28
    Симпатии:
    0
    Прошу прощения за настойчивость, но опять почти "то", но "не то"... см. скрин.

    Скрин с результатом по ссылке - http://prntscr.com/j0o5vz

    Сделал один файл "index1.html".
    Код файла "index1.html"
    Код (Text):
    1.  <head>
    2. <style>
    3.    div {
    4.     /* width или max-width с фиксированной шириной */
    5.     width: 200px;  /* значение - определяете сами*/
    6.     white-space: nowrap;
    7.     overflow-x: auto; /* auto или hidden */
    8.     overflow-y: hidden; /* опционально*/
    9.    }
    10. </style>
    11. </head>
    12.  
    13. <input type="number" min="0" value="5">
    14. <button id="generate">Go</button>
    15. <output></output>
    16.  
    17. <script type="text/javascript">
    18. {
    19. const inputNum = document.querySelector('input'),
    20.     output = document.querySelector('output'),
    21.     template = `<div>
    22.                 <label></label>
    23.                 <textarea name="key[]"></textarea>
    24.                 <button>Save</button>
    25.                 </div>`;
    26. document.getElementById('generate').addEventListener('click', () => {
    27.     output.innerHTML = template.repeat(+inputNum.value)
    28. });
    29.  
    30. }
    31. </script>

    Буду признателен, если посоветуйте, как правильнее оформить код...
    Как всё таки привести к виду который продемонстрирован на gif?
    "
    [​IMG]
    01.gif
    "
     
  10. виталий032

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

    С нами с:
    31 янв 2014
    Сообщения:
    227
    Симпатии:
    30
    Адрес:
    Владивосток
    @inkom
    Попробуйте добавить стиль для div:
    Код (CSS):
    1. div {
    2.      display: inline-block;
    3. }
     
    inkom нравится это.
  11. inkom

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

    С нами с:
    2 апр 2018
    Сообщения:
    28
    Симпатии:
    0
    Сделал. Не подходит
    Получается скролл для каждого текстового поля...

    Код (Text):
    1.  <head>
    2. <style>
    3.    div {
    4.     /* width или max-width с фиксированной шириной */
    5.     width: 200px;  /* значение - определяете сами*/
    6.     white-space: nowrap;
    7.     overflow-x: auto; /* auto или hidden */
    8.     overflow-y: hidden; /* опционально*/
    9.     display: inline-block;
    10.    }
    11. </style>
    12. </head>
    13.  
    14. <input type="number" min="0" value="5">
    15. <button id="generate">Go</button>
    16. <output></output>
    17.  
    18. <script type="text/javascript">
    19. {
    20. const inputNum = document.querySelector('input'),
    21.     output = document.querySelector('output'),
    22.     template = `<div>
    23.                 <label></label>
    24.                 <textarea name="key[]"></textarea>
    25.                 <button>Save</button>
    26.                 </div>`;
    27. document.getElementById('generate').addEventListener('click', () => {
    28.     output.innerHTML = template.repeat(+inputNum.value)
    29. });
    30.  
    31. }
    32. </script>
     

    Вложения:

    • 02.jpg
      02.jpg
      Размер файла:
      19,6 КБ
      Просмотров:
      2
    #11 inkom, 4 апр 2018
    Последнее редактирование: 4 апр 2018
  12. виталий032

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

    С нами с:
    31 янв 2014
    Сообщения:
    227
    Симпатии:
    30
    Адрес:
    Владивосток
    Штук 8 textarea добавьте, чтобы видно было скролл по горизонтали

    HTML:
    1. <!doctype html>
    2. <html lang="en">
    3.     <meta charset="UTF-8">
    4.     <meta name="viewport"
    5.          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>Document</title>
    8.     <style>
    9.         output {
    10.             display: block;
    11.             width: 800px;  /* значение - определяете сами*/
    12.             margin-top: 30px;
    13.             white-space: nowrap;
    14.             overflow-x: auto; /* auto или hidden */
    15.             overflow-y: hidden; /* опционально*/
    16.         }
    17.         output div {
    18.             display: inline-block;
    19.             margin-right: 20px;
    20.         }
    21.     </style>
    22. </head>
    23. <input type="number" min="0" value="5">
    24. <button id="generate">Go</button>
    25.  
    26. <script type="text/javascript">
    27.     {
    28.         const inputNum = document.querySelector('input'),
    29.             output = document.querySelector('output'),
    30.             template = `<div>
    31.                 <label></label>
    32.                 <textarea name="key[]"></textarea><br>
    33.                 <button>Save</button>
    34.                 </div>`;
    35.         document.getElementById('generate').addEventListener('click', () => {
    36.             output.innerHTML = template.repeat(+inputNum.value)
    37.         });
    38.  
    39.     }
    40. </body>
    41. </html>
    [Updated]
    Добавьте стиль:
    Код (CSS):
    1. output:not(:empty) {
    2.   border: 1px solid green;
    3. }
     
    #12 виталий032, 4 апр 2018
    Последнее редактирование: 4 апр 2018
    inkom нравится это.
  13. inkom

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

    С нами с:
    2 апр 2018
    Сообщения:
    28
    Симпатии:
    0
    @виталий032
    Вроде то, что нужно...
    Буду испытывать пока...

    Можно ещё сделать, чтобы отображалась граница окна где располагаются текстовые поля?
    А то она сливается с фоном страницы.. см. скрин
     

    Вложения:

    • 03.jpg
      03.jpg
      Размер файла:
      25,3 КБ
      Просмотров:
      1
  14. inkom

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

    С нами с:
    2 апр 2018
    Сообщения:
    28
    Симпатии:
    0
    @виталий032
    Пост #13 сделал..
    Добавил "output" добавил

    "outline: 2px solid #F3B53F;"
    Результат...
    Код (Text):
    1. output {
    2.             display: block;
    3.             width: 800px;  /* значение - определяете сами*/
    4.             margin-top: 30px;
    5.             white-space: nowrap;
    6.             overflow-x: auto; /* auto или hidden */
    7.             overflow-y: hidden; /* опционально*/
    8.             outline: 2px solid #F3B53F;
    9.         }
    Нормально?
    Или можно по другому?
    Может есть особенности?
     
  15. inkom

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

    С нами с:
    2 апр 2018
    Сообщения:
    28
    Симпатии:
    0
    А можно как-то для "output" изменить ширину или полностью размеры мышкой на странице?
    Т.е. изменить размер путём перетаскивания границ...
     

    Вложения:

    • 04.jpg
      04.jpg
      Размер файла:
      37,2 КБ
      Просмотров:
      0
  16. виталий032

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

    С нами с:
    31 янв 2014
    Сообщения:
    227
    Симпатии:
    30
    Адрес:
    Владивосток
    @inkom
    Самое простое, это добавить стиль:
    Код (CSS):
    1. output {
    2.     resize: horizontal;
    3. }
    И ресайзить блок за квадратик в правом нижнем углу.

    Если нужна красота, то в инете есть готовые решения. Например, jquery ui.
     
    inkom нравится это.