单击“提交”按钮时，实时预览上的html js项目会保持刷新，结果所需的页面在几秒钟内会闪烁

Question

我正在做一个项目，其中如果一个人输入他的出生日期，它将显示他的出生时间，他出生了多少秒以及这几个功能。 我在运行第一部分时遇到了麻烦。 在第一部分中，当用户进入dob并单击提交时，它会显示结果并立即刷新到初始状态，可以在此处查看项目https://boring-euclid-39980f.netlify.com/

该程序是使用html和javascript完成的


var mysubmit = document.getElementById("mysubmit");
mysubmit.onclick = function(){

   var mydate = document.getElementById("date").value;
   if(mydate === ""){
      alert("ENTER YOUR DATE OF BIRTH");}
      else{
         var birthday = new Date(mydate);
         var year = birthday.getFullYear();
         var birthdate = birthday.getDate();
         document.getElementById("yr").innerHTML = year;
         document.getElementById("no").innerHTML = birthdate;


      }

}

<body>
    <div id="formcontainer">
        <form id="myForm">
            ENTER YOUR DOB : <input type="date" id="date"><br>
            <button id="mysubmit">SUBMIT</button>
        </form>
    </div>
    <div id="answer">
        YOU ARE BORN ON <span id="no">.</span> OF <span id="mo">.</span> IN <span id="yr">.</span>
    </div>
</body>

Answer 1

当您在表单中放置按钮时，它将提交您的表单数据，这将刷新您的页面。 通常，仅在将表单数据发送到服务器时才需要此功能。 但是，就您而言，您不需要将表单数据发送到服务器，而只需要从javascript客户端代码中检索数据即可。

因此，为了阻止您的页面刷新，可以为按钮提供type按钮type ，这样您可以在按下button告诉您不要提交数据：

<button type="button" id="mysubmit">SUBMIT</button>

请参见下面的示例：

 var mysubmit = document.getElementById("mysubmit"); mysubmit.onclick = function() { var mydate = document.getElementById("date").value; if (mydate === "") { alert("ENTER YOUR DATE OF BIRTH"); } else { var birthday = new Date(mydate); var year = birthday.getFullYear(); var birthdate = birthday.getDate(); document.getElementById("yr").innerHTML = year; document.getElementById("no").innerHTML = birthdate; } }

 <body> <div id="formcontainer"> <form id="myForm"> ENTER YOUR DOB : <input type="date" id="date"><br> <button type="button" id="mysubmit">SUBMIT</button> </form> </div> <div id="answer"> YOU ARE BORN ON <span id="no">.</span> OF <span id="mo">.</span> IN <span id="yr">.</span> </div> </body>

如果需要将数据提交到服务器并显示结果，则可以提交表单并获取服务器返回的数据，并在刷新页面后显示。 或者，如果您需要将数据从表单传递到服务器而不刷新页面，则可以向服务器发送POST请求。 要执行POST请求，您可以考虑使用fetch API或借助jQuery进行AJAX调用。

Answer 2

作为默认状态， 除非您另有说明 ，否则提交按钮将在您单击页面时刷新页面，为此，我们有三种方法：

您可以使用javascript事件单击“提交”按钮时return false ： <button id="mysubmit" onclick="return false">SUBMIT</button>
您可以通过在您的javascript文件中提及“提交”按钮的默认状态来阻止它：

mysubmit.onclick = function(event){

   event.preventDefault()

   var mydate = document.getElementById("date").value;
   if(mydate === ""){
      alert("ENTER YOUR DATE OF BIRTH");}
      else{
         var birthday = new Date(mydate);
         var year = birthday.getFullYear();
         var birthdate = birthday.getDate();
         document.getElementById("yr").innerHTML = year;
         document.getElementById("no").innerHTML = birthdate;


      }

}

正如在此问题的其他答案中提到的那样，当您将提交按钮放在<form>时，默认情况下，它将刷新您的页面，因此您需要指定按钮的type="button"为type="button"否则，您的网站会认为这是一个提交按钮，它将刷新您的页面： <button id="mysubmit" type="button">SUBMIT</button>

Answer 3

将按钮type =“ submit”更改为type =“ button”

<button type="button" id="myButton">SUBMIT</button>

或在点击事件中

event.preventDefault(); // it will stop the default form submit behavior.

单击“提交”按钮时，实时预览上的html js项目会保持刷新，结果所需的页面在几秒钟内会闪烁

问题描述

3 个解决方案

解决方案1
1 2019-06-25 10:08:34

解决方案2
1 2019-06-25 10:08:59

解决方案3
0 2019-06-25 10:34:32

单击“提交”按钮时，实时预览上的html js项目会保持刷新，结果所需的页面在几秒钟内会闪烁

问题描述

3 个解决方案

解决方案1 1 2019-06-25 10:08:34

解决方案2 1 2019-06-25 10:08:59

解决方案3 0 2019-06-25 10:34:32

解决方案1
1 2019-06-25 10:08:34

解决方案2
1 2019-06-25 10:08:59

解决方案3
0 2019-06-25 10:34:32