JS向表单添加输入刷新页面不输入
我对这个主题做了一些研究，但什么也没发现。如果这是重复的，我很抱歉。
我有一个表单，要求用户提供过去 14 天内访问过的四个地点。然而，显然他们可以访问 4 个以上的地方，我想创建一个脚本来添加新的输入集。这是我的完整代码：
<!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;
我的逻辑是逐字复制我已经为每个位置设置的输入，但将其复制到其他位置。但是，当我这样做时，它似乎刷新了页面，甚至没有添加元素。它应该将其添加到 div“addedPlaces”中。实际上，似乎是部分添加，然后立即刷新页面。
我找不到关于这个令人耳目一新的问题的内容。有没有其他方法可以代替appendChild()不刷新页面，或者有没有办法将其设置为不刷新页面？或者有什么东西触发了我忽略的刷新？
慕桂英4014372浏览 60回答 1
1回答
-
幕布斯6054654
按钮的默认类型是submit这样，只需添加type='button'“添加位置按钮”即可解决您的问题<!DOCTYPE html><html> <head> <!-- BootStrap 4 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> <!-- Jquery --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" ></script> <!-- BootStrap 4 JS --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous" ></script> <link rel="stylesheet" type="text/css" href="./index.css" /> <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> <title>Testing App</title> </head> <body> <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 type="button" onclick="addPlace();">Add Place</button> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> <!-- end of feature div --> </body></html>
随时随地看视频慕课网APP
相关分类
Html5