如何保存“图像点击”值，以便我可以继续在我的 PHP 程序中使用该值？

Question

我现在正在为我的网站编写联系表格，我想将第一个问题的答案设计为三个可点击的图像，从而只能点击三个图像中的一个。 通过单击，该值应该发送到我的电子邮件地址，就像单击提交按钮时后续问题中的输入字段一样，使用 PHP 邮件功能。

不幸的是，我不知道在单击图像时如何以及是否可以触发操作，该操作将值发送到我的 PHP 程序。

我已经尝试过html onclick事件属性，但是我在网上看到它不是很合适。

我现在要做的是使用 JavaScript 函数 addEventListener () 缓存变量，并在最后单击提交按钮时，将此值传递给 PHP 程序。 我只是不知道如何以及是否是解决我的问题的正确方法。

预先感谢您的每一个答案。

 <?php $fileIncPath = get_template_directory(); include("$fileIncPath/phpform/test.php"); ?> <link rel="stylesheet" href="style.css" type="text/css"> <div class="container"> <form id="contact" action="" method="post"> <h3>Contact-Form</h3> <fieldset> <img src="image1.png" id="Image1" name="Firmenwebseite"> <img src="image2.png" id="Image2" name="Onlineshop"> <img src="image3.png" id="Image3" name="Sonstiges"> </fieldset> <fieldset> <input placeholder="Name" type="text" name="name" tabindex="1" autofocus> </fieldset> <fieldset> <input placeholder="Message" type="text" name="message" tabindex="1" autofocus> </fieldset> <fieldset> <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button> </fieldset> </form> </div> <script> var Image1 = document.getElementById("Image1"); var Image2 = document.getElementById("Image2"); var Image3 = document.getElementById("Image3"); var Option; Image1.addEventListener("click", function(){ Option = "Image1"; }); Image2.addEventListener("click", function(){ Option = "Image2"; }); Image3.addEventListener("click", function(){ Option = "Image3"; }); </script>

和 php 文件“test.php”

 <?php if(isset($_POST['submit'])) { $to = 'example@mail.com'; $name = $_POST['name']; $message = $_POST['message']; $messageAndName = $name . $message; mail($to, "Subject" , $nameAndMessage); } ?>

Answer 1

我们可以使用隐藏字段来存储要发送到 php 端的值，并且可以使用 onclick 事件处理程序通过 javascript 设置字段值。

<form submit="something.php" method="GET"> you can also use post.

    ...

    <input id="image-field" type="text" value="" hidden name="image_value" />

    <img data-value="value to send 1" src="..." onclick="setImageField(this)" />
    <img data-value="value to send 2" src="..." onclick="setImageField(this)" />
    <img data-value="value to send 3" src="..." onclick="setImageField(this)" />

    <button type="submit">Submit</button>
</form>

<script>

    let field = document.getElementById("image-field");

    function setImageField(img) {
        let to_send = img.getAttribute("data-value");
        field.setAttribute("value", to_send);
    }

</script>

在 php 端，该值将作为image_value GET/POST 值接收