Estou desenvolvendo um fomulário para um projeto de cinema e nele precisei adicionar imagens só que essas imagens representam o lugar das cadeiras do cliente e quando o usuário clica em alguma dessas cadeiras o local fica marcado, só que é necessário fazer com que esse local marcado seja exibido em outra página junto dos outros dados do formulário como nome, senha, etc.Ficando assim:
Nome: Java
Senha: 123
Cadeira escolhida: 1 - A , (E outras cadeiras se o usuário tiver escolhido mais de uma)
Diferente do formulário essas imagens que representam o lugar do cliente estão dentro de uma div(ficando mais fácil estiliza-las pelo CSS).
Meu arquivo HTML:
<form id="cinema" action="dados.php" method="post">
<fieldset id="cadastro"><legend>Cadastro</legend>
<h5>Nome:</h5>
<input type="text" class="borda" id="cNome" name="tNome" title="Com no máximo 20 letras" size="20" maxlength="20" placeholder=" Digite Seu Nome"/>
<input type="text" class="borda" id="cSobreNome" name="tSobreNome" title="Com no máximo 20 letras" size="20" maxlength="20" placeholder=" Digite Seu Sobre Nome"/>
</fieldset>
<fieldset id="local"><legend>Escolha o Local da Cadeira</legend>
<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)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira5" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira6" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira7" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira8" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira9" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira10" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira11" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira12" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira13" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira14" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira15" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira16" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira17" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira18" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira19" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira20" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira21" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira22" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira23" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira24" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira25" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira26" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira27" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira28" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira29" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira30" onClick="cor(this)"/>
</div>
<div id="cadeiras2">
<img src="imagens/cadeiraAzul.png" name="tCadeira31" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira32" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira33" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira34" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira35" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira36" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira37" onClick="cor(this)"/>
</div>
<div id="cadeiras3">
<img src="imagens/cadeiraAzul.png" name="tCadeira38" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira39" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira40" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira41" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira42" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira43" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira44" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira45" onClick="cor(this)"/>
</div>
<div id="cadeiras4">
<img src="imagens/cadeiraAzul.png" name="tCadeira46" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira47" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira48" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira49" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira50" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira51" onClick="cor(this)"/>
<img src="imagens/cadeiraAzul.png" name="tCadeira52" onClick="cor(this)"/>
</div>
</fieldset>
<input id="submit" type="image" id="submit" src="imagens/ButtonAceitar.png" />
<input type="reset" id="resetar" value="" />
</form>
Meu arquivo JS:
function cor(e) {
if (e.getAttribute("src") == "imagens/cadeiraAzul.png") {
e.setAttribute("src", "imagens/cadeiraPreta.png");
}
else {
e.setAttribute("src", "imagens/cadeiraAzul.png");
}
}
/* Faz com que a imagem da cadeira mude de cor,passando a impressão de que foi escolhida pelo usuário*/
Meu arquivo PHP:
<?php
$nome = $_POST["tNome"];
echo "$nome, obrigado por se cadastrar e comprar o seu ingresso em nosso site.<br>Cadeira(as) escolhida(as): Aqui ficaria as cadeiras escolhidas pelo usuário ";
?>
Se o usuário clica uma vez a cadeira muda de cor mostrando que foi escolhida pelo mesmo, caso ele clique novamente ela volta para a cor que estava antes fazendo com que ela não esteja mais escolhida pelo usuário,então resumindo o que quero é, se o usuário clicar na cadeira e depois no botão do tipo "submit" ele é redirecionado para outra página com os dados do mesmo e o local da cadeira escolhida por ele, na forma de string(Cadeira "A-1"), se o usuário selecionar mais de uma aparece o na forma de string o nome das outras cadeiras também e se ele não escolher nenhuma aparece uma mensagem "Cadeira não escolhida" no mesmo local que apareceria o nome das cadeiras(Isso eu sei que pode ser feito com "isset" ^^).Esse script ficou hard não consegui fazer, se alguem ao menos tentar ajudar já fico agradecido.
Obs: Utilizando apenas HTML, JS e PHP.