堆棧內存溢出
  簡體   English   中英

如何使用 javascript 向用戶發送電子郵件

[英]How to send E-mail to user using javascript

 原文  2022-01-11 18:23:02  2   1    javascript/ php/ jquery

問題描述

如您所見，我有一個荒謬的問題，我嘗試通過我的個人網頁建立基本聯系，但我無法克服我從互聯網上幾乎所有代碼中獲得的問題我花了很多時間在辦公桌上，后來這種情況變成了毫無意義的事情。

謝謝你幫助我

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="info.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1,maximum-scale=1"
  />

  <script>
    $(document).ready(function () {
      $("#btn").click(function () {
        let message = {
          name: $("input[name='name']").val(),
          mail: $("input[name='mail']").val(),
          subject: $("input[name='Subject']").val(),
          msg: $("input[name='info']").val(),
        };

        $.ajax({
          type: "POST",
          url: "mail.php",
          data: message,
          success: function () {
            $(".success").fadeIn(100);
          },
        });
      });

      //alert("message has been send by you");
    });
  </script>

  <body>
    <title>information</title>
    <div class="Main-container">
      <div class="container">
        <h2><b>Contact Me</b></h2>
        <div class="container-cover">
          <form action="mail.php" method="POST">
            <form class="contact-form">
              <div class="inner-column-1">
                <div class="form-container">
                  <b> <label for="Name">Name:</label> </b>
                  <input
                    type="text"
                    name="name"
                    class="inner-column-1"
                    placeholder="Enter Name "
                  />
                  <b><label for="mail">Mail:</label></b>
                  <input
                    type="mail"
                    name="mail"
                    class="inner-column-1"
                    placeholder="Enter Email  "
                  />
                </div>
              </div>

              <div class="inner-column-1">
                <b><label for="subject">Subject:</label></b>
                <input
                  type="subject"
                  name="Subject"
                  placeholder="Subject"
                  class="inner-column-1"
                  style="width: 370px"
                />
              </div>

              <div class="inner-column-1">
                <div class="inner-column-1">
                  <textarea
                    name="info"
                    id=""
                    type="info"
                    cols="31"
                    rows="10"
                    placeholder="Enter Something Please..."
                    style="
                      border-radius: 6px;
                      font-size: 25px;

                      border: 2px ridge royalblue;
                      overflow: -moz-hidden-unscrollable;
                      resize: none;
                    "
                  ></textarea>
                </div>
              </div>

              <div class="inner-column-2">
                <button id="btn">Send Me</button>
              </div>
            </form>
          </form>
        </div>
      </div>
    </div>
  </body>
</head>


<?php


if ($_POST) {
  
    $name = $_POST(['name']);
    $mail = $_POST(['mail']);
    $msg  = $_POST(['msg']);
    mail("blabla@gmail.com", 'This is an email from:', $msg, $mail);
}
?>

1 個解決方案

解決方案1
 1  2022-01-11 19:03:00

您有嵌套的表單標簽，這是一個壞主意 - 只需將其設為一個並將 class 移入其中即可。

  <form action="mail.php" method="POST">
        <form class="contact-form"> 
        <!-- get rid of this inner form tag -->

Forms（默認）提交並加載（或重新加載）頁面。 您正在使用 ajax 因此您必須抑制這種自然行為。 最簡單的方法就是一個內聯事件——你可以去掉method和action ，因為這里不需要它們：

<form onsubmit="return false;" class="contact-form">

我同意評論 - PHP 腳本作為一個單獨的文件會更有意義。 此外，您應該考慮輸出是否成功。

...
$done = mail("blabla@gmail.com", 'This is an email from:', $msg, $mail);
echo $done ? "success" : "fail" ;

這樣您的 ajax 可以得到響應並將其報告給用戶

解決方案2
 -2  2022-01-11 19:16:29

