Selecionar item e exibir resultado na tela sem carregar a página

Biel. · Junho 4, 2016

Boa noite a todos. Direto ao ponto. Pessoal o codigo abaixo exibe na tela o item que foi selecionado.

Gostaria que continuasse exibindo normalmente na tela, mas sem carregar a página.



<?php

error_reporting(0);

ini_set("display_errors", 0 );

?>


EX 1

<form id="frm" name="form1" method="post" action="">

  <select name="cursos" required onchange="onSelectChange();">

    <option value="" ></option>

    <option value="php" <?php if($_POST['cursos'] == 'php'){ echo 'selected'; } ?> >php</option>

    <option value="css" <?php if($_POST['cursos'] == 'css'){ echo 'selected'; } ?> >css</option>

  </select>

</form>


<script>

function onSelectChange(){

 document.getElementById('frm').submit();

}

</script>



<?php

if (isset($_POST["cursos"])){

if ($_POST['cursos'] == 'php'){

echo 'voce selecionou php'; 

} 


elseif ($_POST['cursos'] == 'css'){

echo 'voce selecionou css'; 

} 

}


?>

Biel. · Junho 4, 2016

Dessa forma exibe na tela o nome que está dentro do option value=""

Gostaria de que exibisse na tela o resultado em php sem carregar a página

<select id="mySelect" onchange="myFunction()">
  <option value="Audi">Audi
  <option value="BMW">BMW
  <option value="Mercedes">Mercedes
  <option value="Volvo">Volvo
</select>

<p id="biel"></p>

<script>
function myFunction() {
    var x = document.getElementById("mySelect").value;
    //document.getElementById("biel").innerHTML = "voce selecionou : " + x;
document.getElementById("biel").innerHTML = "" + x;
}
</script>

Matheus Brito · Junho 4, 2016

$.ajax. Pesquise.

Abraços,

gabrieldarezzo · Junho 5, 2016

reparei que você está utilizando JavaScript puro.

É possível tabem fazer requisição sem muita dificuldade.

Um exemplo pra você.

Conteúdo do 'pagina.html':

<div id="txt-nois">
	Nois Que voa Bruxão!
</div>

Conteúdo do index.html:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

	<div id="result"></div>
	
	<br />
	
	<button id="btn-action">Click</button>
	
	<script type="text/javascript">
		
		
		document.getElementById('btn-action').addEventListener('click', function() {
			
			ajax = new XMLHttpRequest();
			ajax.open('GET', 'pagina.html', true);
			ajax.send();
			
			ajax.onreadystatechange = function() {
				if(ajax.readyState == 4 && ajax.status == 200) {
					// console.log(ajax.responseText);
					document.getElementById('result').innerHTML = ajax.responseText;
				}
			}
			
		});
	</script>
</body>
</html>

Uma referencia caso precise de mais parâmetros.

https://developer.mozilla.org/pt-BR/docs/Web/API/XMLHttpRequest

O 200 é do retorno da requisiçao HTTP.

https://pt.wikipedia.org/wiki/Lista_de_c%C3%B3digos_de_status_HTTP

Seria equivalente ao 'success' do Jquery.ajax

Abraços.

Biel. · Junho 6, 2016

gabrieldarezzo, não conseguir fazer. O exemplo que postei, ao selecionar um item o resultado é exibido na tela em php sem necessidade de clicar em um botão. O problema é que a página é carregada. Gostaria que a página não carregasse, mas que o resultado fosse exibido na tela em php

<?php
error_reporting(0);ini_set("display_errors", 0 );
?>

<form id="frm" name="form1" method="post" action="">
  <select name="cursos" required onChange="this.form.submit()">
    <option value="" ></option>
    <option value="php" <?php if($_POST['cursos'] == 'php'){ echo 'selected'; } ?> >php</option>
    <option value="css" <?php if($_POST['cursos'] == 'css'){ echo 'selected'; } ?> >css</option>
  </select>
</form>

