Первый пользователь введет, сколько текстовых полей он хочет создать. например, он выбирает 4 из списка, затем будет создано 4 текстовых поля.
После этого код будет динамически создавать текстовые поля в php и отправлять его значения на другую php-страницу. любезно помогите выполнить эту задачу.
Я бы сделал что-то подобное.
<!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>";
}