Доступ к значениям из динамически генерируемых текстовых полей в php

1

Первый пользователь введет, сколько текстовых полей он хочет создать. например, он выбирает 4 из списка, затем будет создано 4 текстовых поля.
После этого код будет динамически создавать текстовые поля в php и отправлять его значения на другую php-страницу. любезно помогите выполнить эту задачу.

  • 1
    Вы сделали какой-нибудь стартовый код, чтобы поделиться с нами?
  • 0
    Это лучший способ помочь нам
Показать ещё 4 комментария
Теги:
textbox

1 ответ

1

Я бы сделал что-то подобное.

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <label for="inputTextareasNumber">How many textareas do you want?</label>
        <input type="number" id="inputTextareasNumber" min="1">
        <button type="button" id="butCreateTextareas">Create textareas</button>

        <form id="myDynamicForm" action="myPHPfile.php" method="post"></form>

        <script>
            /* HTML elements caching */
            var inputTextareasNumber = document.getElementById("inputTextareasNumber");
            var butCreateTextareas = document.getElementById("butCreateTextareas");
            var myDynamicForm = document.getElementById("myDynamicForm");

            /* Create textareas when click button */
            butCreateTextareas.addEventListener("click", createTextareas);

            function createTextareas() {
                /* First we empty the form so we can re-create it with a different number of textareas*/
                emptyElement(myDynamicForm);

                /* Here we get the number of textareas we want */
                var textareasNumber = inputTextareasNumber.value;

                /* We create and append to the form as many textareas as number we wrote in the input */
                for (var i = 1; i <= textareasNumber; i++) {
                    var newTextarea = document.createElement("textarea");
                    newTextarea.name = "myTextarea" + i;
                    myDynamicForm.appendChild(newTextarea);
                }

                /* We crate and append the submit button */
                var submitButton = document.createElement("input");
                submitButton.type = "submit";
                submitButton.value = "Send";
                myDynamicForm.appendChild(submitButton);
            }

            /* Empty any HTML element */
            function emptyElement(element) {
                while (element.lastChild) {
                    element.removeChild(element.lastChild);
                }
            }
        </script>
    </body>
</html>

Здесь у вас есть работа: jsfiddle

Это очень простой базовый PHP-приемник (myPHPfile.php):

<?php

foreach ($_POST as $textareaValue) {
    echo "<p>$textareaValue</p>";
}
Поделиться
  • 0
    Я мог бы добавить некоторые комментарии к коду, если вы хотите
  • 0
    идеально ... это именно то, что мне нужно ...
Показать ещё 10 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню