提交按钮在Bootstrap联系宿舍中不起作用

时间:2017-04-10 16:52:34

标签: javascript php jquery html twitter-bootstrap

我有联系表单的html,js和php文件,但由于某种原因,表单没有响应而且没有发送电子邮件。 我很感激你的帮助。

JS / HTML

$(document).ready(function() {

  $("#contact-form [type='submit']").click(function(e) {
    e.preventDefault();

    // Get input field values of the contact form
    var user_name = $('input[name=name]').val();
    var user_email = $('input[name=email-address]').val();
    var user_company = $('input[name=company-name]').val();
    var user_subject = $('input[name=subject]').val();
    var user_message = $('textarea[name=message]').val();

    // Datadata to be sent to server
    post_data = {
      'userName': user_name,
      'userEmail': user_email,
      'userCompany': user_company,
      'userSubject': user_subject,
      'userMessage': user_message
    };

    // Ajax post data to server
    $.post('/php/contact-me.php', post_data, function(response) {

      // Load json data from server and output message
      if (response.type == 'error') {

        output = '<div class="error-message"><p>' + response.text + '</p></div>';

      } else {

        output = '<div class="success-message"><p>' + response.text + '</p></div>';

        // After, all the fields are reseted
        $('#contact-form input').val('');
        $('#contact-form textarea').val('');

      }

      $("#answer").hide().html(output).fadeIn();

    }, 'json');

  });

  // Reset and hide all messages on .keyup()
  $("#contact-form input, #contact-form textarea").keyup(function() {
    $("#answer").fadeOut();
  });

});
<form id="contact-form" name="contact-form" method="POST" data-name="Contact Form">


  <div class="row">

    <!-- Full name -->
    <div class="col-xs-12 col-sm-6 col-lg-6">
      <div class="form-group">
        <input type="text" id="name" class="form form-control" placeholder="Your Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Name'" name="name" data-name="Name" required>
      </div>
    </div>

    <!-- E-mail -->
    <div class="col-xs-12 col-sm-6 col-lg-6">
      <div class="form-group">
        <input type="email" id="email" class="form form-control" placeholder="Your Email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Email'" name="email-address" data-name="Email Address" required>
      </div>
    </div>

    <!-- Company name -->
    <div class="col-xs-12 col-sm-12 col-lg-12">
      <div class="form-group">
        <input type="text" id="company" class="form form-control" placeholder="Company name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Company name'" name="company-name" data-name="Company Name">
      </div>
    </div>
    <!-- Subject -->
    <div class="col-xs-12 col-sm-12 col-lg-12">
      <div class="form-group">
        <input type="text" id="subject" class="form form-control" placeholder="Write the subject" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Write the subject'" name="subject" data-name="Subject">
      </div>
    </div>

    <!-- Message -->
    <div class="col-xs-12 col-sm-12 col-lg-12 no-padding">
      <div class="form-group">
        <textarea id="text-area" class="form textarea form-control" placeholder="Your message here... 20 characters Min." onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your message here... 20 characters Min.'" name="message" data-name="Text Area"
          required></textarea>
      </div>
    </div>

  </div>

  <!-- Button submit -->
  <button type="submit" id="valid-form" class="btn btn-color">Send my Message ></button>

</form>

这里是php文件

<?php
if($_POST) {

    $to_Email = "email@gmyemail; // Write your email here

    // Use PHP To Detect An Ajax Request
    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {

        // Exit script for the JSON data
        $output = json_encode(
        array(
            'type'=> 'error',
            'text' => 'Request must come from Ajax'
        ));

        die($output);
    }

    // Checking if the $_POST vars well provided, Exit if there is one missing
    if(!isset($_POST["userName"]) || !isset($_POST["userEmail"]) || !isset($_POST["userSubject"]) || !isset($_POST["userMessage"])) {

        $output = json_encode(array('type'=>'error', 'text' => '<i class="icon ion-close-round"></i> Input fields are empty!'));
        die($output);
    }

    // PHP validation for the fields required
    if(empty($_POST["userName"])) {
        $output = json_encode(array('type'=>'error', 'text' => '<i class="icon ion-close-round"></i> We are sorry but your name is too short or not specified.'));
        die($output);
    }

    if(!filter_var($_POST["userEmail"], FILTER_VALIDATE_EMAIL)) {
        $output = json_encode(array('type'=>'error', 'text' => '<i class="icon ion-close-round"></i> Please enter a valid email address.'));
        die($output);
    }
    // PHP validation for the fields required
    if(empty($_POST["userCompany"])) {
        $output = json_encode(array('type'=>'error', 'text' => '<i class="icon ion-close-round"></i> We are sorry but your name is too short or not specified.'));
        die($output);
    }
    // To avoid the spammy bots, you can change the value of the minimum characters required. Here it's <20
    if(strlen($_POST["userMessage"])<20) {
        $output = json_encode(array('type'=>'error', 'text' => '<i class="icon ion-close-round"></i> Too short message! Take your time and write a few words.'));
        die($output);
    }

    // Proceed with PHP email
    $headers = 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type:text/html;charset=UTF-8' . "\r\n";
    $headers .= 'From: My website' . "\r\n";
    $headers .= 'Reply-To: '.$_POST["userEmail"]."\r\n";

    'X-Mailer: PHP/' . phpversion();

    // Body of the Email received in your Mailbox
    $emailcontent = 'Hey! You have received a new message from the visitor <strong>'.$_POST["userName"].'</strong><br/><br/>'. "\r\n" .
                'His message: <br/> <em>'.$_POST["userMessage"].'</em><br/><br/>'. "\r\n" .
                '<strong>Feel free to contact '.$_POST["userName"].' via email at : '.$_POST["userEmail"].'</strong>' . "\r\n" ;

    $Mailsending = @mail($to_Email, $_POST["userSubject"], $emailcontent, $headers);

    if(!$Mailsending) {

        //If mail couldn't be sent output error. Check your PHP email configuration (if it ever happens)
        $output = json_encode(array('type'=>'error', 'text' => '<i class="icon ion-close-round"></i> Oops! Looks like something went wrong, please check your information one more time.'));
        die($output);

    } else {
        $output = json_encode(array('type'=>'message', 'text' => '<i class="icon ion-checkmark-round"></i> Hello '.$_POST["userName"] .', Your message has been sent, we will get back to you asap !'));
        die($output);
    }
}
?>

