How to use mailto on a self-submit form?

Question

I have to make modifications on an existing code and I am struggling with the mailto function. I would like that when I submit my form, a pre-populated mail opens with Outlook (or any other mailer configured) so the user can check if anything is fine and then submit the mail with the form's data.

I want to use mailto: because at the moment the page (that is on a local server, not on internet) only works on IE (the last developer used ActiveX Data Object and it doesn't work on Edge/Chrome/Firefox).

I've already tried putting the mailto: in the form's action tag, it didn't work, I tried some javascript too and the same happened. Also, my form submits to itself with the $_SERVER['PHP_SELF'] global variable.

The form/code is big so I'll only put the part that might be useful for you to help me.

Here's the form I use :

echo "<FORM action=". $_SERVER['PHP_SELF'] . " name=\"form\" method=\"POST\">";
"my form here"
echo "<input type=\"submit\" name=\"Envoyer\" value=\"Send\"/>";
echo "</FORM>";

Then, I want to get the data from the form and open a mailer when the user hit the submit button with a pre-populated mail with data in it.

Here's what I use :

echo "<script>
    var email = $maildest;
    var subject = \"Request of the user\";
    var emailBody = $MAIL;
    window.location = \"mailto:\"+email+\"?subject=\"+subject+\"&body=\"+emailBody;";
    echo "</script>";
echo "An OUTLOOK window opened with the informations you entered. <br/>Send the email so we can take it into account.<br/>
exit(0);

I don't have any error message, the page works just fine but when I hit the submit button nothing happens, not even the mailer opening a window or anything else. I'm sure there is something I'm missing and I'm a bit rusty with php/html/javascript so I came here seeking your help.

Answer 1

It is a LOT easier to read if you do not echo stuff

If you do, you need to concatenate PHP style and use the backticks for the JavaScript
NOTE: You need SINGLE quotes for the line with ${} javascript vars or the $ is interpreted:

echo "<script> 
      var email = \"".$maildest."\"; 
      var subject = encodeURIComponent(\"Request of the user\"); 
      var emailBody = encodeURIComponent(\`".$MAIL."\`);"
echo 'window.location = `mailto:${email}?subject=${subject}&body=${emailBody}`;';
echo "</script>"; 

Please note the backticks for the $MAIL and the last line since you likely have newlines in there

Also you need to escape spaces and special chars

Look in the console - the mailto normally works better as a form action

Without echo:

?>
An OUTLOOK window opened with the informations you entered. <br/>Send the email so we can take it into account.<br/>
<script>
    var email = "<?= $maildest ?>";
    var subject = encodeURIComponent("Request of the user");
    var emailBody = encodeURIComponent(`<?= $MAIL ?>`);
    window.location = `mailto:${email}?subject=${subject}&body=${emailBody}`;
    </script>
<? 
exit(0);
?>

Here is a version that does not use the server:

window.addEventListener("load", function() {
  document.getElementById("form").addEventListener("submit", function(e) {
    e.preventDefault();
    var email = this.email.value,
      subject = encodeURIComponent("Request of the user"),
      elements = this.elements,
      emailTexts = [];
      
      [...elements].forEach(function(ele) {
        if (ele.type!="submit") emailTexts.push(ele.name + ":" + ele.value)
      })
    var emailBody = encodeURIComponent(emailTexts.join("\n"));
    var loc = `mailto:${email}?subject=${subject}&body=${emailBody}`;
    console.log(loc)
    window.location = loc;
  });
});

An OUTLOOK window will open with the informations you enter. <br/>Send the email so we can take it into account.<br/>
<form id="form" ....>
  Email: <input type="text" name="email" value="" /><br/> Name: <input type="text" name="Name" value="" /><br/> Comment: <textarea name="Comment"></textarea><br/>
  <input type="submit" />
</form>