///////////JQUERY//////////////
$(document).ready(function () {
  var frm = $('#ss-form');
  frm.validate();

  $('#ss-submit').click(function (ev) {
    frm.validate();
    if ($('#ss-form').valid()) {
      $.ajax({
        type: "POST",
        url: "mail.php",
        data: frm.serialize(),
        success: function () {
          alert('Thank you for your submission');
        },
        beforeSend: function () {
          $('body').addClass("ss-submit-progress");
          $('.ss-submit-progress').css('cursor', 'progress');
        },
        complete: function () {
          $('.ss-submit-progress').removeAttr('style');
          $('body').removeClass("ss-submit-progress");
        }
      });
      frm[0].reset();
    } else {
      alert("Incorrectly filled form");
      $('#ss-form').valid();
    }
    ev.preventDefault();
    return false;
  });

  $('input').on('change',function () {
    if ($('#ss-form').valid()) {
      $('#ss-submit').css('opacity','1');
    }
  });
  $('textarea').on('change',function () {
    if ($('#ss-form').valid()) {
      $('#ss-submit').css('opacity','1');
    }
  });
});

////////////PHP///////////////
<?php

$method = $_SERVER['REQUEST_METHOD'];

$c = true;
if ( $method === 'POST' ) {

    $project_name = trim($_POST["project_name"]);
    $project_subject = trim($_POST["project_subject"]);
    $admin_email  = trim($_POST["admin_email"]);
    $form_subject = trim($_POST["form_subject"]);

    foreach ( $_POST as $key => $value ) {
        if ( $value != "" && $key != "project_name" && $key != "project_subject" && $key != "admin_email" && $key != "form_subject"  ) {
            $message .= "
            " . ( ($c = !$c) ? ' ':' ' ) . "
                $key
                $value
            ";
        }
    }
} else if ( $method === 'GET' ) {

    $project_name = trim($_GET["project_name"]);
    $project_subject = trim($_GET["project_subject"]);
    $admin_email  = trim($_GET["admin_email"]);
    $form_subject = trim($_GET["form_subject"]);

    foreach ( $_GET as $key => $value ) {
        if ( $value != "" && $key != "project_name" && $key != "project_subject" && $key != "admin_email" && $key != "form_subject" ) {
            $message .= "
            " . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
                $key
                $value
            </tr>
            ";
        }
    }
}



function adopt($text) {
    return '=?UTF-8?B?'.Base64_encode($text).'?=';
}

$headers = "MIME-Version: 1.0" . PHP_EOL .
    "Content-Type: text/plain; charset=utf-8" . PHP_EOL .
    'Reply-To: '.$admin_email.'' . PHP_EOL;

mail($admin_email, adopt($form_subject), $message, $headers );


//////////HTML////////////
<form id="ss-form">
  <input type="hidden" name="project_name" value="Site Name">
  <input type="hidden" name="project_subject" value="Subject Name">
  <input type="hidden" name="admin_email" value="rbalik341@gmail.com">
  <input type="hidden" name="form_subject" value="Form Subject">
  <div class="row">
    <div class="col-md-5">
      <div class="form-group">
        <label class="control-label" for="field-type-name">Name</label>
        <input class="form-control" name="Name" type="text" id="field-type-name" required>
      </div>
      <div class="form-group">
        <label class="control-label" for="field-type-subject">Subject</label>
        <input class="form-control" name="Subject" type="text" id="field-type-subject" required>
      </div>
      <div class="form-group">
        <label class="control-label" for="field-type-email">Email</label>
        <input type="email" class="form-control" name="E-mail" id="field-type-email" required>
      </div>
    </div>
    <div class="col-md-7">
      <div class="form-group field-textarea">
        <label class="control-label" for="field-type-textarea">Message</label>
        <textarea class="form-control" name="Message" id="field-type-textarea" required></textarea>
      </div>
    </div>
  </div>
</form>

它必須工作

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用javascript發送電子郵件的簡單方法 如何使用正則表達式在javascript中驗證PHP電子郵件注入的電子郵件地址？ 通過 SendGrid 發送電子郵件 如何使用JavaScript通過電子郵件發送表單的內容？ JavaScript電子郵件驗證 javascript和表格電子郵件 如何使用HTML表單發送電子郵件並使用Node.js和Gulp提交電子郵件？ 使用 JS 向多個同事發送電子郵件 使用$ _POST獲取一些內容並通過電子郵件發送 使用Javascript在注冊頁面上屏蔽原始電子郵件
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM