Passando imagem como string para outra página?

Tomoyo · 4 de fevereiro de 2017

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.

d0u9l4s · 4 de fevereiro de 2017

Tente asim:

HTML: altere os ids das div para utilizá-los como nome das suas sessões do cinema:

<div id="A"></div>
<div id="B"></div>
<div id="C"></div>
<div id="D"></div>

HTML: inclua um campo hidden (oculto) dentro do form para enviar as cadeiras/sessões marcadas:

<input type="hidden" id="cadeirasmarcadas" name="cadeirasmarcadas" value=""/>

Java Script: acrescente a função para gerir os dados das cadeiras e sessões:

function cadeiras(){
    var marcadas = [];

    var local   = document.getElementById('local');
    var totalcadeiras   = local.getElementsByTagName('img').length;
    var qtdesessoes     = local.getElementsByTagName('div').length;

    for (s = 0; s < qtdesessoes; s++) {
        var sessoes  = local.getElementsByTagName('div')[s];
        var totalcadeiras = sessoes.getElementsByTagName('img').length;
        for (i = 0; i < totalcadeiras; i++) {
            var cadeiras = sessoes.getElementsByTagName('img')[i].src;
            if (cadeiras.includes("cadeiraPreta")){
                var cadeira  = sessoes.getElementsByTagName('img')[i].name;
                var sessao  = local.getElementsByTagName('div')[s].getAttribute('id');
                marcadas.push(cadeira.replace( /^\D+/g, '')+'-'+sessao);
            }
        }
    }
    cadeirasmarcadas.setAttribute('value',marcadas);
}

Php: acrescente uma variável para receber os dados, conforme o campo inserido no html e mande exibir conforme necessário:

if(!empty($_POST["tNome"])) $nome = $_POST["tNome"]; else $nome = "Sem nome";
if(!empty($_POST["cadeirasmarcadas"])) $cadeiras = $_POST["cadeirasmarcadas"]; else $cadeiras = "Nenhuma Cadeira Marcada";

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

Resultado:

Tomoyo · 4 de fevereiro de 2017

Pode só comentar o código? Para facilitar meu intendimento.

Por exemplo o aquele "!empty" faz ?

Essa função das cadeiras precisa ser adicionada em que parte do HTML?

DiF · 4 de fevereiro de 2017

@Tomoyo Você não passa imagens como string, mas sim valores. HJ em dia o HTML 5 tem uma propriedade chamada data-attributes que permite que associe um valor para um determinado elemento.

Combinando isso com jQuery e ajax. você faz um sistema em tempo real, com menos linhas e mais robusto.

<div id="A" data-assento="1A"></div>
<div id="B" data-assento="2A"></div>
<div id="C" data-assento="3A"></div>
<div id="D" data-assento="4A"></div>

Seria a primeira fileira.. e por aí vai.

Por jQuery você usa um laço de each para iterar o vetor de valores, que será pego pelo jQuery dos "data-assento"

e por jQuery Ajax com a função $.ajax() você faz a requisição assíncrona para o arquivo do php... e cadastrar retornando os elementos divs preenchidos com cor que foram escolhidas.

Tomoyo · 4 de fevereiro de 2017

@DiF,toda vez que esqueço de informa no tópico, mas eu não posso utilizar outras linguagens além de HTML,PHP e JS,na verdade estou usando PHP a pouco tempo pois sou iniciante ainda.

Então se tiver outra maneira e nem que seja um pouco mais simples do que o amigo de cima utilizando apenas essas linguagens que falei fico agradecido.

Vou editar no tópico acrescentando isso.

DiF · 4 de fevereiro de 2017

@Tomoyo Não há nada de diferente.. jQuery é javascript meu amigo. Só que bem melhor e mais fácil de entender

e o outro que mencionei é HTML5 é só o HTML com alguns elementos e atributos a mais. nada diferente!

adicionado 1 minuto depois

PS esqueça ideia de usar imagens assim... use cores. No máximo você poderá usar imagens de background das poltronas... mas de forma fixa.. só alterando o valor

Tomoyo · 4 de fevereiro de 2017

@DiF, o do HTML eu to sabendo, mas jQuery não é considerado outra linguagem não ? O.o

Digo, então eu posso fazer isso que está falando com jQuery dentro do meu arquivo JS?

Mostre como por favor.

DiF · 4 de fevereiro de 2017

Sim, você pode usar o jQuery.. e ele não é outra linguagem. é Javascript.

Mais precisamente um framework javascript. ou se preferir, pode ser chamado de biblioteca Javascript.

De fato é muito mais simples usar o jQuery do que o js puro, ainda mais quando se precisa usar ajax(requisição assíncrona) ou colocar efeitos de transição... como fade e outros

Tomoyo · 4 de fevereiro de 2017

@DiF Intendi então, me mostra como faço essa parte do Jquery com o each e a função do ajax?

DiF · 4 de fevereiro de 2017

