提交值的动态表格
[英]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.