第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

JS向表單添加輸入刷新頁面不輸入

JS向表單添加輸入刷新頁面不輸入

慕桂英4014372 2023-10-17 17:30:48
我對(duì)這個(gè)主題做了一些研究，但什么也沒發(fā)現(xiàn)。如果這是重復(fù)的，我很抱歉。我有一個(gè)表單，要求用戶提供過去 14 天內(nèi)訪問過的四個(gè)地點(diǎn)。然而，顯然他們可以訪問 4 個(gè)以上的地方，我想創(chuàng)建一個(gè)腳本來添加新的輸入集。這是我的完整代碼：<!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;我的邏輯是逐字復(fù)制我已經(jīng)為每個(gè)位置設(shè)置的輸入，但將其復(fù)制到其他位置。但是，當(dāng)我這樣做時(shí)，它似乎刷新了頁面，甚至沒有添加元素。它應(yīng)該將其添加到 div“addedPlaces”中。實(shí)際上，似乎是部分添加，然后立即刷新頁面。我找不到關(guān)于這個(gè)令人耳目一新的問題的內(nèi)容。有沒有其他方法可以代替appendChild()不刷新頁面，或者有沒有辦法將其設(shè)置為不刷新頁面？或者有什么東西觸發(fā)了我忽略的刷新？
查看完整描述

1 回答

?
幕布斯6054654

TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超7個(gè)贊

按鈕的默認(rèn)類型是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>


查看完整回答
反對(duì) 回復(fù) 2023-10-17
  • 1 回答
  • 0 關(guān)注
  • 87 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)