Html和Php联系表单与电子邮件提交


Html & Php Contact Form with Email Submission

Db Connection

$server     = 'localhost:8080';
$username   = 'root';
$password   = '';
$database   = 'resort';
$connect    = mysqli_connect($server, $username, $password ) or die(mysqli_error.'error connecting to db');
//select database
mysqli_select_db ($database, $connect) or die(mysqli_error.'error selecting db');
if(!empty($_POST)){
    $name = $_POST['name'];
    $email      = $_POST['email'];
    $phone      = $_POST['phone'];
    $message    = $_POST['message'];
    $filtered_email = filter_var($email, FILTER_VALIDATE_EMAIL);
    if(!empty($name) && !empty($email) && !empty($message))
    {
      //insert the data into DB
      mysql_query("INSERT into contactform (contact_id, contact_name, contact_email, contact_phone, message )
                VALUES ('', '".$name."',
               '".$email."', '".$phone."',
               '".$message."' )") or die(mysqli_error());
        //prepare email headers
        $headers = "MIME-Version: 1.0'r'n";
        $headers .= "Content-type: text/html; charset=isoo-8859-1'r'n";
        $headers .= "From: ".$email."'r'n";
        $to = 'mahesh.gulve004@gmail.com,'.$email;
        $subject = 'Contact Form';
        $body       = 'From: <br/> Name: '.$name.' <br/>E-mail: '.$email.'<br/>Phone: '.$phone.'<br/>Message: '.$message;
         //before sending the email make sure that the email address is correct
        if ( $filtered_email == false ) {
            echo json_encode(array(
                'error' => true,
                'msg'   => "The email address entered it's not correct!"
            ));
            exit;
        }
        $mail       = mail($to, $subject, $body, $headers);
        //finally send the email
        if ( $mail ) {
            //finally send the ajax response
            echo json_encode(array(
                'error' => false
            ));
            exit;
        } else {
            //finally send the ajax response
            echo json_encode(array(
                'error' => true,
                'msg'   => "Opss...Something went wrong. Message was not sent!"
            ));
            exit;
        }
    } else {
        echo json_encode(array(
            'error' => true,
            'msg'   => "You haven't completed all required fileds!"
        ));
        exit;
   }
}

$(function() {
  //CONTACT FORM AJAX SUBMIT
  $('#send').click(function() {
    $.ajax({
      url: 'mailer.php',
      type: 'POST',
      dataType: 'json',
      data: $(this).serialize(),
      success: function(data) {
        console.log(data);
        if (data.error === true) {
          $('#error').css('display', 'block');
          var error = document.getElementById('error');
          error.innerHTML = data.msg;
          setTimeout(function() {
            window.scrollTo(0, 1);
          }, 100);
        } else {
          $('#note').show();
          $('#error').hide();
          $("#fields").hide();
        }
      }
    });
    return false;
  });
});
<div class="col-md-6">
  <div id="test-form" class="white-popup-block mfp-hide" style="width:400px;float:left;">
    <div id="formcontent">
      <div id="formheader" style="border-bottom:1px solid #e3e3e3;margin-bottom:20px;">
        <h1 style="color:#37bc9b;font-size:33px;">We will get back to you...</h1>
      </div>
      <fieldset style="border:0;">
        <div id="note">
          <h2>Message sent successfully!</h2>
        </div>
        <div class="contact-form">
          <form id="contactForm" method="post" action="">
            <div class="form-group">
              <label for="name">Name</label>
              <span id="name-info" class="info">
                    <input type="text" placeholder="" id="name" name="name" class="form-control demoInputBox">
                </div>
                <div class="form-group">
                  <label for="email">Email</label>
                  <span id="email-info" class="info">
                    <input type="text" placeholder="" id="email" name="email" class="form-control demoInputBox">
                </div>
                <div class="form-group">
                  <label for="phone">Phone</label>
                  <span id="phone-info" class="info">
                    <input type="text" id="phone" name="phone" class="form-control demoInputBox">
                </div>
                <div class="form-group">
                  <label for="message">Message</label>
                  <span id="message-info" class="info">
                    <textarea placeholder="" rows="5" id="message" name="message" class="form-control demoInputBox">
                    </textarea>
                </div>
                <input class="btn btn-info" id="send" type="submit" value="Submit"/>
              </form>
            </div>
      	  </fieldset>
        </div>
      </div>
    </div>
    <div id="error"></div>

问题是,当我点击提交数据没有提交,事实上我会说什么都没有发生点击提交按钮。没有出现错误,因此无法找出问题所在。我试图建立一个联系形式,可以发送邮件。所以你也会得到一些相关的代码

提交表单,您应该使用:

 $('#contactForm').submit(function(){
    //your ajax function
     return false;
});

尝试$("#contactForm").serialize()而不是$(this).serialize()