Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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';
}
}
?>$.ajax. Pesquise.
Abraços,
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.
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';
}
}
?>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');
});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
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?
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';
}
}
?>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.
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';
}
}
?>é 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
>
é 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
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:
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....
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