1

I'm trying to send an email from an HTML page using the data from a radiobutton from within the page.

There is actually not much to it except that there are 3 radio buttons and what I want to do is after the user selects a button and clicks the submit button, to redirect him to send an email to me.

The email's body, should contain the previous selection of the radio button. (ex. if I had 3 types of food 1) meat, 2) vegetables, 3) fruits and the user chose "fruits" the email's body should by like "You have chosen fruits.")

Any thoughts of how this could work?

ignotus
  • 29
  • 2

3 Answers3

1

HTML is a markup language and can not send emails. The next thought might be to use JavaScript embedded in the HTML page to send the email, but JS can not send emails either.

One option is to create a "mailto:" link such as:

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

This would ask the browser to open the user's email application such as Outlook or Gmail. You would have to do some JavaScript magic to get the data you want into the link. (I would research modifying the href value of an "a" tag). See https://en.wikipedia.org/wiki/Mailto.

The more commonly used option for sending emails based on what a user does on a webpage is to send a request to the website's server, which would have server-side code that sends the email through SMTP or an API. The details would depend on your server solution. If you are unable to figure the details of that out through googling, I would ask a more specific question about sending an email using your chosen server technology.

Joshua Patton
  • 462
  • 4
  • 19
1

If you are looking for a PHP solution,

I would use the "mail" function for actually sending the mail. Before you send it, you will need to sanitize and process the form data. I would look at W3's form handling page for a basic understanding of how to access form data, and this stack overflow post for more information about properly sanitizing form data.

ARubiksCube
  • 146
  • 8
0

You can use a combination of AJAX (javascript) and PHP.

Something like this:

//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-1\n";
    $headers .= "From: veritas_demo@cssyphus.com\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 = "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.

Important: Notice that I have the jQuery library referenced in the HTML. You need this also for the code sample to work. If you aren't great at javascript (which, from your question, I assume you aren't just yet) then jQuery will make the job simpler. And way less typing.

cssyphus
  • 37,875
  • 18
  • 96
  • 111