Html& Php联系表格与电子邮件提交

时间:2015-08-24 09:11:07

标签: php jquery html

Db连接

$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;
   }
}

&#13;
&#13;
$(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;
  });
});
&#13;
<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>
&#13;
&#13;
&#13;

问题是,当我点击提交时,数据未提交,实际上我会说点击提交按钮没有任何反应。错误不会发生,因此无法找出问题所在。我正在尝试构建一个可以发送邮件的联系表单。所以你也会得到一些与之相关的代码。

2 个答案:

答案 0 :(得分:0)

要提交您应该使用的表格:

 $('#contactForm').submit(function(){

    //your ajax function

     return false;

});

答案 1 :(得分:0)

尝试$(&#34; #contactForm&#34;)。serialize()而不是$(this).serialize()