提交值的動態表格
[英]Dynamic form for submit values
問題描述
我正在創建一個簡單的表單，該表單允許您輸入數據，然后將其發送到數據庫。 特別是，我需要從您那里了解如何創建動態表格，該表格允許我輸入用戶指定的人數。 基本上，如果用戶要添加3個人，則必須顯示3個新字段以輸入姓名，姓氏和電子郵件，如果他要添加5個新字段，則必須輸入5個新字段。
我寫了這個，但是在我的index.php中不起作用。
// Funzione che permette di aggiungere elementi al form (in questo caso rate) function Aggiungipersone(person) { var numero_persone = person.value; var box = document.getElementById('box_person'); if (numero_persone == "") { box.innerHTML = ''; } else { if (isNaN(numero_persone) == true) { box.innerHTML = ''; } else { var righe = ""; // Inserisco una riga ad ogni ciclo for (i = 1; i <= numero_persone; i++) { righe = righe + "Persona n°" + i + " : <input type='text' name='iname" + i + " size='10' value='" + Cognome + "' type='text' name='isurname' size='10' value=''/><br/>"; } // Aggiorno il contenuto del box che conterrà gli elementi aggiunti box.innerHTML = righe; } } }
Inserire i dati richiesti:<br><br> <form method="post" action="input.php"> <b> Richiedente Conferenza:</b><br><br> Nome: <input type="text" name="name" size="20"><br> Cognome: <input type="text" name="surname" size="20"><br> Email: <input type="email" name="email" size="20"><br> Oggetto Conferenza:<br><textarea name="testo" rows="5" cols="40" placeholder="Specificare oggetto Videoconferenza"></textarea><br> </form>
UPDATE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Prenotazione Videoconferenza</title>
<script src="utils.js"></script>
</head>
<body>
<?php
$( document ).ready(function() {
$("#add").click(function(){
var val1 =$("#n1").val();
for(var i=0;i<val1;i++){
$("#start").append($("#first").clone());
}
});
});
?>
Inserire i dati richiesti:<br><br>
<form method="post" action="input.php">
<b> Richiedente Conferenza:</b><br><br>
Nome:<input type="text" name="name" size="20"><br>
Cognome:<input type="text" name="surname" size="20"><br>
Email: <input type="email" name="email" size="20"><br>
Oggetto Conferenza:<br><textarea name="testo" rows="5" cols="40" placeholder="Specificare oggetto Videoconferenza"></textarea><br>
</form>
</body>
</html>
我在utilis.js中插入：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="n1" value="1"><br>
<a href="#" id="add">Add</a>
<div id="start">
<div id="first">
Nome:<input type="text" name="name" size="20"><br> Cognome:
<input type="text" name="surname" size="20"><br> Email: <input type="email" name="email" size="20"><br>
<br>
</div>
</div>
3 個解決方案
解決方案1
2 2018-07-17 09:02:57
// content of external javascript file: $(document).ready(function() { $("#add").click(function(e) { e.preventDefault(); // stop the link var val1 = $("#n1").val(); for (var i = 0; i < val1; i++) { $("#start").append($("#first").clone()); } }); });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Prenotazione Videoconferenza</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- here is the external file --> <script src="utils.js"></script> </head> <body> <input type="text" id="n1" value="1"><br> <a href="#" id="add">Add</a> <div id="start"> <div id="first"> Nome:<input type="text" name="name[]" size="20"><br> Cognome: <input type="text" name="surname[]" size="20"><br> Email: <input type="email" name="email[]" size="20"><br> <br> </div> </div> </body> </html>
一旦您提交表格，那么您將獲得數組到php文件中，您可以像這樣訪問
if($_POST['name']){ foreach($_POST['name'] as $name) { echo $name; } }
解決方案2
1 已采納 2018-07-17 10:19:24
1）使用VueJS- 代碼筆上的演示
2） jQuery的
const tmpl = $('#tmpl').html().trim() $('#btn-add').click(() => { let peopleCount = +$('#people-count').val(), html = Array(peopleCount) .fill(tmpl) .join('') $('#form-items').append(html) }) $('#form') .submit(() => { alert('Submit form by ajax or remove this mathod for default behavior') return false; }) .delegate('.btn-del', { click() { $(this).closest('.row').remove() }, })
<div id="app"> <div> <div> <button id="btn-add">Add new user</button> <label>Number of People:</label> <input type="number" id="people-count" value="1" min="1"> </div> <form id="form"> <div id="form-items" data-empty="Users list is empty"></div> <button>Send</button> </form> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/x-template" id="tmpl"> <div class="row"> <label> Name: <input class="people" name="name[]"> </label> <label> Surname: <input class="people" name="surname[]"> </label> <label> Email: <input type="email" class="people" name="email[]"> </label> <button class="btn-del">Delete</button> </div> </script> <style> .people { width: 80px; } #form-items:empty + button { display: none; } #form-items:empty:before { content: attr(data-empty); display: block; } </style>
解決方案3
0 2018-07-17 09:14:29
您將需要以下內容：
$("#people").on("keyup", function() { $("#form").html(""); // clear the form var people = $(this).val(); for(i=1;i<=people;i++) { $("#form").append("<input type='text' name='name[]' placeholder='Name Person "+i+"'><br>"); } })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label>Number of People:</label> <input type="number" id="people"> <div id="form"></div>
如您所見，輸入名稱帶有[]，表示它們是數組。。這意味着在服務器端腳本上，您將收到一個數組，必須在其中通過
foreach($_POST["names"] as $name) {
// do whatever
}
Javascript動態表單提交
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.