2 个答案:

答案 0 :(得分:0)

您的PHP代码中似乎有语法错误

$to_Email = "email@gmyemail; // Write your email here

应该更改为$to_Email = "email@gmyemail"; // Write your email here 顺便说一句,如果不是问题,请启用PHP调试模式并检查错误日志。这可以帮助您找到问题。

答案 1 :(得分:0)

如果我添加jQuery并更改为表单的.on("submit",则可以正常工作。

$(document).ready(function() {

  $("#contact-form").on("submit",function(e) {
    e.preventDefault();

    // Get input field values of the contact form
    var user_name = $('input[name=name]').val();
    var user_email = $('input[name=email-address]').val();
    var user_company = $('input[name=company-name]').val();
    var user_subject = $('input[name=subject]').val();
    var user_message = $('textarea[name=message]').val();

    // Datadata to be sent to server
    post_data = {
      'userName': user_name,
      'userEmail': user_email,
      'userCompany': user_company,
      'userSubject': user_subject,
      'userMessage': user_message
    };

    // Ajax post data to server
    $.post('/php/contact-me.php', post_data, function(response) {

      // Load json data from server and output message
      if (response.type == 'error') {

        output = '<div class="error-message"><p>' + response.text + '</p></div>';

      } else {

        output = '<div class="success-message"><p>' + response.text + '</p></div>';

        // After, all the fields are reseted
        $('#contact-form input').val('');
        $('#contact-form textarea').val('');

      }

      $("#answer").hide().html(output).fadeIn();

    }, 'json');

  });

  // Reset and hide all messages on .keyup()
  $("#contact-form input, #contact-form textarea").keyup(function() {
    $("#answer").fadeOut();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="contact-form" name="contact-form" method="POST" data-name="Contact Form">


  <div class="row">

    <!-- Full name -->
    <div class="col-xs-12 col-sm-6 col-lg-6">
      <div class="form-group">
        <input type="text" id="name" class="form form-control" placeholder="Your Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Name'" name="name" data-name="Name" required>
      </div>
    </div>

    <!-- E-mail -->
    <div class="col-xs-12 col-sm-6 col-lg-6">
      <div class="form-group">
        <input type="email" id="email" class="form form-control" placeholder="Your Email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Email'" name="email-address" data-name="Email Address" required>
      </div>
    </div>

    <!-- Company name -->
    <div class="col-xs-12 col-sm-12 col-lg-12">
      <div class="form-group">
        <input type="text" id="company" class="form form-control" placeholder="Company name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Company name'" name="company-name" data-name="Company Name">
      </div>
    </div>
    <!-- Subject -->
    <div class="col-xs-12 col-sm-12 col-lg-12">
      <div class="form-group">
        <input type="text" id="subject" class="form form-control" placeholder="Write the subject" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Write the subject'" name="subject" data-name="Subject">
      </div>
    </div>

    <!-- Message -->
    <div class="col-xs-12 col-sm-12 col-lg-12 no-padding">
      <div class="form-group">
        <textarea id="text-area" class="form textarea form-control" placeholder="Your message here... 20 characters Min." onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your message here... 20 characters Min.'" name="message" data-name="Text Area"
          required></textarea>
      </div>
    </div>

  </div>

  <!-- Button submit -->
  <button type="submit" id="valid-form" class="btn btn-color">Send my Message ></button>

</form>