猿问

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>&nbsp; <head>&nbsp; &nbsp; <!-- BootStrap 4 CSS -->&nbsp; &nbsp; <link&nbsp; &nbsp; &nbsp; rel="stylesheet"&nbsp; &nbsp; &nbsp; href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"&nbsp; &nbsp; &nbsp; integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"&nbsp; &nbsp; &nbsp; crossorigin="anonymous"&nbsp; &nbsp; />&nbsp; &nbsp; <!-- Jquery -->&nbsp; &nbsp; <script&nbsp; &nbsp; &nbsp; src="https://code.jquery.com/jquery-3.2.1.slim.min.js"&nbsp; &nbsp; &nbsp; integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"&nbsp; &nbsp; &nbsp; crossorigin="anonymous"&nbsp; &nbsp; ></script>&nbsp; &nbsp; <!-- BootStrap 4 JS -->&nbsp; &nbsp; <script&nbsp; &nbsp; &nbsp; src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&nbsp; &nbsp; &nbsp; integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"&nbsp; &nbsp; &nbsp; crossorigin="anonymous"&nbsp; &nbsp; ></script>&nbsp; &nbsp; <link rel="stylesheet" type="text/css" href="./index.css" />&nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; &nbsp;var numPlaces = 4;function addPlace() {&nbsp; numPlaces++;&nbsp; console.log(numPlaces);&nbsp; var place = document.createElement("DIV");&nbsp; place.id = "p" + numPlaces;&nbsp; var group1 = document.createElement("DIV");&nbsp; group1.className = "form-group";&nbsp; var label1 = document.createElement("LABEL");&nbsp; label1.className = "custom-control-label";&nbsp; label1.style.fontWeight = "bold";&nbsp; label1.innerHTML = "Place " + numPlaces;&nbsp; var address = document.createElement("INPUT");&nbsp; address.type = "text";&nbsp; address.className = "form-control";&nbsp; address.id = "place" + numPlaces;&nbsp; address.placeholder = "Enter Address of Place you Visited";&nbsp; group1.appendChild(label1);&nbsp; group1.appendChild(address);&nbsp; var group2 = document.createElement("DIV");&nbsp; group2.className = "form-group";&nbsp; var label2 = document.createElement("LABEL");&nbsp; label2.className = "custom-control-label";&nbsp; label2.innerHTML = "Enter the day you visited this place.";&nbsp; var date = document.createElement("INPUT");&nbsp; date.type = "date";&nbsp; date.className = "form-control";&nbsp; date.id = "date" + numPlaces;&nbsp; group2.appendChild(label2);&nbsp; group2.appendChild(date);&nbsp; var group3 = document.createElement("DIV");&nbsp; group3.className = "form-group";&nbsp; var label3 = document.createElement("LABEL");&nbsp; label3.className = "custom-control-label";&nbsp; label3.innerHTML =&nbsp; &nbsp; "Did you visit in the morning (A.M. times) or the afternoon (P.M. times)?";&nbsp; var amDiv = document.createElement("DIV");&nbsp; amDiv.className = "custom-control custom-radio custom-control-inline";&nbsp; var amInput = document.createElement("INPUT");&nbsp; amInput.type = "radio";&nbsp; amInput.className = "custom-control-input";&nbsp; amInput.id = "am" + numPlaces;&nbsp; amInput.name = "time" + numPlaces;&nbsp; var label4 = document.createElement("LABEL");&nbsp; label4.className = "custom-control-label";&nbsp; label4.for = amInput.id;&nbsp; label4.innerHTML = "Morning";&nbsp; amDiv.appendChild(amInput);&nbsp; amDiv.appendChild(label4);&nbsp; var pmDiv = document.createElement("DIV");&nbsp; pmDiv.className = "custom-control custom-radio custom-control-inline";&nbsp; var pmInput = document.createElement("INPUT");&nbsp; pmInput.type = "radio";&nbsp; pmInput.className = "custom-control-input";&nbsp; pmInput.id = "pm" + numPlaces;&nbsp; pmInput.name = "time" + numPlaces;&nbsp; var label5 = document.createElement("LABEL");&nbsp; label5.className = "custom-control-label";&nbsp; label5.for = pmInput.id;&nbsp; label5.innerHTML = "Afternoon";&nbsp; pmDiv.appendChild(pmInput);&nbsp; pmDiv.appendChild(label5);&nbsp; group3.appendChild(amDiv);&nbsp; group3.appendChild(pmDiv);&nbsp; place.appendChild(group1);&nbsp; place.appendChild(group2);&nbsp; place.appendChild(group3);&nbsp; document.getElementById("addedPlaces").appendChild(place);}&nbsp; &nbsp; </script>&nbsp; &nbsp; <title>Testing App</title>&nbsp; </head>&nbsp; <body>&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">&nbsp; &nbsp; &nbsp; &nbsp; <a class="navbar-brand" href="#">Am I At Risk?</a>&nbsp; &nbsp; &nbsp; &nbsp; <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="navbar-toggler-icon"></span>&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; <div class="collapse navbar-collapse" id="navbarNavDropdown">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="navbar-nav">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item active">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="userForm.php">Enter Details<span class="sr-only">(current)</span></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href="governmentForm.php">Form for Government</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; &nbsp; <br /><br /><br />&nbsp; &nbsp; &nbsp; <form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label>Please enter the various places you visited in the past 14 days.</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="p1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label"><b>Place 1</b></label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="form-control" id="place1" placeholder="Enter Address of Place you Visited"></input>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label">Enter the day you visited this place.</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="date" class="form-control" id="date1"></input>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label">Did you visit in the morning (A.M. times) or the afternoon (P.M. times)?</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="custom-control custom-radio custom-control-inline">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" class="custom-control-input" id="am1" name="time1" checked>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label" for="am1">Morning</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="custom-control custom-radio custom-control-inline">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" class="custom-control-input" id="pm1" name="time1" checked>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label" for="pm1">Afternoon</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="p2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label"><b>Place 2</b></label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="form-control" id="place2" placeholder="Enter Address of Place you Visited"></input>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label">Enter the day you visited this place.</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="date" class="form-control" id="date2"></input>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label">Did you visit in the morning (A.M. times) or the afternoon (P.M. times)?</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="custom-control custom-radio custom-control-inline">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" class="custom-control-input" id="am2" name="time2" checked>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label" for="am2">Morning</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="custom-control custom-radio custom-control-inline">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" class="custom-control-input" id="pm2" name="time2" checked>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label" for="pm2">Afternoon</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="p3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label"><b>Place 3</b></label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="form-control" id="place3" placeholder="Enter Address of Place you Visited"></input>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label">Enter the day you visited this place.</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="date" class="form-control" id="date3"></input>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label">Did you visit in the morning (A.M. times) or the afternoon (P.M. times)?</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="custom-control custom-radio custom-control-inline">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" class="custom-control-input" id="am3" name="time3" checked>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label" for="am3">Morning</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="custom-control custom-radio custom-control-inline">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" class="custom-control-input" id="pm3" name="time3" checked>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label" for="pm3">Afternoon</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="p4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label"><b>Place 4</b></label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="form-control" id="place4" placeholder="Enter Address of Place you Visited"></input>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label">Enter the day you visited this place.</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="date" class="form-control" id="date4"></input>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label">Did you visit in the morning (A.M. times) or the afternoon (P.M. times)?</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="custom-control custom-radio custom-control-inline">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" class="custom-control-input" id="am4" name="time4" checked>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label" for="am4">Morning</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="custom-control custom-radio custom-control-inline">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" class="custom-control-input" id="pm4" name="time4" checked>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label" for="pm4">Afternoon</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="addedPlaces"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" onclick="addPlace();">Add Place</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="submit" class="btn btn-primary">Submit</button>&nbsp; &nbsp; &nbsp; </form>&nbsp; </div>&nbsp; &nbsp; <!-- end of feature div&nbsp; -->&nbsp; &nbsp;&nbsp; </body></html>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答