CODEWITHSUNDEEP
javascriptphphtml
CoopDaddio
CoopDaddio

Reputation: 637

Form is not sending email?

I have created a form that appears when a button is pressed. However, when the final submit button is pressed the final email is not sent. Where are the errors in my code?

// JavaScript Document
// Validating Empty Field
function check_empty() {
    if (document.getElementById('name').value == "" || document.getElementById('email').value == "") {
      alert("Please fill out all fields.");
    } else {
      alert("Order Successful!");
    }
  }
  //Function To Display Popup

function div_show1() {
  document.getElementById("ordertype").innerHTML = "$400 Website Order";
  document.getElementById('abc').style.display = "block";
}

function div_show2() {
  document.getElementById("ordertype").innerHTML = "$500 Website Order";
  document.getElementById('abc').style.display = "block";
}

function div_show3() {
    document.getElementById("ordertype").innerHTML = "$700 Website Order";
    document.getElementById('abc').style.display = "block";
  }
  //Function to Hide Popup

function div_hide() {
  document.getElementById('abc').style.display = "none";
}
@charset "utf-8";

/* CSS Document */

#abc {
  width: 100%;
  height: 100%;
  opacity: 0.97;
  top: 0;
  left: 0;
  display: none;
  position: fixed;
  background-color: #313131;
  overflow: auto;
  z-index: 9999999;
}
img#close {
  position: absolute;
  right: -14px;
  top: -14px;
  cursor: pointer;
}
div#popupContact {
  position: absolute;
  left: 50%;
  top: 17%;
  margin-left: -202px;
  font-family: coolfont;
}
form {
  max-width: 300px;
  min-width: 250px;
  padding: 10px 50px;
  border: 2px solid gray;
  border-radius: 10px;
  font-family: coolfont;
  background-color: #fff;
}
p {
  margin-top: 30px;
}
h2 {
  background-color: #FEFFED;
  padding: 20px 35px;
  margin: -10px -50px;
  text-align: center;
  border-radius: 10px 10px 0 0;
  font-family: info;
}
hr {
  margin: 10px -50px;
  border: 0;
  border-top: 1px solid #ccc;
}
input[type=text] {
  width: 82%;
  padding: 10px;
  margin-top: 30px;
  border: 1px solid #ccc;
  padding-right: 40px;
  font-size: 16px;
  font-family: coolfont;
}
textarea {
  width: 82%;
  height: 95px;
  padding: 10px;
  resize: none;
  margin-top: 30px;
  border: 1px solid #ccc;
  padding-right: 40px;
  font-size: 16px;
  font-family: coolfont;
  margin-bottom: 30px;
}
#submit {
  text-decoration: none;
  width: 100%;
  text-align: center;
  display: block;
  background-color: #FFBC00;
  color: #fff;
  border: 1px solid #FFCB00;
  padding: 10px 0;
  font-size: 20px;
  cursor: pointer;
  border-radius: 5px;
}
@media only screen and (max-width: 457px) {
  form {
    max-width: 200px;
    min-width: 150px;
    padding: 10px 50px;
    margin-left: 50px;
  }
  input[type=text] {
    padding-right: 30px;
  }
  textarea {
    padding-right: 30px;
  }
}
@media only screen and (max-width: 365px) {
  form {
    max-width: 140px;
    min-width: 90px;
    padding: 10px 50px;
    margin-left: 80px;
  }
  input[type=text] {
    padding-right: 10px;
  }
  textarea {
    padding-right: 10px;
  }
}
<head>
  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <link href="elements.css" rel="stylesheet">
  <script src="my_js.js"></script>
</head>

<body>
  <a class="button" id="popup" onclick="div_show1()">ORDER NOW</a>
  <a class="button" id="popup" onclick="div_show2()">ORDER NOW</a>
  <a class="button" id="popup" onclick="div_show3()">ORDER NOW</a>
  <div id="abc">
    <!-- Popup Div Starts Here -->
    <div id="popupContact">
      <!-- Contact Us Form -->
      <form action="form.php" id="form" method="post" name="form" enctype="multipart/form-data">
        <img id="close" src="images/redcross.png" width="50" onclick="div_hide()">
        <h2 id="ordertype" name="ordertype">$400 Website Order</h2>
        <hr>
        <input id="name" name="name" placeholder="Name" type="text">
        <input id="email" name="email" placeholder="Email" type="text">
        <textarea id="msg" name="message" placeholder="Comments/Questions"></textarea>
        <a href="javascript:%20check_empty()" id="submit">Order</a>
      </form>
    </div>
    <!-- Popup Div Ends Here -->
  </div>
</body>

<? php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = '#';
$to = '[email protected]';
$subject = $ordertype;
$body = "From: ".$name.
"\r\n E-Mail: ".$email.
"\r\n Message: \r\n".$message;

if (isset($_POST['submit'])) {
  if (mail($to, $subject, $body, $from)) {
    echo '<script>
            alert("Message successfully sent.");
      </script>';
  } else {
    echo '<p>Something went wrong, go back and try again!</p>';
  }
}

?>

The last code snippet attached is the form.php file, which I have tried to link to within the html.

Upvotes: 1

Views: 113

Answers (1)

CoopDaddio
CoopDaddio

Reputation: 637

I discovered that everything was working, but it needed to be uploaded to the hosting server for it to successfully send emails. This is the solution.

Upvotes: 1

Related Questions