成功提交联系表格

时间:2014-04-02 03:05:06

标签: php ajax contact-form

您好我有一个使用PHP AJAX的联系表格,但填写表格,它是成功的,但当我尝试再次填写表格时它不提交,除非我刷新页面,它将再次恢复正常。这会是什么问题?

由于

HTML代码

<form role="form" id="feedbackForm" method="POST">
                                            <div class="col-lg-6">
                                              <div class="form-group">
                                                <label class="control-label" for="textinput">First Name<span class="required">*</span></label>
                                                <input type="text" class="form-control required" id="first_name" name="first_name" placeholder="Enter your First Name"/>
                                                <span class="help-block" style="display: none;">Please enter your first name.</span>
                                              </div>
                                              <div class="form-group">
                                                <label class="control-label" for="textinput">Last Name<span class="required">*</span></label>
                                                <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Enter your Last Name"/>
                                                <span class="help-block" style="display: none;">Please enter your last name.</span>
                                              </div>
                                              <div class="form-group">
                                                <label class="control-label" for="textinput">Email Address<span class="required">*</span></label>
                                                <input type="email" class="form-control" id="email" name="email" placeholder="Enter your email address"/>
                                                <span class="help-block" style="display: none;">Please enter a valid e-mail address.</span>
                                              </div>
                                            <div id="companyname_con" class="form-group">
                                             <label class="control-label" for="textinput">Company Name</label>
                                             <input type="text" class="form-control" id="company_name" name="company_name" placeholder="Enter your company name">
                                              </div>
                                              <div class="form-group">
                                                <label class="control-label" for="textinput">Message<span class="required">*</span></label>
                                                <textarea rows="10" cols="100" class="form-control" id="contact_message" name="contact_message" placeholder="Enter your message"></textarea>
                                                <span class="help-block" style="display: none;">Please enter a message.</span>
                                              </div>
                                              </div>
                                              <div class="col-lg-6">
                                                <div class="form-group">
                                                  <label for="selectbasic">How did you hear about us?</label>
                                                  <select id="selectbasic" name="selectbasic" class="form-control">
                                                    <option value="None">Select</option>
                                                    <option value="Search Engine">Search engine</option>
                                                    <option value="Microsoft DPE">Microsoft DPE</option>
                                                    <option value="Microsoft Event">Microsoft event</option>
                                                    <option value="Social Media">Social media</option>
                                                    <option value="Word of Mouth">Word of mouth</option>
                                                    <option value="Other">Other</option>
                                                  </select>
                                                </div>
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox" id="emailUpdates" name="emailUpdates" value="Yes"> Please keep me informed of kinectAPI product updates and news
                                                    </label>
                                                </div>


                                              <img id="captcha" src="library/vender/securimage/securimage_show.php" alt="CAPTCHA Image" />
                                              <a href="#" onclick="document.getElementById('captcha').src = 'library/vender/securimage/securimage_show.php?' + Math.random(); return false" class="btn btn-green btn-sm">Show a Different Image</a><br/>
                                              <div class="form-group" style="margin-top: 10px;">
                                                <input type="text" class="form-control" name="captcha_code" id="captcha_code" placeholder="For security, please enter the code displayed in the box." />
                                                <span class="help-block" style="display: none;">Please enter the code displayed within the image.</span>
                                              </div>

                                              <span class="help-block" style="display: none;">Please enter a the security code.</span>
                                              <button type="submit" id="feedbackSubmit" class="btn btn-purple btn-md message-btn">Submit Message</button>
                                            </div>
                            </form>

PHP代码

<?php
 //start a session -- needed for Securimage Captcha check
 session_start();

//add you e-mail address here
define("MY_EMAIL", "dummy@email.com");

