Как сделать уведомление с jquery ajax - PullRequest
Новая
       2

Как сделать уведомление с jquery ajax

0 голосов
/ 15 апреля 2020

Я хочу спросить о разделе уведомлений приложения профиля компании, которое я создал, используя PHP, AJAX и включая PHP функцию отправки почты. Почему-то это не работает, и я не знаю, что случилось. Это мой код: 

          <div class="full black">
        <div class="large-12 columns">
          <h2 class="white">We are ready.</h2>
          <div class='form'>
            <form id='contact_form'action="send.php" method='POST'>
              <div class="large-4 columns">
                <input class='required' name='name' placeholder='NAME' type='text'>
              </div>
              <div class="large-4 columns">
                <input class='required email' name='email' placeholder='EMAIL' type='text'>
              </div>
              <div class="large-4 columns">
                <input class='required' name='subject' placeholder='SUBJECT' type='text'>
              </div>
              <div class="large-12 columns">
                <textarea class='required' name='message' placeholder='MESSAGE'></textarea>
                <input id="submit" class='button white boxed contact-button' type='submit' value="Send it">
                <p id='thanks' class='hide'>
                  Thanks for contacting us, we'll be in touch soon!
                </p>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <nav>
    <a href="#" id='back' class="hide">
      <i class="fa fa-close"></i>
    </a>
  </nav>
  if($('form#contact_form').length > 0) {
    $('form#contact_form').validate({
      messages: { },
      submitHandler: function(form) {
        $.ajax({
          type: 'POST',
          url: 'send.php',
          data: $(form).serialize(),
          success: function(data) {
            if(data.match(/success/)) {
              $(form).trigger('reset');
              $('#thanks').removeClass('hide').fadeOut(5000);
            }
          }
        });
        return false;
      }
    });
  }

, и это мой код отправки почты (я использую php native): 

    $send_to = "toastermedia26@gmail.com";
$send_subject = "Ajax form ";



/*Be careful when editing below this line */


$email = 'vincent@vincentjunior1.xyz';
$f_name = cleanupentries($_POST["name"]);
$f_email = cleanupentries($_POST["email"]);
$f_message = cleanupentries($_POST["message"]);
$from_ip = $_SERVER['REMOTE_ADDR'];
$from_browser = $_SERVER['HTTP_USER_AGENT'];

function cleanupentries($entry) {
    $entry = trim($entry);
    $entry = stripslashes($entry);
    $entry = htmlspecialchars($entry);

    return $entry;
}

$message = "This email was submitted on " . date('m-d-Y') . 
"\n\nName: " . $f_name . 
"\n\nE-Mail: " . $f_email . 
"\n\nMessage: \n" . $f_message . 
"\n\n\nTechnical Details:\n" . $from_ip . "\n" . $from_browser;

$send_subject .= " - {$f_name}";

$headers = "From: " . $email . "\r\n" .
    "Reply-To: " . $f_email . "\r\n" .
    "X-Mailer: PHP/" . phpversion();


if (!$f_email) {
    echo "no email";
    exit;
}else if (!$f_name){
    echo "no name";
    exit;
}else{
    if (filter_var($f_email, FILTER_VALIDATE_EMAIL)) {
        $mail = mail($send_to, $send_subject, $message, $headers);
        if($mail = true){
        json_encode(['ressponses' => 'success']);
    }else{
        return false;
        exit;
    }
}
}

Я действительно запутался. Как сделать ответ успешно с моим кодом. Может ли кто-нибудь помочь мне.

1 Ответ

0 голосов
/ 15 апреля 2020