<div id="result"></div>
	
	<br />
	
	<button id="btn-action">Click</button>
	
	<script type="text/javascript">
		
		
		document.getElementById('btn-action').addEventListener('click', function() {
			
			ajax = new XMLHttpRequest();
			ajax.open('GET', 'pagina.html', true);
			ajax.send();
			
			ajax.onreadystatechange = function() {
				if(ajax.readyState == 4 && ajax.status == 200) {
					// console.log(ajax.responseText);
					document.getElementById('result').innerHTML = ajax.responseText;
				}
			}
			
		});
	</script>

<?php
if (isset($_POST["cursos"])){
if ($_POST['cursos'] == 'php'){
echo 'voce selecionou php'; 
} 

elseif ($_POST['cursos'] == 'css'){
echo 'voce selecionou css'; 
} 
}

?>

gabrieldarezzo · Junho 6, 2016

O exemplo que postei, ao selecionar um item o resultado é exibido na tela em php sem necessidade de clicar em um botão

Para isso você adapta o exemplo a sua necessidade, o meu intuito não é eu fazer para você e sim mostrar um caminho.

Neste caso você pode utilizar o evento 'change' do seu select no JavaScript. (" ao selecionar um item")

Assim substituindo o trecho:

document.getElementById('btn-action').addEventListener('click', function() {
  
});

Porem relendo com mais calma,

Pelo que entendi sua duvida é simplesmente fazer um 'set' (Já que tem 2 alternativas para Ajax)

Veja uma 'setagem' pelo JavaScript puro:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
	
	<select name="linguagem" id="select-id">
		<option value="1">PHP</option>
		<option value="2">JavaScript</option>
		<option value="3">C</option>
		<option value="4">C++</option>
	</select>
	
	<script type="text/javascript">
		var selecionado = '2'; //Vem do Banco... (Exemplo abaixo de como criar variavel JS pelo PHP ...)
		var options = document.getElementById('select-id').getElementsByTagName('option');
		for(x in options){
			if(options[x].value == selecionado){
				options[x].selected = 'selected';
			}
		}
	</script>
	
	
</body>
</html>

Ai pra você criar isso aqui:

var selecionado = '2';

No PHP.. ?!

echo "var selecionado = '$sua_variavel';";

Apesar que via JQuery desta vez seria mais fácil mesmo:

$(document).ready(function() {
	$('#select-id').value('2');
});

Biel. · Junho 6, 2016

gabrieldarezzo obrigado por todo seu esforço em me mostrar o caminho para tentar resolver o que quero fazer.

A realidade é que não conseguir fazer o que quero, mesmo você me mostrando o caminho, pois não entendo nada de javascript. Se fosse php eu entenderia, mas como é javascript continuo sem saber como resolver o que quero

Daqui há algum tempo, quando eu tiver um conhecimento razoável em javascript, o que você postou entenderei com certeza e resolverei tarefas em javascript sem dificuldades. Só tenho a lhe agradecer por seu esforço. Obrigado

gabrieldarezzo · Junho 6, 2016

Pow que pena que não deu certo.

Fica frio JavaScript leva um pouco de tempo mesmo pra pegar, até hj ainda tento aprender ele hahaha

Minha duvida principal é...

A realidade é que não conseguir fazer o que quero

Afinal de contas oq você quer?

Ao carregar a página já vir selecionado uma opção do select?

Ou selecionar um estado por exemplo 'SP' aparecer todas cidades correspondentes?

Biel. · Junho 7, 2016

Do jeito que o codigo está abaixo ao selecionar um item qualquer no option value o codigo php exibe na tela o item que foi selecionado. O problema é que a página é carregada. Gostaria que a página não carregasse e que o codigo php se encarregasse de mostrar o item que foi selecionado



<?php

error_reporting(0);ini_set("display_errors", 0 );

?>


<form id="frm" name="form1" method="post" action="">

  <select name="cursos" required onChange="this.form.submit()">

    <option value="" ></option>

    <option value="php" <?php if($_POST['cursos'] == 'php'){ echo 'selected'; } ?> >php</option>

    <option value="css" <?php if($_POST['cursos'] == 'css'){ echo 'selected'; } ?> >css</option>

  </select>

</form>



<?php

