gpt4 book ai didi

javascript - 用于提交值的动态表单

转载 作者:行者123 更新时间:2023-11-28 17:26:47 24 4
gpt4 key购买 nike

我正在创建一个简单的表单,允许您输入数据,然后将其发送到数据库。特别是,我需要从您那里知道如何创建一个动态表单,该表单允许我输入用户指定的人数。基本上,如果用户想要添加 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>

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>

最佳答案

// 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; } }

关于javascript - 用于提交值的动态表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51377066/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com