-2

document.getElementById("error").style.display = "none";
    
    
  var errormessage = "";
  var fieldmissing = "";
   
  function isEmail(email) {
  
            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  
                return regex.test(email);
                
        }
  
  
   
   
  const form = document.querySelector('form');
  const errorMessage = document.getElementById("error");
  const successMessage = document.getElementById("success");

  form.addEventListener('submit', (event) => {

   if(thereIsAnError()){
    event.preventDefault();
    errorMessage.style.display = "block";
    addedtoerror();
   }
 

  })

  var er = $("#error").html();

  function thereIsAnError(){
   return true; 
  }
  
  function addedtoerror() {
   if ($("#email").val() == "") {
     fieldmissing += "email address   ";
   } 
   else {
    if (isEmail($("#email").val()) == false) {
      errormessage += " Please enter a valid email. ,";
    
    }
   }
   
   if ($("#subject").val() == "") {
     fieldmissing += "subject   ";
   }
   
   if ($("#content").val() == "") {
     fieldmissing += "content   ";
   }
   if (fieldmissing != "") {
    errormessage += "The following field(s) are missing:   " + fieldmissing;
    $("#error").html(er + "<strong>Error! &nbsp;</strong>" + errormessage);
    $("#error").css("backgroundColor", "#ff2400");
   } 
   else {
    $("#error").css("backgroundColor", "lime");
    $("#error").html(er + "<strong>Success! &nbsp; Thanks for contacting us. We will get back soon.</strong>" );

   }
  
  }
     
body {
    margin : 0;
    padding : 0;
    background-image : url('images/196-1963826_abstract-color-wallpaper-hd.jpg');
    background-position : center;
    background-repeat : no-repeat;
    background-size : fit;
   
   }
   
   .container {
    width : 500px;
    height : 650px;
    background-image : url('images/photo-1525847185619-02460ddde30d.jpg');
    text-align : center;
    postion : absolute;
    z-index : 0;
    margin-left : 30%;
    color : #ffffff;
   }
   h1 {
    font-size : 50px;
    margin-top : 50px;
    padding-top : 20px;
    padding-bottom : -10px;
   }
   
   h4 {
    position : relative;
    margin-top : -30px;
   }
   
   .email {
    margin-top : 100px;
    font-size : 25px;
    font-weight : bold;
   }
   
   .textholder {
    width : 50%;
    padding : 7px;
    border-radius : 30px;
    align : text-align;
   }
   
   h6 {
   font-size : 15px;
   margin-top : 3px;
   color:#00ffff;
   }
   
   .subject {
    margin-top : -05px;
    font-size : 25px;
    font-weight : bold;
   }
   
    .ftr {
    margin-top : 50px;
    font-size : 25px;
    font-weight : bold;
   }
   
   .texta {
    width : 400px;
   }
   
   .submit {
    padding :5px;
    width : 80px;
    color : #1c8adb;
    border-radius : 20px;
    margin-top : 40px;
   }
   
   .submit:hover {
    padding :5px;
    width : 80px;
    color : #ffffff;
    background-color :  #1c8adb;
    border-radius : 20px;
    margin-top : 40px;
   }
   
   footer {
    background-color : #FFA500;
    padding : 20px;
    margin-left : -10px;
    width : 100%;
    height : 40px;
    position : relative;
    margin-top : 50px;
    margin-bottom : -10px;
   }
   
   .contact {
    float : right;
    margin-right : 15px;
    font-weight : bold;
    margin-bottom : 10px;
   }
   .bgrnd {
    float : left;
    margin-left : 100px;
    font-weight : bold;
   }
   .spnsr {
    float : left;
    margin-left : 100px;
    font-weight : bold;
    margin-bottom : 10px;
   }
   
   .imag {
    position : absolute;
    z-index : 1;
    margin-bottom : 10px;
    padding-bottom : 10px;
   }
      
   .alert-er {
    padding: 20px;
    background-color: #ff2400;
    color: #ffffff;
    font-size : 20px;
    border : 1px solid white;
    border-radius : 20px;
    text-align : left;
    
   }

   .closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bolder;
    float: right;
    font-size: 40px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
   }

   .closebtn:hover {
    color: black;
   }