if (isset($_POST["cursos"])){

if ($_POST['cursos'] == 'php'){

echo 'voce selecionou php'; 

} 


elseif ($_POST['cursos'] == 'css'){

echo 'voce selecionou css'; 

} 

}

?>

gabrieldarezzo · Junho 7, 2016

Então, neste caso simplesmente precisa utilizar 2 coisas.

1- Capturar o evento change do select de alguma forma.

2- Chamar via ajax o retorno da sua outra página -entenda o conceito de ajax:

https://pt.wikipedia.org/wiki/AJAX_(programa%C3%A7%C3%A3o

A XMLHttpRequest tem um papel importante na técnica de desenvolvimento web Ajax para se comunicar com os scripts do lado do servidor.

Ou seja ele se comunica com o servidor sem a necessidade do refresh na pagina.

A Parte 1 podemos fazer assim:

index.html:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

	<select name="cursos" id="cursos">
		<option value="">-- Selecione --</option>
		<option value="php">PHP</option>
		<option value="css">CSS</option>
	</select>
	
	<script type="text/javascript">
		
		//Fica monitorando o evento 'change' do id=cursos, ao ocorrer este evento é disparado a função...
		document.getElementById('cursos').addEventListener('change', function() {
			alert(document.getElementById('cursos').value);
		});
		
	</script>
</body>
</html>

Inicialmente o value do id=cursos sempre é o primeiro:

<option value="">-- Selecione --</option>

Então assim que o usuario trocar/alterar é disparado o evento 'change' que é monitorado pela função:

document.getElementById('cursos').addEventListener('change', function() {
	alert(document.getElementById('cursos').value);
});

Agora vamos fazer a segunda parte que é pegar o valor do cursos e disparar o evento ajax já exemplificado.

index.html (v0.1)

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

	<select name="cursos" id="cursos">
		<option value="">-- Selecione --</option>
		<option value="php">PHP</option>
		<option value="css">CSS</option>
	</select>
	
	<hr />
	<div id="resultado"></div>
	
	<script type="text/javascript">
		
		//Fica monitorando o evento 'change' do id=cursos, ao ocorrer este evento é disparado a função
		document.getElementById('cursos').addEventListener('change', function() {
			//Caso queira passar mais de fique com o exemplo abaixo:
			//var params = "lorem=ipsum&name=binny"; 
			
			//Porem só precisamos passar o value do 'cursos'
			var params = "cursos=" + document.getElementById('cursos').value;
			
			var ajax = new XMLHttpRequest();
			ajax.open('POST', 'select.php', true);
			ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
			ajax.send(params);
				
			ajax.onreadystatechange = function() {
				if(ajax.readyState == 4 && ajax.status == 200) {
					document.getElementById('resultado').innerHTML = ajax.responseText;
				}
			}
		});
		
	</script>
</body>
</html>

E obviamente repare nesta parte:

ajax.open('POST', 'select.php', true);

Precisamos então ter uma pagina chamada 'select.php' aguardando um POST.

<?php
if (isset($_POST["cursos"])){
	if ($_POST['cursos'] == 'php'){
		echo 'voce selecionou php'; 
	} elseif ($_POST['cursos'] == 'css'){
		echo 'voce selecionou css'; 
	} 
}

A resposta gerada por ela é inserida dentro da div#resultado.

com esse trecho de JavaScript:

document.getElementById('resultado').innerHTML = ajax.responseText;

Abraços e bons estudos.

Biel. · Junho 7, 2016

gabrieldarezzo, funcionou perfeitamente. Muito bom mesmo. :D

Só tem um detalhe: Quando seleciono um item qualquer no option value é exibido na tela também um segundo select. Gostaria que esse segundo select não aparecesse.

* o codigo html, javascript, ajax e php a ideia é para ficar tudo em uma página mesmo conforme está abaixo. Só não gostaria que esse segundo select não aparecesse quando um item qualquer fosse selecionado.



<select name="cursos" id="cursos" required >

		<option value="" selected>-- Selecione --</option>

		<option value="php">PHP</option>

		<option value="css">CSS</option>

	</select>


