简体   繁体   English

PHP联系表格不起作用(3)

[英]PHP contact form doesn't work (3)

I'm creating php-ajax-jquery contact form following this tutorial http://www.sanwebe.com/2011/12/making-simple-jquery-ajax-contact-form 我正在按照本教程http://www.sanwebe.com/2011/12/making-simple-jquery-ajax-contact-form创建php-ajax-jquery联系表单

Looks like it works on localhost (it shows message that email sent), but it doesn't work on server. 看起来它适用于localhost(它显示发送电子邮件的消息),但它在服务器上不起作用。

Could you please help me with few questions: 你能帮我解决一些问题:

  1. does email sends when trying on localhost? 在尝试使用localhost时是否会发送电子邮件?
  2. how to fix problem with server, why nothing happens after pushing submit button? 如何修复服务器问题,为什么推送提交按钮后没有任何反应?

this is index text 这是索引文本

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Simple Ajax Contact Form</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#Submit").click(function() { var proceed = true; //simple validation at client's end //loop through each field and we simply change border color to red for invalid fields $("#contact_form input[required=true], #contact_form textarea[required=true]").each(function(){ $(this).css('border-color',''); if(!$.trim($(this).val())){ //if this field is empty $(this).css('border-color','red'); //change border color to red proceed = false; //set do not proceed flag } }); if(proceed) //everything looks good! proceed... { //get input field values data to be sent to server post_data = { 'user_name' : $('input[name=name]').val(), 'phone_number' : $('input[name=phone2]').val() }; //Ajax post data to server $.post('contact_me.php', post_data, function(response){ if(response.type == 'error'){ //load json data from server and output message output = '<div class="error">'+response.text+'</div>'; }else{ output = '<div class="success">'+response.text+'</div>'; //reset values in all input fields $("#contact_form input[required=true], #contact_form textarea[required=true]").val(''); $("#contact_form #contact_body").slideUp(); //hide form after success } $("#contact_form #contact_results").hide().html(output).slideDown(); }, 'json'); } }); //reset previously set border colors and hide all message on .keyup() $("#contact_form input[required=true], #contact_form textarea[required=true]").keyup(function() { $(this).css('border-color',''); $("#result").slideUp(); }); }); </script> <link href="style.css" rel="stylesheet" type="text/css" /> <!--<link href="/zvonoq/css/bootstrap.min.css" rel="stylesheet" type="text/css" />--> </head> <body> <div class="form-style" id="contact_form"> <div class="form-style-heading">Please Contact Us</div> <div id="contact_results"></div> <div id="contact_body"> <label><span>Name <span class="required">*</span></span> <input type="text" name="name" id="name" required="true" class="input-field"/> </label> <label><span>Phone</span> <input type="text" name="phone2" maxlength="15" required="true" class="tel-number-field long" /> </label> <label> <span>&nbsp;</span><input type="submit" id="Submit" value="Submit" /> </label> </div> </div> </body> </html> 

this is contact_me.php 这是contact_me.php

 <?php if($_POST) { $to_email = "myemail@gmail.com"; //Recipient email, Replace with own email here //check if its an ajax request, exit if not if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') { $output = json_encode(array( //create JSON data 'type'=>'error', 'text' => 'Sorry Request must be Ajax POST' )); die($output); //exit script outputting json data } //Sanitize input data using PHP filter_var(). $user_name = filter_var($_POST["user_name"], FILTER_SANITIZE_STRING); $user_email = filter_var($_POST["user_email"], FILTER_SANITIZE_EMAIL); $country_code = filter_var($_POST["country_code"], FILTER_SANITIZE_NUMBER_INT); $phone_number = filter_var($_POST["phone_number"], FILTER_SANITIZE_NUMBER_INT); $subject = filter_var($_POST["subject"], FILTER_SANITIZE_STRING); $message = filter_var($_POST["msg"], FILTER_SANITIZE_STRING); //additional php validation if(strlen($user_name)<4){ // If length is less than 4 it will output JSON error. $output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!')); die($output); } if(!filter_var($phone_number, FILTER_SANITIZE_NUMBER_FLOAT)){ //check for valid numbers in phone number field $output = json_encode(array('type'=>'error', 'text' => 'Enter only digits in phone number')); die($output); } //email body $message_body = $message."\\r\\n\\r\\n-".$user_name."\\r\\nEmail : ".$user_email."\\r\\nPhone Number : (".$country_code.") ". $phone_number ; //proceed with PHP email. $headers = 'From: '.$user_name.'' . "\\r\\n" . 'Reply-To: '.$user_email.'' . "\\r\\n" . 'X-Mailer: PHP/' . phpversion(); $send_mail = mail($to_email, $subject, $message_body, $headers); if(!$send_mail) { //If mail couldn't be sent output error. Check your PHP email configuration (if it ever happens) $output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.')); die($output); }else{ $output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_name .' Thank you for your email')); die($output); } } ?> 

Looks like this was made way more complicated than it has to be. 看起来这样做比以前更加复杂。 Change you're contact_body to a <form> (don't forget to change the closing tag) 将contact_body更改为<form> (不要忘记更改结束标记)

You can then simply do this using jQuery to send the form 然后,您可以使用jQuery简单地执行此操作以发送表单

<?php
  $.post("www.someSite.com/someScript.php",
      $("#contact_body").serialize())
  .error(function(){
      //Show alert for not being able to make a connection
  })
  .success(function(data){
        var response = JSON.parse(data); //Get json object from response text 
        if(response..type != error){
            //Show some error
        }else{
           //All went well
        }
  });

If you click the button and nothing is happening then there is something wrong with your javascript. 如果您单击按钮并且没有发生任何事情,那么您的javascript就会出现问题。 Open up the Web/Javascript console to check for errors 打开Web / Javascript控制台以检查错误

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM