堆栈内存溢出
  简体   繁体   English

如何使用 javascript 向用户发送电子邮件

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

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

问题描述

As you see I have ridiculous problem I try to make basic contact form my personal webpage but I can not overcome I got from almost whole code on internet I can not compete against what a miserable case,anyway how can I make properly do it I wonder I spend out pretty much time on desk after that this situation turned out meaningless thing.如您所见，我有一个荒谬的问题，我尝试通过我的个人网页建立基本联系，但我无法克服我从互联网上几乎所有代码中获得的问题我花了很多时间在办公桌上，后来这种情况变成了毫无意义的事情。

Thanks for helping me谢谢你帮助我

<!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

You have nested form tags which is a bad idea - just make it a single one and move the class into it.您有嵌套的表单标签，这是一个坏主意 - 只需将其设为一个并将 class 移入其中即可。

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

Forms (by default) submit and load (or reload) a page. Forms（默认）提交并加载（或重新加载）页面。 You are using ajax so you must suppress that natural behavior.您正在使用 ajax 因此您必须抑制这种自然行为。 The simplest way is just an inline event - and you can get rid of method and action since they're not needed here:最简单的方法就是一个内联事件——你可以去掉method和action ，因为这里不需要它们：

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

I agree with the comment - the PHP script would make alot more sense as a separate file.我同意评论 - PHP 脚本作为一个单独的文件会更有意义。 Also, you should consider outputting if it was successful or not.此外，您应该考虑输出是否成功。

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

That way your ajax can get the response and report it back to the user这样您的 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>

It Must work它必须工作

暂无
暂无

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

相关问题 使用javascript发送电子邮件的简单方法 - Simple way to send e-mail using javascript 如何使用正则表达式在javascript中验证PHP电子邮件注入的电子邮件地址？ - How to validate an e-mail address against php e-mail injection in javascript using regex? 通过 SendGrid 发送电子邮件 - Send e-mail by SendGrid 如何使用JavaScript通过电子邮件发送表单的内容？ - How can I send a form's contents over e-mail with JavaScript? JavaScript电子邮件验证 - Javascript e-mail validation javascript和表格电子邮件 - javascript & Form e-mail 如何使用HTML表单发送电子邮件并使用Node.js和Gulp提交电子邮件？ - How to send an e-mail using an HTML form and submit it using Node.js and Gulp? 使用 JS 向多个同事发送电子邮件 - Send E-mail to multiple co-workers using JS 使用$ _POST获取一些内容并通过电子邮件发送 - Get some content using $_POST and send it via e-mail 使用Javascript在注册页面上屏蔽原始电子邮件 - Mask original e-mail on registration page using Javascript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM