Как отправить электронное письмо с HTML-страницы, используя данные, выбранные на странице из переключателя?
Я пытаюсь отправить электронное письмо с HTML-страницы, используя данные радиокнопки со страницы.
На самом деле в этом нет ничего особенного, за исключением того, что есть 3 переключателя, и я хочу сделать это после того, как пользователь выберет кнопку и нажмет кнопку отправки, чтобы перенаправить его, чтобы отправить мне электронное письмо.
Тело письма должно содержать предыдущий выбор переключателя. (например, если бы у меня было 3 вида еды: 1) мясо, 2) овощи, 3) фрукты, и пользователь выбрал «фрукты», в теле письма должно было быть что-то вроде «Вы выбрали фрукты».)
Любые мысли о том, как это может работать?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
HTML — это язык разметки, и он не может отправлять электронные письма. Следующей мыслью может быть использование JavaScript, встроенного в HTML-страницу, для отправки электронной почты, но JS также не может отправлять электронные письма.
Один из вариантов — создать ссылку «mailto:», например:
<a href = "mailto:[email protected]">Email Me</a> "
Это попросит браузер открыть почтовое приложение пользователя, такое как Outlook или Gmail. Вам придется проделать некоторую магию JavaScript, чтобы получить данные, которые вы хотите, в ссылку. (Я бы исследовал изменение значения href тега «a»). См. https://en.wikipedia.org/wiki/Mailto.
Наиболее часто используемый вариант отправки электронных писем на основе того, что пользователь делает на веб-странице, — отправить запрос на сервер веб-сайта, который будет иметь код на стороне сервера, который отправляет электронное письмо через SMTP или API. Детали будут зависеть от вашего серверного решения. Если вы не можете выяснить подробности этого с помощью Google, я бы задал более конкретный вопрос об отправке электронной почты с использованием выбранной вами серверной технологии.
Если вы ищете решение для PHP,
Я бы использовал функцию «Почта» для фактической отправки почты. Перед отправкой вам необходимо очистить и обработать данные формы. Я бы посмотрел Страница обработки формы W3 для общего понимания того, как получить доступ к данным формы, и это сообщение о переполнении стека для получения дополнительной информации о правильной очистке данных формы.
Вы можете использовать комбинацию AJAX (javascript) и PHP.
Что-то вроде этого:
//jQuery (javascript):
$('#btnGo').click(function(){
var eden = $('[name=fruits]:checked').val();
console.info(eden);
$.ajax({
type:'post',
url:'name_of_your_php_file.php',
data:'dfruit=' + eden
}).done(function(recd){
console.info(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-1\n";
$headers .= "From: [email protected]\n";
$headers .= "Organization: cssyphus.com\n";
$headers .= "X-Priority: 3\n";
$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 = "[email protected]";
$subject = "Whatever you want for a subject";
mail($to, $subject, $msg, $headers);
echo 'Email sent!'; //This is received in the `.done()` section of js.
Важно: обратите внимание, что у меня есть ссылка на библиотеку jQuery в HTML. Это также необходимо для работы примера кода. Если вы не очень хорошо разбираетесь в javascript (которым, судя по вашему вопросу, я предполагаю, что вы еще не являетесь), jQuery упростит вашу работу. И меньше печатать.
Спасибо за ответ, будем пробовать :)