Как я могу сохранить значение «Image Click», чтобы продолжить работу с этим значением в моей программе PHP?

Question

Я кодирую контактную форму для своего веб-сайта прямо сейчас, и я хотел бы оформить ответы на первый вопрос в виде трех интерактивных изображений, при этом можно щелкнуть только одно из трех изображений. Одним щелчком мыши значение должно быть отправлено на мой адрес электронной почты, так же как и в полях ввода в последующих вопросах, когда нажимается кнопка «Отправить» с использованием функции PHP mail.

К сожалению, Я не знаю, как и могу ли я инициировать действие, когда нажимаю на изображение, которое отправляет значение в мою PHP программу.

Я уже попробовал атрибут события html onclick, но Я прочитал в inte rnet, что он на самом деле не подходит.

Сейчас я пытаюсь кэшировать переменную с помощью функции 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 file "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, а значение поля можно установить через javascript с помощью обработчика события onclick.

и на стороне php значение будет получено как image_value значение GET / POST