@Tomoyo Desculpe a demora, agora pesquisando nas minhas coisas aqui lembrei uma coisa que pode ser bem mais fácil do que você pensa.

Você pode usar checkbox para marcar as cadeiras por exemplo:

var cadeira = $(":checkbox");
		cadeira.change(function(event){
			event.preventDefault();
		    var checkValues = $('input[name="checks[]"]:checked').map(function(){
		        return $(this).val();
		    }).get();

		    $.ajax({
		        url: 'processa.php',
		        type: 'POST',
		        dataType: 'html',
		        data: { checks: checkValues }
		        
		    })
		    .done(function(callback) {
		    	  $(".resultado").html(callback);
		    	  
		   	})
		   	.fail(function(callback) {
		   	 	  $(".resultado").html(callback);
		   	});
		});
	});

Este código funciona da seguinte forma:

É armazenado em uma variável os checkboxes.

Depois é chamado a função change() que executa algo quando é mudado.

Criamos uma variável para armazenar todos os checkboxes selecionados.. ou seja,
a cadeira A1, A2 e por ai vai. A função map() faz o papel de mapear e repois retornar o valor.

a função $.ajax() é responsável pela requisição assíncrona onde ali em URL é chamado o arquivo php que receberá os valores do tipo POST

o atributo data() por exemplo é onde é enviado os valores propriamente dito.
as funções done() e fail() servem para indicativo de sucesso ou falha.

Você pode criar as cadeiras manualmente no HTML ou usar php e fazer um laço de FOR para gerar os checkbox.

usando vetores.

Há um tempo, quando gostava de colecionar figurinhas de algum da copa, eu criei um sistema de auxilio para o album. Nele eu usava para saber quais as que eu já tinha ou faltava... quando comprava uma e colava no album, eu ia no sistema e clicava no numero da figurinha e deixava registrada...

A ideia é parecida, no caso não são figurinhas, mas sim cadeiras!

Se quiser, eu até posso disponibilizar os arquivos, mas eles não possuem muitos comentários.. rsrs

Mas o lance é esse, acredito que se pensar em fazer com checkbox, torna seu trabalho mais simples!

Tomoyo · 4 de fevereiro de 2017

@DiFEntão no caso se eu for criar as cadeiras no meu arquivo html que está dentro da tag "form" eu vou fazer ela aparecer através da tag "img" e criar um input type="hidden" e alterar a linha 4 desse código que mandou agora?

Como vai ser feita a ligação das cadeiras para poder ser armazenado os valores?

Em pensar que seu album de figurinha ia me salvar uma vez kkkkkkk.

Se der disponibilizar o arquivo pra mim ver como ele funciona melhor,ficou meio confuso a forma de como eu vou utilizar aquela variável "checkValues" de acordo com as minhas imagens html.

d0u9l4s · 4 de fevereiro de 2017

4 horas atrás, Tomoyo disse:

Pode só comentar o código? Para facilitar meu intendimento.

Por exemplo o aquele "!empty" faz ?

Essa função das cadeiras precisa ser adicionada em que parte do HTML?

Comentei e Anexei o projeto aqui. cinema.rar

DiF · 4 de fevereiro de 2017

@Tomoyo Como disse anteriormente, você não usa imagens!!!! você usa campos do tipo checkbox. Claro que com CSS você pode manipular a aparência para deixar como uma imagem, mas de fato o que será enviado vai ser um value do campo!

Estou preparando ele aqui, vou tentar dar uma comentada nele para que entendas o que quis fazer.

Tomoyo · 4 de fevereiro de 2017

1 hora atrás, d0u9l4s disse:

Comentei e Anexei o projeto aqui. cinema.rar

Muito obrigado amigo,era exatamente dessa forma que queira.Que script em, vai servi de estudo para mim.

1 hora atrás, DiF disse:

@Tomoyo Como disse anteriormente, você não usa imagens!!!! você usa campos do tipo checkbox. Claro que com CSS você pode manipular a aparência para deixar como uma imagem, mas de fato o que será enviado vai ser um value do campo!

Estou preparando ele aqui, vou tentar dar uma comentada nele para que entendas o que quis fazer.

Ok, apesar do nosso amigo ali ter mandado pode mandar da sua forma,pois quero ver como que fica além de também ter gostado desse seu método.E comente <3 plz.

Já vou agradecer nesse post, pois não to afim de ler as regras desses fórum e pode ser considerado flood um post só para agradecer.Então obrigado pelas dicas, tmj.

@DiF

DiF · 5 de fevereiro de 2017

@Tomoyo Ok, Do meu jeito é um pouco mais avançado, mas permite que use o dinamismo do ajax de forma fácil, além de que permite a possibilidade de usar bibliotecas jquery para aplicar efeitos de transição!

O código do amigo funciona e é o que você queria, o meu é só uma referência, de como pode ser usado os checkbox para criar um conjunto de poltronas e implementar o código.... enfim use a criatividade!

Extraia a pasta album para dentro do seu root de projetos e depois no localhost, abra o arquivo album.php

Album_figurinhas.rar