How to incorporate a div to the form article or the other way around?

Question

I’m developing a Fomulário for a project and I needed to add images only that these images represent the place of the client’s chairs and when the user clicks on any of these chairs the place is marked, only that it is necessary to have this marked location displayed on another page next to the other form data like name, password, etc. Thus remaining:

Name: Java

Password: 123

Chosen chair: 1 - A , (And other chairs if the user has chosen more than one)

Unlike the form these images representing the client’s place are inside a div(making it easier to style them by CSS), and I came across the following error when I tried to create a variable in my PHP file for it to appear as the other information typed by the user:

Notice: Undefined index: tCadeira1 in C:\xampp\www\teste\dados.php on line 54

"tCadeira1" was the variable I created in PHP. Now I don’t know how to do it because I tried to put the closing of the tag form after div’s, inside the div but it’s no use.

My HTML file:

<form action="dados.php" method="post">

    <input type="text" id="cNome" name="tNome" title="Com no máximo 20 letras" size="20" maxlength="20" placeholder="       Digite Seu Nome"/>

    <input id="submit" type="image" src="imagens/ButtonAceitar.png" />
    <input type="reset" id="resetar" value=""  />
</form>

<div id="cadeiras">
    <img src="imagens/cadeiraAzul.png" name="tCadeira1" onClick="cor(this)">
    <img src="imagens/cadeiraAzul.png" name="tCadeira2" onClick="cor(this)">
    <img src="imagens/cadeiraAzul.png" name="tCadeira3" onClick="cor(this)">
    <img src="imagens/cadeiraAzul.png" name="tCadeira4" onClick="cor(this)">
</div>

My PHP file:

<?php

$nome = $_POST["tNome"];
$cadeira = $_POST["tCadeira1"];

echo "$nome, obrigado por se cadastrar e comprar o seu ingresso em nosso site.<br>Cadeira(as) escolhida(as): $cadeira ";

?>

My JS file:

function cor(e) {
  if (e.getAttribute("src") == "imagens/cadeiraAzul.png") {
    e.setAttribute("src", "imagens/cadeiraPreta.png");
  } 

  else {
    e.setAttribute("src", "imagens/cadeiraAzul.png");
  }
}

Show solutions with possible tag languages of this question, if possible.

Answer 1

This error is PHP and not HTML, $_POST with input, select, textarea and button, no use putting name="" that he won’t recognize.

Maybe use input type=image resolve:

<div id="cadeiras">
    <input type="image" src="imagens/cadeiraAzul.png" name="tCadeira1" onClick="cor(this)">
    <input type="image" src="imagens/cadeiraAzul.png" name="tCadeira2" onClick="cor(this)">
    <input type="image" src="imagens/cadeiraAzul.png" name="tCadeira3" onClick="cor(this)">
    <input type="image" src="imagens/cadeiraAzul.png" name="tCadeira4" onClick="cor(this)">
</div>

Something I always say, stop doing things random, most of the mistakes are in this, has documentation of almost everything that is popular technology and there are still alternative documentations, read and learn first, does not invent from the head that will give problem.

Documentation and references

• https://www.w3.org/wiki/HTML/Elements/input
• https://www.w3.org/TR/html401/interact/forms.html#h-17.4 (is the specification for HTML4.01, but a lot is still valid in HTML5)
• MDN html reference https://developer.mozilla.org/en-US/docs/Web/HTML (is reasonable but better than many websites)
• http://php.net/manual/en/

Answer 2

There’s some stitches you need to fix:

• Everything you post needs to be inside the form (the div #chairs needs to go inside the form)

• Images are not sent this way in a form, you need an input with the name attribute and the value of the selected chair, images will not work.

Given this, what you can do is the following

• When the user selects an image, you add to the form in a javascript event an input with type Hidden with the value of the selected chair, the rest should work perfectly.

With Jquery it would be as follows

$('img').on('click', function(){
    $(this).addClass('selected');
});
$('form').on('submit', function(){
   var form = $(this);
   $('img.selected').each(function(){
      var html = '<input type="hidden" name="NOME PARA REFERÊNCIA NO PHP" value="VALOR DA IMAGEM SELECIONADA" />'
      form.prepend(html);
   });
});