<hr />


	<div id="resultado"></div>


	<script type="text/javascript">


		//Fica monitorando o evento 'change' do id=cursos, ao ocorrer este evento é disparado a função

		document.getElementById('cursos').addEventListener('change', function() {

			//Caso queira passar mais de fique com o exemplo abaixo:

			//var params = "lorem=ipsum&name=binny"; 


			//Porem só precisamos passar o value do 'cursos'

			var params = "cursos=" + document.getElementById('cursos').value;


			var ajax = new XMLHttpRequest();

			ajax.open('POST', 'select.php', true);

			ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

			ajax.send(params);


			ajax.onreadystatechange = function() {

				if(ajax.readyState == 4 && ajax.status == 200) {

					document.getElementById('resultado').innerHTML = ajax.responseText;

				}

			}

		});


	</script>


<?php

if (isset($_POST["cursos"])){

if ($_POST['cursos'] == 'php'){

echo 'voce selecionou php'; 

} 


elseif ($_POST['cursos'] == 'css'){

echo 'voce selecionou css'; 

} 

}

?>

gabrieldarezzo · Junho 7, 2016

é apenas um chute...

mas você separou os 2 arquivos?

Ao meu entender você manteve um arquivo só...

Meu exemplo precisa ter 2.

index.html

select.php

Caso queira fazer apenas um é possivel tmb. (apesar que não recomendo)

No seu código php você pode verificar, caso caia dentro do $_POST ali.

Ficaria algo assim..

<?php
if (isset($_POST["cursos"])){
	if ($_POST['cursos'] == 'php'){
		echo 'voce selecionou php'; 
	}elseif ($_POST['cursos'] == 'css'){
		echo 'voce selecionou css'; 
	} 
	die();
}

?><!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<!-- .... restante do code -->

Porem prefira separar a parada...

Cria uma pastinha na raiz do seu site ex:

'ajax'

e nela você coloca os arquivos referente ao ajax.....(no seu caso seria o select.php)

Abraços

Biel. · Junho 8, 2016

é apenas um chute...

mas você separou os 2 arquivos?

Ao meu entender você manteve um arquivo só...

Meu exemplo precisa ter 2.

index.html

select.php

Caso queira fazer apenas um é possivel tmb. (apesar que não recomendo)

No seu código php você pode verificar, caso caia dentro do $_POST ali.

Ficaria algo assim..
<?php
if (isset($_POST["cursos"])){
	if ($_POST['cursos'] == 'php'){
		echo 'voce selecionou php'; 
	}elseif ($_POST['cursos'] == 'css'){
		echo 'voce selecionou css'; 
	} 
	die();
}

?><!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	
Porem prefira separar a parada...

Cria uma pastinha na raiz do seu site ex:

'ajax'

e nela você coloca os arquivos referente ao ajax.....(no seu caso seria o select.php)

Abraços

gabrieldarezzo para o que eu quero fazer tem que ser tudo em uma só página mesmo; colocar os códigos em duas ou mais páginas não é viável. Tudo tem que acontecer em uma só página :mellow:

gabrieldarezzo · Junho 8, 2016

Uma coisa é 'exibição'.

Outra é separação física dos arquivos.

Você pode ter 20 arquivos php e todos serem chamados apenas pelo index.php sem necessariamente efetuar um reload.

Já viu alguma coisa assim?

<?php

require_once 'header.php';
require_once 'content.php';
require_once 'footer.php';

No seu caso separar os arquivos e chamar um via AJAX apenas a parte que deve se comportar como AJAX...

Quando se pensa em ajax, você esquece o Re-Load da pagina...

Refaça o meu exemplo da #10 que você entende....

Arquivado

Selecionar item e exibir resultado na tela sem carregar a página

Recommended Posts

Biel. 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

Biel. 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matheus Brito 12

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

Biel. 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

Biel. 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

Biel. 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

Biel. 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

Biel. 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

PHP+Codeigniter - Dúvida referente a PDV

PHP+Codeigniter - Dúvida em Relação a Teclas

Fóruns

Tempo Real

Informação importante