如何使用在页面中选择的数据从 HTML 页面发送电子邮件单选按钮



我正在尝试使用页面内单选按钮中的数据从HTML页面发送电子邮件。

除了有 3 个单选按钮之外,实际上没有什么可做的,我想做的是在用户选择一个按钮并单击提交按钮后,重定向他向我发送电子邮件。

电子邮件的正文应包含先前选择的单选按钮。(例如,如果我有 3 种食物 1( 肉,2( 蔬菜,3( 水果,用户选择"水果",电子邮件正文应该像"你选择了水果。

关于这如何工作的任何想法?

HTML是一种标记语言,不能发送电子邮件。下一个想法可能是使用嵌入在HTML页面中的JavaScript来发送电子邮件,但JS也不能发送电子邮件。

一种选择是创建一个"mailto:"链接,例如:

<a href="mailto:recipient@example.com">Email Me</a> "

这将要求浏览器打开用户的电子邮件应用程序,例如Outlook或Gmail。你必须做一些JavaScript魔法才能将你想要的数据放入链接中。(我会研究修改"a"标签的 href 值(。请参阅 https://en.wikipedia.org/wiki/Mailto。

根据用户在网页上执行的操作发送电子邮件的更常用选项是向网站的服务器发送请求,该服务器将具有通过SMTP或API发送电子邮件的服务器端代码。详细信息将取决于您的服务器解决方案。如果您无法通过谷歌搜索弄清楚其中的细节,我会问一个更具体的问题,即使用您选择的服务器技术发送电子邮件。

如果您正在寻找PHP解决方案,

我会使用"邮件"功能来实际发送邮件。在发送之前,您需要清理和处理表单数据。我会查看 W3 的表单处理页面,以基本了解如何访问表单数据,并查看此堆栈溢出帖子以获取有关正确清理表单数据的更多信息。

你可以使用AJAX(javascript(和PHP的组合。

像这样:

//jQuery (javascript):
$('#btnGo').click(function(){
  var eden = $('[name=fruits]:checked').val();
  console.log(eden);
  $.ajax({
    type:'post',
     url:'name_of_your_php_file.php',
    data:'dfruit=' + eden
  }).done(function(recd){
    console.log(recd);
  });
});
<!-- HTML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Apple: <input type="radio" name="fruits" value="apple" /></br>
Pear: <input type="radio" name="fruits" value="pear" /></br>
Orange: <input type="radio" name="fruits" value="orange" /></br>
<button id="btnGo">Go</button>

.PHP:

<?php
    $fruit = $_REQUEST['dfruit'];
    $headers = "";
    $headers .= "Content-type: text/html; charset=iso-8859-1n";
    $headers .= "From: veritas_demo@cssyphus.comn";
    $headers .= "Organization: cssyphus.comn";
    $headers .= "X-Priority: 3n";
    $headers .= "X-Mailer: PHP". phpversion() ."n" . PHP_EOL;
    $msg = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">';
    $msg .= "You requested a: " . $fruit;
    $to = "you@yourdomain.com";
    $subject = "Whatever you want for a subject";
    mail($to, $subject, $msg, $headers);
    echo 'Email sent!'; //This is received in the `.done()` section of js.

重要提示:请注意,我在 HTML 中引用了 jQuery 库。您还需要此信息才能使代码示例正常工作。如果你不擅长javascript(从你的问题来看,我假设你还不擅长(,那么jQuery将使工作更简单。而且打字少了。

最新更新