从输入表单获取电子邮件

时间:2018-02-13 20:01:01

标签: javascript php jquery html email

试图让它发挥作用。我知道我需要在邮件服务器上启动并运行才能使其正常工作,但是,我应该能够收到错误消息。因为当我在控制台中直接验证“成功”和“错误”功能下的代码时,它会起作用并显示消息。但是,当我按下提交按钮时,它没有。

- HTML -

   <div class="row">
        <form id="contactForm-1" name="sentMessage" novalidate>
           <div class="form-group">
             <input class="form-control" id="email-1" type="email" placeholder="Your Email *" required data-validation-required-message="Please enter your email address.">
             <p class="help-block text-danger"></p>
           </div>
        </form>
        <div class="clearfix"></div>
        <div class="col-lg-12 text-center">
        <div id="success-1"></div>
           <button id="sendMessageButton-1" class="btn btn-primary btn-xl text-uppercase" type="submit">Send Message</button>
        </div>

- JS -

 $(function() {

 $("#contactForm-1 input").jqBootstrapValidation({
   preventSubmit: true,
submitError: function($form, event, errors) {
  // additional error messages or events
},
submitSuccess: function($form, event) {
  event.preventDefault(); // prevent default submit behaviour
  // get values from FORM
  var email = $("input#email-1").val();
  // Check for white space in name for Success/Fail message
  $this = $("#sendMessageButton-1");
  $this.prop("disabled", true); // Disable submit button until AJAX call is complete to prevent duplicate messages
  $.ajax({
    url: "././mail/contact_me_start.php",
    type: "POST",
    data: {
      email: email
    },
    cache: false,
    success: function() {
      // Success message
      $('#success-1').html("<div class='alert alert-success'>");
      $('#success-1 > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
        .append("</button>");
      $('#success-1 > .alert-success')
        .append("<strong>Your message has been sent. </strong>");
      $('#success-1 > .alert-success')
        .append('</div>');
      //clear all fields
      $('#contactForm-1').trigger("reset");
    },
    error: function() {
      // Fail message
      $('#success-1').html("<div class='alert alert-danger'>");
      $('#success-1 > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
        .append("</button>");
      $('#success-1 > .alert-danger').append($("<strong>").text("Sorry, it seems that my mail server is not responding. Please try again later!"));
      $('#success-1 > .alert-danger').append('</div>');
      //clear all fields
      $('#contactForm-1').trigger("reset");
    },
    complete: function() {
      setTimeout(function() {
        $this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
      }, 1000);
    }
  });
},
filter: function() {
  return $(this).is(":visible");
   },
  });

  $("a[data-toggle=\"tab\"]").click(function(e) {
    e.preventDefault();
    $(this).tab("show");
  });
 });

- PHP -

   <?php
   // Check for empty fields
   if(empty($_POST['email'])     ||
   !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
   {
   echo "No arguments Provided!";
   return false;
   }

$email_address = strip_tags(htmlspecialchars($_POST['email']));

// Create the email and send the message
$to = 'yourname@yourdomain.com'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to.
$email_subject = "Website Contact Form: ";
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: \n\nEmail: $email_address\n\nPhone: \n\nMessage:";
$headers = "From: noreply@yourdomain.com"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
?>

1 个答案:

答案 0 :(得分:0)

您应该将submit按钮放在表单中以使其正常工作。