Javascript JS将输入添加到表单刷新页面，不输入
我对这个话题做了一些研究，但什么也没发现。如果这是重复的，我很抱歉 我有一个表单，要求用户提供他们在过去14天访问过的四个地方。然而，因为他们显然可以访问4个以上的地方，所以我想创建一个脚本来添加一个新的输入集。这是我的全部代码：Javascript JS将输入添加到表单刷新页面，不输入,javascript,html,Javascript,Html,我对这个话题做了一些研究，但什么也没发现。如果这是重复的，我很抱歉 我有一个表单，要求用户提供他们在过去14天访问过的四个地方。然而，因为他们显然可以访问4个以上的地方，所以我想创建一个脚本来添加一个新的输入集。这是我的全部代码： <!doctype html> <html> <head> <title>Title</title> <meta charset="utf-8">
<!doctype html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" integrity="sha256-PHcOkPmOshsMBC+vtJdVr5Mwb7r0LkSVJPlPrp/IMpU=" crossorigin="anonymous" />
</head>
<body>
<script type="text/javascript">
var numPlaces = 4;
function addPlace() {
numPlaces++;
console.log(numPlaces);
var place = document.createElement("DIV");
place.id = "p" + numPlaces;
var group1 = document.createElement("DIV");
group1.className = "form-group";
var label1 = document.createElement("LABEL");
label1.className = "custom-control-label";
label1.style.fontWeight = "bold";
label1.innerHTML = "Place " + numPlaces;
var address = document.createElement("INPUT");
address.type = "text";
address.className = "form-control";
address.id = "place" + numPlaces;
address.placeholder = "Enter Address of Place you Visited";
group1.appendChild(label1);
group1.appendChild(address);
var group2 = document.createElement("DIV");
group2.className = "form-group";
var label2 = document.createElement("LABEL");
label2.className = "custom-control-label";
label2.innerHTML = "Enter the day you visited this place.";
var date = document.createElement("INPUT");
date.type = "date";
date.className = "form-control";
date.id = "date" + numPlaces;
group2.appendChild(label2);
group2.appendChild(date);
var group3 = document.createElement("DIV");
group3.className = "form-group";
var label3 = document.createElement("LABEL");
label3.className = "custom-control-label";
label3.innerHTML = "Did you visit in the morning (A.M. times) or the afternoon (P.M. times)?";
var amDiv = document.createElement("DIV");
amDiv.className = "custom-control custom-radio custom-control-inline";
var amInput = document.createElement("INPUT");
amInput.type = "radio";
amInput.className = "custom-control-input";
amInput.id = "am" + numPlaces;
amInput.name = "time" + numPlaces;
var label4 = document.createElement("LABEL");
label4.className = "custom-control-label";
label4.for = amInput.id;
label4.innerHTML = "Morning";
amDiv.appendChild(amInput);
amDiv.appendChild(label4);
var pmDiv = document.createElement("DIV");
pmDiv.className = "custom-control custom-radio custom-control-inline";
var pmInput = document.createElement("INPUT");
pmInput.type = "radio";
pmInput.className = "custom-control-input";
pmInput.id = "pm" + numPlaces;
pmInput.name = "time" + numPlaces;
var label5 = document.createElement("LABEL");
label5.className = "custom-control-label";
label5.for = pmInput.id;
label5.innerHTML = "Afternoon";
pmDiv.appendChild(pmInput);
pmDiv.appendChild(label5);
group3.appendChild(amDiv);
group3.appendChild(pmDiv);
place.appendChild(group1);
place.appendChild(group2);
place.appendChild(group3);
document.getElementById("addedPlaces").appendChild(place);
}
</script>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="#">Am I At Risk?</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="userForm.php">Enter Details<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="governmentForm.php">Form for Government</a>
</li>
</ul>
</div>
</nav>
<br /><br /><br />
<form>
<div class="form-group">
<label>Please enter the various places you visited in the past 14 days.</label>
</div>
<div id="p1">
<div class="form-group">
<label class="custom-control-label"><b>Place 1</b></label>
<input type="text" class="form-control" id="place1" placeholder="Enter Address of Place you Visited"></input>
</div>
<div class="form-group">
<label class="custom-control-label">Enter the day you visited this place.</label>
<input type="date" class="form-control" id="date1"></input>
</div>
<div class="form-group">
<label class="custom-control-label">Did you visit in the morning (A.M. times) or the afternoon (P.M. times)?</label>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="am1" name="time1" checked>
<label class="custom-control-label" for="am1">Morning</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="pm1" name="time1" checked>
<label class="custom-control-label" for="pm1">Afternoon</label>
</div>
</div>
</div>
<br />
<div id="p2">
<div class="form-group">
<label class="custom-control-label"><b>Place 2</b></label>
<input type="text" class="form-control" id="place2" placeholder="Enter Address of Place you Visited"></input>
</div>
<div class="form-group">
<label class="custom-control-label">Enter the day you visited this place.</label>
<input type="date" class="form-control" id="date2"></input>
</div>
<div class="form-group">
<label class="custom-control-label">Did you visit in the morning (A.M. times) or the afternoon (P.M. times)?</label>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="am2" name="time2" checked>
<label class="custom-control-label" for="am2">Morning</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="pm2" name="time2" checked>
<label class="custom-control-label" for="pm2">Afternoon</label>
</div>
</div>
</div>
<br />
<div id="p3">
<div class="form-group">
<label class="custom-control-label"><b>Place 3</b></label>
<input type="text" class="form-control" id="place3" placeholder="Enter Address of Place you Visited"></input>
</div>
<div class="form-group">
<label class="custom-control-label">Enter the day you visited this place.</label>
<input type="date" class="form-control" id="date3"></input>
</div>
<div class="form-group">
<label class="custom-control-label">Did you visit in the morning (A.M. times) or the afternoon (P.M. times)?</label>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="am3" name="time3" checked>
<label class="custom-control-label" for="am3">Morning</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="pm3" name="time3" checked>
<label class="custom-control-label" for="pm3">Afternoon</label>
</div>
</div>
</div>
<br />
<div id="p4">
<div class="form-group">
<label class="custom-control-label"><b>Place 4</b></label>
<input type="text" class="form-control" id="place4" placeholder="Enter Address of Place you Visited"></input>
</div>
<div class="form-group">
<label class="custom-control-label">Enter the day you visited this place.</label>
<input type="date" class="form-control" id="date4"></input>
</div>
<div class="form-group">
<label class="custom-control-label">Did you visit in the morning (A.M. times) or the afternoon (P.M. times)?</label>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="am4" name="time4" checked>
<label class="custom-control-label" for="am4">Morning</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="pm4" name="time4" checked>
<label class="custom-control-label" for="pm4">Afternoon</label>
</div>
</div>
</div>
<br />
<div id="addedPlaces"></div>
<button onclick="addPlace();">Add Place</button>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
标题
var numPlaces=4；
函数addPlace（）{
numPlaces++；
console.log（numPlaces）；
var place=document.createElement（“DIV”）；
place.id=“p”+numPlaces；
var group1=document.createElement（“DIV”）；
group1.className=“表单组”；
var label1=document.createElement（“标签”）；
label1.className=“自定义控件标签”；
label1.style.fontwweight=“bold”；
label1.innerHTML=“Place”+numPlaces；
var address=document.createElement（“输入”）；
address.type=“text”；
address.className=“表单控件”；
address.id=“place”+numPlaces；
address.placeholder=“输入您访问过的地方的地址”；
第1组：儿童（标签1）；
第1组：儿童（地址）；
var group2=document.createElement（“DIV”）；
group2.className=“表单组”；
var label2=document.createElement（“标签”）；
label2.className=“自定义控件标签”；
label2.innerHTML=“输入您访问此位置的日期。”；
变量日期=document.createElement（“输入”）；
date.type=“日期”；
date.className=“表单控件”；
date.id=“date”+numPlaces；
第2组：儿童（标签2）；
第2组：儿童（日期）；
var group3=document.createElement（“DIV”）；
group3.className=“表单组”；
var label3=document.createElement（“标签”）；
label3.className=“自定义控件标签”；
label3.innerHTML=“您是在上午（上午时间）还是下午（下午时间）访问的？”；
var amDiv=document.createElement（“DIV”）；
amDiv.className=“自定义控件自定义无线电自定义控件内联”；
var amInput=document.createElement（“输入”）；
amInput.type=“收音机”；
amInput.className=“自定义控件输入”；
amInput.id=“am”+numPlaces；
amInput.name=“time”+numPlaces；
var label4=document.createElement（“标签”）；
label4.className=“自定义控件标签”；
label4.for=amInput.id；
label4.innerHTML=“早晨”；
amDiv.appendChild（amInput）；
amDiv.appendChild（标签4）；
var pmDiv=document.createElement（“DIV”）；
pmDiv.className=“自定义控件自定义无线电自定义控件内联”；
var pmInput=document.createElement（“输入”）；
pmInput.type=“无线电”；
pmInput.className=“自定义控件输入”；
pmInput.id=“pm”+numPlaces；
pmInput.name=“time”+numPlaces；
var label5=document.createElement（“标签”）；
label5.className=“自定义控件标签”；
label5.for=pmInput.id；
label5.innerHTML=“下午”；
pmDiv.appendChild（pmInput）；
pmDiv.appendChild（标签5）；
第3组：儿童（amDiv）；
第3组：儿童（pmDiv）；
地点：儿童（第1组）；
地点：儿童（第2组）；
地点：儿童（第3组）；
文件.getElementById（“addedPlaces”）.appendChild（位置）；
}
-
-
请输入您在过去14天访问过的各个地方。
地点1
输入您访问此位置的日期。
您是在上午（上午时间）还是下午（下午时间）参观的？
早晨
下午
地点2
输入您访问此位置的日期。
您是在上午（上午时间）还是下午（下午时间）参观的？
早晨
下午
地点3