Я сделал некоторые изменения и протестировал. Он отлично работает, и попробуйте это, 

  <div class="full black">
      <div class="large-12 columns">
        <h2 class="white">We are ready.</h2>
        <div class='form'>
          <form id='contact_form' action="send.php" method='POST'>
            <div class="large-4 columns">
              <input class='required' name='name' id='name' placeholder='NAME' type='text'>
            </div>
            <div class="large-4 columns">
              <input class='required email' name='email'  id='email' placeholder='EMAIL' type='text'>
            </div>
            <div class="large-4 columns">
              <input class='required' name='subject' id='subject' placeholder='SUBJECT' type='text'>
            </div>
            <div class="large-12 columns">
              <textarea class='required' name='message' id ='message' placeholder='MESSAGE'></textarea>
              <input id="submit" class='button white boxed contact-button' type='submit' value="Send it">
              <p id='thanks' class='hide'>
                Thanks for contacting us, we'll be in touch soon!
              </p>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<nav>
  <a href="#" id='back' class="hide">
    <i class="fa fa-close"></i>
  </a>
</nav>

В вашем javaScript, 

<script type="text/javascript">

  $("#contact_form").unbind('submit').bind('submit', function() {
    $(".text-danger").remove();
    // remove the form error
    $('.form-group').removeClass('has-error').removeClass('has-success');

    var name = $("#name").val();
    var email = $("#email").val();

    if (name === "") {
      $("#name").after('<p class="text-danger">Name field is required</p>');
    //  $('#name').closest('.form-group').addClass('has-error');
    } else {
      // remov error text field
      $("#name").find('.text-danger').remove();
    //  $("#name").closest('.form-group').addClass('has-success');
    }
    if (email === "") {
      $("#name").after('<p class="text-danger">email field is required</p>');
    //  $('#name').closest('.form-group').addClass('has-error');
    } else {
      $("#name").find('.text-danger').remove();
    //  $("#name").closest('.form-group').addClass('has-success');
    }

    //same as subject and message 

if (name && email) {
  var form = $(this);
  
  $.ajax({
    url: form.attr('action'),
    type: form.attr('method'),
    data: form.serialize(),
    dataType: 'json',
    success: function(response) {
    
      if (response.success == true) {
        console.log(response.messages);
        // reset the form text
        $("#contact_form")[0].reset();
      $('#thanks').removeClass('hide').fadeOut(5000);
      } // if

    } // /success
  }); // /ajax
} // if

return false;
}); // /submit form function

</script>

и ваш файл send. php должен выглядеть так: 

<?php
$valid['success'] = array('success' => false, 'messages' => array());

$send_to = "toastermedia26@gmail.com";
$send_subject = "Ajax form ";



/*Be careful when editing below this line */


$email = 'vincent@vincentjunior1.xyz';
$f_name = cleanupentries($_POST["name"]);
$f_email = cleanupentries($_POST["email"]);
$f_message = cleanupentries($_POST["message"]);
$from_ip = $_SERVER['REMOTE_ADDR'];
$from_browser = $_SERVER['HTTP_USER_AGENT'];

function cleanupentries($entry)
{
    $entry = trim($entry);
    $entry = stripslashes($entry);
    $entry = htmlspecialchars($entry);

    return $entry;
}

$message = "This email was submitted on " . date('m-d-Y') .
"\n\nName: " . $f_name .
"\n\nE-Mail: " . $f_email .
"\n\nMessage: \n" . $f_message .
"\n\n\nTechnical Details:\n" . $from_ip . "\n" . $from_browser;

$send_subject .= " - {$f_name}";

$headers = "From: " . $email . "\r\n" .
"Reply-To: " . $f_email . "\r\n" .
"X-Mailer: PHP/" . phpversion();


if (!$f_email) {
    $valid['success'] = false;
    $valid['messages'] = "No email";
//  exit;
} elseif (!$f_name) {
    $valid['success'] = false;
    $valid['messages'] = "No name";
//  exit;
} else {
    if (filter_var($f_email, FILTER_VALIDATE_EMAIL)) {
        $mail = mail($send_to, $send_subject, $message, $headers);
        if ($mail = true) {
            $valid['success'] = true;
            $valid['messages'] = "Successfully sent";
        //json_encode(['ressponses' => 'success']);
        } else {
            $valid['success'] = false;
            $valid['messages'] = "Send fail";
        }
    }
}


echo json_encode($valid);

Думаю, это поможет.

...