How can I save an "Image Click" value so that I can continue working with this value in my PHP program?

user_12690918 0
Viewed 331

I am coding a contact form for my website right now and I would like to design the answers of the first question as three clickable images, whereby only one of the three images can be clicked on. With a click, the value should be sent to my e-mail address, just like that of the input fields in the subsequent questions when the Submit button is clicked, using the PHP mail function.

Unfortunately, I don't know how and whether I can trigger an action when I click on an image, which sends the value to my PHP program.

I have already tried the html onclick event attribute, but I read on the internet that it is not really suitable.

What I'm trying to do now is to cache the variable with the JavaScript function addEventListener () and at the end when clicking the Submit button, to pass this value to the PHP program. I just don't know exactly how and if it is the right way to solve my problem.

Thanks in advance for every answer.

<?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>

and the 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);
} 

?>

forms html php javascript
1 Answers

We can use a hidden field to store the value to be sent to the php side, and the fields value can be set through javascript using the onclick event handler.

<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>

and in the php side, the value would be recieved as image_value GET/POST value

user_33018670
Related