run javascript and php in html onclick

Question

I have a dropdown list in HTML, with element name staff1, containing names fetched from the database. I need a Send Email button beside the list and once the button is clicked, an email must be sent to the selected option in the list before even submitting the page or form.

Now, I understand that HTML and JavaScript are on the client side, and PHP is on the server side. With my js, I can fetch in real-time the selected value in the dropdown. I came up with below to be able to fetch the selected value via javascript and pass it to PHP for the email function. All of these are in the same file.

<script>
    function sendEmail()
    {
        var val = document.getElementByName("staff1").value;
    }
</script>

<?php
    $to = "<script>document.writeln(val);</script>";
    $subject = "This is a test email";
    $txt = "test body"; 
    $headers = "From: aa@123.com";
    mail($to,$subject,$txt,$headers);
?>

I would need to call all these in the onclick event of my html a href button. Here is my html:

<a href="#" onclick="sendEmail()" class="button">Send Email</a>

I'm not so sure how all of these three can be integrated together, and I'm still about to learn through AJAX as some other posts suggest. For now, I was hoping a quick solution or workaround would do. I got below but it's not sending anything, even when I temporarily define the $to parameter with a static value. Thanks!

<?php
    echo '<a href="#" onclick="sendEmail()" class="button">Send Email</a><br/><br/>';
    echo '<script> function sendEmail() { var val = document.getElementByName("staff1").value; } </script>';
    $to = "<script>document.writeln(val);</script>";
    $subject = "This is a test email";
    $txt = "test body"; 
    $headers = "From: aa@123.com";
    mail($to,$subject,$txt,$headers);
?>  

Answer 1

I tried to give quick solution. Try it .

<script>
function sendEmail(){
var to = document.getElementByName("staff1").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
  // // 
}
};
xhttp.open("GET", "send_mail.php?to="+to, true);
xhttp.send();
}
</script>

send_mail.php

<?php
$to = $_GET["to"];
$subject = "This is a test email";
$txt = "test body"; 
$headers = "From: aa@123.com";
mail($to,$subject,$txt,$headers);
?>

Answer 2

but it's not sending anything

That's because this isn't an email address:

"<script>document.writeln(val);</script>"

So the mail server is probably returning an error telling you that a block of JavaScript code wrapped in HTML isn't anything remotely close to an email address.

---

You have two options. Either post the form value to a page or use AJAX to make the request to the server. And both of these are, well, pretty broad for a single Stack Overflow question/answer. But let's see if I can at least describe the processes at a high level to help you out...

Post a Form: In this approach your client-side HTML might have something like this:

<form method="POST" action="somePage.php">
    <input type="text" name="email" />
    <input type="submit" value="Send Email" />
</form>

Clicking on that submit button would post that email value to somePage.php, which would have code to use that value. You still have a variety of options to customize this. For example, you might have a hidden input instead of a text input and you might populate that hidden input dynamically from JavaScript.

But ultimately what you would have is a form which posts to a page. That page would perform the server-side action you need and would either respond directly with a new UI for the user or would redirect the user to another page. This, as you can imagine, involves reloading the entire page.

AJAX: But what if you don't want to reload the entire page? What if you want the user to stay right here and not have to navigate around the site? That's fine, you'd use AJAX for that. AJAX is basically using JavaScript to make a request to a page in the background. It's a bit more complex than the form post, but from the perspective of the server-side code the functionality is the same.

There are tons of examples online, this one seems like a reasonable place to start. Essentially you'd use JavaScript to attach a click handler to a button or link (or any element, really), and that JavaScript would make an AJAX HTTP request to the PHP page which performs the action. That request can include the information gathered from the client-side input. The PHP page being requested would perform the action and respond, ideally with perhaps JSON data instead of HTML. The client-side code would then react to that response, possibly showing the user a success or failure message.