提交值的动态表格 [英] Dynamic form for submit values
本文介绍了提交值的动态表格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建一个简单的表单，允许您输入数据，然后将其发送到数据库.特别是，我需要从您那里了解如何创建动态表格，该表格允许我输入用户指定的人数.基本上，如果用户要添加3个人，则必须显示3个新字段以输入姓名"，姓氏"和电子邮件"，如果要添加5个人，则必须添加5个新字段.
I'm creating a simple form that allows you to enter data that will then be sent to a DB. In particular I need to know from you how I can create a dynamic form that allows me to enter a number of people specified by the user. Basically if the user wants to add 3 people must present 3 new fields to enter Name, Surname and email, if he wants to add 5, 5 new fields.
我写了这个，但是在我的index.php中它不起作用.
I write this, but in my index.php it doesn't work.
// 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>
更新
<!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中插入:
In the utilis.js i inserted:
<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>
推荐答案
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>
这篇关于提交值的动态表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
