HTML提交只在一瞬间起作用

HTML submit does function only for a split second

本文关键字：一瞬间 起作用 提交 HTML      更新时间：2023-11-16

每当我单击提交时，它都会执行该功能，但只显示一瞬间，然后消失。对不起，我不能提供更多的细节，我还是html和JavaScript的新手，所以我真的不明白哪里出了问题。

JavaScript

   function addtext() {
       var user = document.login.user.value;
       var pass = document.login.pass.value;
       var email = document.login.email.value;
       var phone = document.login.phone.value;
       document.writeln("Thank you for taking time to visit us. We will contact you as soon as possible.");
       document.writeln("<pre>");
       document.writeln("Welcome       : " + user + " The details you entered are as followed:");
       document.writeln("Username      : " + user);
       document.writeln("Password      : " + pass);
       document.writeln("Email Address : " + email);
       document.writeln("Phone         : " + phone);
   }

HTML

 <form name="login" method=post onsubmit="addtext()">
   <label for="user">Username</label>
   <input type="text" name="user" placeholder="Username" pattern="^[A-Za-z0-9_]{1,15}$" title="15 maximum characters.">
     <br>
   <label for="pass">Password</label>
   <input type="text" name="pass" placeholder="Password" pattern="(?=^.{6,9}$)((?=.*'d)|(?=.*'W+))(?![.'n])(?=.*[A-Z])(?=.*[a-z]).*$" title="Must have one upper case and one lower case. Minimum chars 6, Maximum Chars 9">
     <br>
   <label for="email">Email Address</label>
   <input type="text" name="email" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+'.[a-z]{2,3}$" title="Please enter a valid email address">
     <br>
   <label for="phone">Phone</label>
   <input type="text" name="phone" placeholder="Phone Number" pattern="[0-9]{1,}" title="Please enter a valid phone number(numbers
   only)">
     <br>
   <input type="submit">
 </form>

您在form中有一个submit按钮，它将reload submit之后的页面。

使用return false;

 function addtext() {
   var user = document.login.user.value;
   var pass = document.login.pass.value;
   var email = document.login.email.value;
   var phone = document.login.phone.value;
   document.writeln("Thank you for taking time to visit us. We will contact you as soon as possible.");
   document.writeln("<pre>");
   document.writeln("Welcome       : " + user + " The details you entered are as followed:");
   document.writeln("Username      : " + user);
   document.writeln("Password      : " + pass);
   document.writeln("Email Address : " + email);
   document.writeln("Phone         : " + phone);
   return false;
 }
<form name="login" method=post onsubmit="return addtext()">
  <label for="user">Username</label>
  <input type="text" name="user" placeholder="Username" pattern="^[A-Za-z0-9_]{1,15}$" title="15 maximum characters.">
  <br>
  <label for="pass">Password</label>
  <input type="text" name="pass" placeholder="Password" pattern="(?=^.{6,9}$)((?=.*'d)|(?=.*'W+))(?![.'n])(?=.*[A-Z])(?=.*[a-z]).*$" title="Must have one upper case and one lower case. Minimum chars 6, Maximum Chars 9">
  <br>
  <label for="email">Email Address</label>
  <input type="text" name="email" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+'.[a-z]{2,3}$" title="Please enter a valid email address">
  <br>
  <label for="phone">Phone</label>
  <input type="text" name="phone" placeholder="Phone Number" pattern="[0-9]{1,}" title="Please enter a valid phone number(numbers
   only)">
  <br>
  <input type="submit">
</form>

相关文章：