CODEWITHSUNDEEP
javascripthtml
Kyler
Kyler

Reputation: 39

HTML submit does function only for a split second

Whenever i click the submit it does the function but only shows it for a split second then disappears. Sorry i cant provide more details, im still new to html and JavaScript so i dont really understand whats wrong.

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>

Upvotes: 0

Views: 58

Answers (1)

Rayon
Rayon

Reputation: 36599

You have a submit button in the form and it will reload the page after submit.

Use 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>

Upvotes: 1

Related Questions