<?php

    $error = ""; $successMessage = "";

    if ($_POST) {
        
        if (!$_POST["email"]) {
            
            $error .= "An email address is required.<br>";
            
        }
        
        if (!$_POST["content"]) {
            
            $error .= "The content field is required.<br>";
            
        }
        
        if (!$_POST["subject"]) {
            
            $error .= "The subject is required.<br>";
            
        }
        
        if ($_POST['email'] && filter_var($_POST["email"], FILTER_VALIDATE_EMAIL) === false) {
            
            $error .= "The email address is invalid.<br>";
            
        }
        
        if ($error != "") {
            
            $error = '<div class="alert alert-danger" role="alert"><p>There were error(s) in your form:</p>' . $error . '</div>';
            
        } else {
            
            $emailTo = "csense2653@gmail.com";
            
            $subject = $_POST['subject'];
            
            $content = $_POST['content'];
            
            $headers = "From: ".$_POST['email'];
            
            if (mail($emailTo, $subject, $content, $headers)) {
                
                $successMessage = '<div class="alert alert-success" role="alert">Your message was sent, we\'ll get back to you ASAP!</div>';
                
                
            } else {
                
                $error = '<div class="alert alert-danger" role="alert"><p><strong>Your message couldn\'t be sent - please try again later</div>';
                
                
            }
            
        }
        
        
        
    }

?>
<div id="error" class="alert-er">
   <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
   
  </div>

  <div class="container">
 
  <header>
   <h1>Contact Us</h1>
   <h4>Send Us Your Queries<h4>
  </header>
  <div> </div>
  <form method="post">
   <div class="email">
    <label for="email">Email-Id</label> 
    <input type="email" class="textholder" id="email" name="email" placeholder="Do care to enter email">
    <h6>We'll never share your email with anyone else.</h6>
<br>  </div>
   <div class="subject">
    <label for="subject">Subject:</label>
    <input type="text" class="textholder" id="subject" name="subject" placeholder="please care to enter a subject">
<br>  </div>
   <div class="ftr">
    <label for="texta">How would you like our help?</label>
    <textarea class="texta" id="content" name="content" rows="8" ></textarea>
   </div>
   <button type="submit" id="submit" class="submit">Submit</button>
  
  </form>
 
 
  </div>
  
  <p class="imag">
  <img src="logo_S0a_2.ico" alt="logo website" width="100px" height="100px">
  </p>
  
  <footer>
   <div class="contact">
    contact us: +91 7782848946 <br>
    or email us at admin@gentlemensidea.com
    <br> &copy; 2020 Gentlemens' Idea, Inc. All rights reserved.
   </div>
   <div class="bgrnd">
    The image in the background belongs to its copyrighted owner and not me.
   </div>
   <div class="spnsr" link="blue">
    This site is being hosted at ecowebhosting.
    site hosting and ip address may change. <br>
    For any queries,complaints or updates related to website..
    email us at <a href="https://www.gmail.com" target="_blank">admin@gentlemensidea.com</a>
   </div>
  
  </footer>

  </div>

it works fine with some bugs in my browser and .html extension but as soon as i upload it to integrate it with my .php files and run it. it's creating a mess with the alert box i just created. and as i am not so good with .php files, i wouldn't mind if someone could help me with this. do care to help.

Common Sense
  • 14
  • 4

1 Answers1

0

With basic HTML and jQuery, I am unable to replicate the issue as you reported it.

I tested with the following snippet.

document.getElementById("error").style.display = "none";

var errormessage = "";
var fieldmissing = "";

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

const form = document.querySelector('form');
const errorMessage = document.getElementById("error");
const successMessage = document.getElementById("success");

form.addEventListener('submit', (event) => {
  if (thereIsAnError()) {
    event.preventDefault();
    errorMessage.style.display = "block";
    addedtoerror();
  }
});

var er = $("#error").html();

function thereIsAnError() {
  return true;
}