/**
* Sets error header and json error message response.
*
* @param  String $messsage error message of response
* @return void
*/
function errorResponse ($contact_message) {
header('HTTP/1.1 500 Internal Server Error');
die(json_encode(array('message' => $contact_message)));
}

 /**
  * Return a formatted message body of the form:
  * Name: <name of submitter>
  * Comment: <message/comment submitted by user>
  *
  * @param String $name     name of submitter
  * @param String $messsage message/comment submitted
  */
 function setMessageBody ($first_name, $last_name, $email, $company_name,       
  $contact_message, $selectbasic) {
 $message_body .= "First Name: " . $first_name."\n\n";
 $message_body .= "Last Name: " . $last_name."\n\n";
 $message_body .= "Email: " . $email."\n\n";
 $message_body .= "Company Name:" . $company_name."\n\n";
 $message_body .= "Message:" . $contact_message. "\n\n";
 $message_body .= "How did you hear about us?" . $selectbasic."\n\n";
 return $message_body;
 }
 $first_name = $_POST['first_name'];
 $last_name = $_POST['last_name'];  
 $email = $_POST['email']; 
 $company_name = $_POST['company_name']; 
 $contact_message = $_POST['contact_message'];
 $selectbasic = $_POST['selectbasic'];

 header('Content-type: application/json');
 //do some simple validation. this should have been validated on the client-side also
 if (empty($email) || empty($contact_message)) {
 errorResponse('Email or message is empty.');
 }
 //do Captcha check, make sure the submitter is not a robot:)...
 include_once './vender/securimage/securimage.php';
 $securimage = new Securimage();
 if (!$securimage->check($_POST['captcha_code'])) {
 errorResponse('Invalid Security Code');
}

//try to send the message
if(mail(MY_EMAIL, "Contact Form Results", setMessageBody($_POST["first_name"],      
$_POST["last_name"], $_POST["email"], $_POST["company_name"], $_POST["contact_message"],    
$_POST["selectbasic"]), "From: $email")) {
echo json_encode(array('message' => 'Your message was successfully sent'));

} else {
header('HTTP/1.1 500 Internal Server Error');
echo json_encode(array('message' => 'Unexpected error while attempting to send e-    
mail.'));
}
?>

JS代码

$(document).ready(function() {
$("#feedbackSubmit").click(function() {
//clear any errors
contactForm.clearErrors();

//do a little client-side validation -- check that each field has a value and e-mail field is in proper format
var hasErrors = false;
$('#feedbackForm input,textarea').each(function() {
  if (!$(this).val()) {
    hasErrors = true;
    contactForm.addError($(this));
  }
});
var $email = $('#email');
if (!contactForm.isValidEmail($email.val())) {
  hasErrors = true;
  contactForm.addError($email);
}

//if there are any errors return without sending e-mail
if (hasErrors) {
  return false;
}

    //mailchimp trigger
 if($('#emailUpdates').prop('checked')) {
    $.ajax({
        type: "POST",
        url: 'subscribe.php',
        data: 'ajax=true&email=' + escape($('#email').val())
    });
}

//send the feedback e-mail
$.ajax({
  type: "POST",
  url: "library/sendmail.php",
  data: $("#feedbackForm").serialize(),
  success: function(data)
  {
    contactForm.addAjaxMessage(data.message, false);
    //get new Captcha on success
    $('#captcha').attr('src', 'library/vender/securimage/securimage_show.php?' +       
    Math.random());
  },
  error: function(response)
  {
    contactForm.addAjaxMessage(response.responseJSON.message, true);
  }
  });
    $('#feedbackForm input,textarea,select').val('');
    return false;
 }); 

});

//namespace as not to pollute global namespace
var contactForm = {
isValidEmail: function (email) {
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
},
clearErrors: function () {
$('#emailAlert').remove();
$('#feedbackForm .help-block').hide();
$('#feedbackForm .form-group').removeClass('has-error');
},
addError: function ($input) {
$input.siblings('.help-block').show();
$input.parent('.form-group').addClass('has-error');
},
 addAjaxMessage: function(msg, isError) {
  $("#feedbackSubmit").after('<div id="emailAlert" class="alert alert-' + (isError ?    
'danger' : 'success') + '" style="margin-top: 5px;">' + $('<div/>').text(msg).html() +    
'</div>');
}
};

0 个答案:

没有答案