How to incorporate a div to the article form or vice versa?

Question

How to incorporate a div to the article form or vice versa?

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

I'm developing a template for a project and I needed to add images only if these images represent the place of the client's chairs and when the user clicks on any of those chairs the place is marked, only it is necessary to make that place marked is displayed on another page next to the other data of the form as name, password, etc. So:

Name: Java

Password: 123

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

Unlike the form, these images that represent the client's place are inside a div (making them easier to stylize them through CSS), and I came across the following error when I tried to create a variable in my PHP file so that it appears as other information entered 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'm not sure how to do this because I've tried to put the form tag closing after the div's, inside the div 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.

php javascript html css

asked by anonymous 27.01.2017 / 01:44

2 answers

While loop - number counter minus 0 "What eh" / "how to solve" a "null object reference" error? What appears on the console?

score 2 · Answer 1

This error is PHP and not HTML, $_POST with input , select , textarea and button , it's no use putting name="" which it will not recognize.

Maybe use input type=image solve:

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

One thing I always say , stop doing random things , most mistakes are in this, have documentation of almost everything that is popular technology and there are still documentation alternatives, read and learn first, do not invent the head that will give problem.

Documentations and References

link
link (this is the HTML4.01 specification, but a lot still matters in the HTML5)
html MDN link (it's reasonable, but better than many sites)
link

score 1 · Answer 2

There are some things you need to fix:

Everything you post needs to be inside the form (the div #currents need to go to the form)
Images are not sent this way in a form, you need an input with the name attribute and the selected chair value, images will not work.

Given this, what you can do is the following

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

With JQuery it would look like this

$('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);
   });
});