function addedtoerror() {
  if ($("#email").val() == "") {
    fieldmissing += "email address &nbsp; ";
  } else {
    if (isEmail($("#email").val()) == false) {
      errormessage += " Please enter a valid email. ,";
    }
  }

  if ($("#subject").val() == "") {
    fieldmissing += "subject &nbsp; ";
  }

  if ($("#content").val() == "") {
    fieldmissing += "content &nbsp; ";
  }
  if (fieldmissing != "") {
    errormessage += "The following field(s) are missing:  &nbsp;" + fieldmissing;
    $("#error").html(er + "<strong>Error! &nbsp;</strong>" + errormessage);
    $("#error").css("backgroundColor", "#ff2400");
  } else {
    $("#error").css("backgroundColor", "lime");
    $("#error").html(er + "<strong>Success! &nbsp; Thanks for contacting us. We will get back soon.</strong>");
  }
}
body {
  margin: 0;
  padding: 0;
  background-image: url('images/196-1963826_abstract-color-wallpaper-hd.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: fit;
}

.container {
  width: 500px;
  height: 650px;
  background-image: url('images/photo-1525847185619-02460ddde30d.jpg');
  text-align: center;
  postion: absolute;
  z-index: 0;
  margin-left: 30%;
  color: #ffffff;
}

h1 {
  font-size: 50px;
  margin-top: 50px;
  padding-top: 20px;
  padding-bottom: -10px;
}

h4 {
  position: relative;
  margin-top: -30px;
}

.email {
  margin-top: 100px;
  font-size: 25px;
  font-weight: bold;
}

.textholder {
  width: 50%;
  padding: 7px;
  border-radius: 30px;
  align: text-align;
}

h6 {
  font-size: 15px;
  margin-top: 3px;
  color: #00ffff;
}

.subject {
  margin-top: -05px;
  font-size: 25px;
  font-weight: bold;
}

.ftr {
  margin-top: 50px;
  font-size: 25px;
  font-weight: bold;
}

.texta {
  width: 400px;
}

.submit {
  padding: 5px;
  width: 80px;
  color: #1c8adb;
  border-radius: 20px;
  margin-top: 40px;
}

.submit:hover {
  padding: 5px;
  width: 80px;
  color: #ffffff;
  background-color: #1c8adb;
  border-radius: 20px;
  margin-top: 40px;
}

footer {
  background-color: #FFA500;
  padding: 20px;
  margin-left: -10px;
  width: 100%;
  height: 40px;
  position: relative;
  margin-top: 50px;
  margin-bottom: -10px;
}

.contact {
  float: right;
  margin-right: 15px;
  font-weight: bold;
  margin-bottom: 10px;
}

.bgrnd {
  float: left;
  margin-left: 100px;
  font-weight: bold;
}

.spnsr {
  float: left;
  margin-left: 100px;
  font-weight: bold;
  margin-bottom: 10px;
}

.imag {
  position: absolute;
  z-index: 1;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.alert-er {
  padding: 20px;
  background-color: #ff2400;
  color: #ffffff;
  font-size: 20px;
  border: 1px solid white;
  border-radius: 20px;
  text-align: left;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bolder;
  float: right;
  font-size: 40px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="error" class="alert-er">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
</div>
<div class="container">
  <header>
    <h1>Contact Us</h1>
    <h4>Send Us Your Queries</h4>
  </header>
  <div> </div>
  <form method="post">
    <div class="email">
      <label for="email">Email-Id</label>
      <input type="email" class="textholder" id="email" name="email" placeholder="Do care to enter email">
      <h6>We'll never share your email with anyone else.</h6>
      <br> </div>
    <div class="subject">
      <label for="subject">Subject:</label>
      <input type="text" class="textholder" id="subject" name="subject" placeholder="please care to enter a subject">
      <br> </div>
    <div class="ftr">
      <label for="texta">How would you like our help?</label>
      <textarea class="texta" id="content" name="content" rows="8"></textarea>
    </div>
    <button type="submit" id="submit" class="submit">Submit</button>
  </form>
  <p class="imag">
    <img src="logo_S0a_2.ico" alt="logo website" width="100px" height="100px">
  </p>
  <footer>
    <div class="contact">
      contact us: +91 7782848946 <br> or email us at admin@gentlemensidea.com
      <br> &copy; 2020 Gentlemens' Idea, Inc. All rights reserved.
    </div>
    <div class="bgrnd">
      The image in the background belongs to its copyrighted owner and not me.
    </div>
    <div class="spnsr" link="blue">
      This site is being hosted at ecowebhosting. site hosting and ip address may change. <br> For any queries,complaints or updates related to website.. email us at <a href="https://www.gmail.com" target="_blank">admin@gentlemensidea.com</a>
    </div>
  </footer>
</div>

Your code has some HTML Syntax issues and I would not advise using vanilla JavaScript mixed with jQuery. Would use one or the other.

Again, as I advised in your previous post, I strongly suggest separating your HTML and PHP. Use the PHP as an API.

Twisty
  • 27,669
  • 1
  • 25
  • 43