Jump to content
gust.php

Selecionar item de campo select passar ID e campo INPUT para PHP

Recommended Posts

Fala pessoal.

 

Quero fazer o seguinte: Tenho um campo select e um campo input. Quando eu selecionar um item do meu campo select, quero enviar o ID desse item, e o valor do campo input, que no caso é uma data, para um script PHP,  no PHP vou conferir uma situação e dizer se eu posso usar esse item ou não.

 

Alguém pode me mostrar um exemplo?

 

Obrigado.

Share this post


Link to post
Share on other sites

@gust.php Para fazer isso e continuar na mesma página você terá que usar o Ajax, vou deixar um exemplo, mais isso é só um exemplo ele não pode ser usado como base para nada.

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ajax</title>
    </head>
    <body>
        <form name="data">
            <select name="dia">
            </select>
            <select name="mes">
            </select>
            <select name="ano">
            </select>
        </form>
        <script>
            var formulario, dia, mes, ano;
            window.onload = function()
            {
                formulario = document.forms["data"];
                dia = formulario["dia"];
                mes = formulario["mes"];
                ano = formulario["ano"];
                for(num = 0; num < 32; num++)
                {
                    var elemento = document.createElement("option");
                    elemento.setAttribute("value", (num + 1));
                    elemento.innerHTML = (num + 1);
                    dia.appendChild(elemento);
                }
                for(num = 0; num < 12; num++)
                {
                    var elemento = document.createElement("option");
                    elemento.setAttribute("value", (num + 1));
                    elemento.innerHTML = (num + 1);
                    mes.appendChild(elemento);
                }
                for(num = 1930; num < 2019; num++)
                {
                    var elemento = document.createElement("option");
                    elemento.setAttribute("value", (num + 1));
                    elemento.innerHTML = (num + 1);
                    ano.appendChild(elemento);
                }
                dia.addEventListener("change", functionAjax);
                mes.addEventListener("change", functionAjax);
                ano.addEventListener("change", functionAjax);
            }

            function functionAjax()
            {
                let d, m, a;
                d = dia.value;
                m = mes.value;
                a = ano.value;
                let xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("demo").innerHTML = this.responseText;
                    }
                };
                xhttp.open("GET", `/pagina.php?dia=${d}&mes=${m}&ano=${a}`, true);
                xhttp.send();
            }
        
        </script>
    </body>
</html>

 

Share this post


Link to post
Share on other sites

Opa Gabriel ... Cara, obrigado pela resposta, só que acho que não me fiz entender direito. Vou colocar em código para exemplificar.

 

O que quero fazer é: Quando o usuário selecionar um motorista da lista, quero enviar o ID dele e a DATA preenchida no campo data para um script php. No PHP, vou conferir se esse cara esta de folga no dia e devolver uma mensagem ao usuário falando se ele pode ou não usar esse cara. Quero fazer isso com ajax mesmo, assim que o usuário selecionar o motorista, já devolvo uma mensagem se for o caso de negativo.

 


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ajax</title>
    </head>
   <body>
        <form name="formulario" id="">
            <select name="motorista" id="">
                  <option value="01">MOTORISTA 01</option>

                 <option value="02">MOTORISTA 02</option>

                 <option value="03">MOTORISTA 03</option>
            </select>

            <input id="data" name="data" type="text" placeholder="Data do serviço" class="form-control">
       </form>

 </body>

</html>

 

Share this post


Link to post
Share on other sites

@gust.php Seria algo assim?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ajax</title>
    </head>
    <body>
        <form name="formulario">
            <select name="motorista">
                <option value="01">MOTORISTA 01</option>
                <option value="02">MOTORISTA 02</option>
                <option value="03">MOTORISTA 03</option>
            </select>
            <br><br>
            <input name="data" type="date">
       </form>
        <script>

            var formulario, motorista, data;
            
            window.onload = function()
            {
                formulario = document.forms["formulario"];
                motorista = formulario["motorista"];
                data = formulario["data"];
                motorista.addEventListener("change", functionAjax);
                data.addEventListener("change", functionAjax);
            }

            function functionAjax()
            {
                let d, m;
                d = data.value;
                m = motorista.value;
                d = d.trim();
                m = m.trim();
                if (d == "")
                {
                    return false;
                }
                if (m == "")
                {
                    return false;
                }
                let xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("demo").innerHTML = this.responseText;
                    }
                };
                xhttp.open("GET", `/pagina.php?motorias=${d}&data=${m}`, true);
                xhttp.send();
            }
        
        </script>
    </body>
</html>

 

Share this post


Link to post
Share on other sites

Fala Gabriel, valeu meu amigo.

 

Cara, não testei ainda, mas pelo que estou lendo é isso mesmo. Deixa só eu tirar uma dúvida com você.

 

Na linha a baixo, o return da minha função em PHP vai chegar nesse this.responseText e a mensagem vai aparecer no campo com id=demo ...

É isso?

document.getElementById("demo").innerHTML = this.responseText;

Share this post


Link to post
Share on other sites

Fala @gabrielms, show cara ...

 

Cara, ta funcionando, é isso mesmo que eu preciso. To tendo um probleminha aqui com esse retorno. Será que pode me ajudar?

 

O seguinte ... Eu não envio esses dados para uma página .php, estou usando um framework, o zend, então na hora que ele me retorna a função, me da um erro, tenho que retornar um json.

 

Ta tudo funcionando, só não estou conseguindo pegar o retorno.

 

To fazendo assim:

 


<script type="text/javascript">

    var formulario, motorista, data;

    window.onload = function()
    {
        formulario = document.forms["formulario"];
        motorista = formulario["motorista"];
        data = formulario["datai"];
        motorista.addEventListener("change", functionAjax);
        data.addEventListener("change", functionAjax);
    }

    function functionAjax()
    {
        let d, m;
        d = data.value;
        m = motorista.value;
        d = d.trim();
        m = m.trim();
        if (d == "")
        {
            return false;
        }
        if (m == "")
        {
            return false;
        }
        let xhttp = new XMLHttpRequest();
        var url = '/Servico/verificaMotoristaFolga'; ---> minha rota
        var params = 'motorista='+m+'&datai='+d;
        xhttp.open('POST', url, true);

        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var return_data = xhttp.responseText;
                console.log(return_data);
                document.getElementById("demo").innerHTML = return_data.mensagem;
            }
        };

        xhttp.send(params);
        document.getElementById("demo").innerHTML = "Processando ....";
    }
</script>

 

PHP

 


    /**
     * Busca motoristas de folga
     * @return \Zend\View\Model\JsonModel
     */
    public function verificaMotoristaFolgaAction()
    {

        $request = $this->getRequest();
        $em = $this->getServiceLocator()->get('Doctrine\ORM\EntityManager');

        if($request->isPost()){
            $data = \DateTime::createFromFormat("d/m/Y",$request->getPost('datai'));

            $dataAtual = $data->format('Y-m-d');

            $escala = $em->getRepository("Servico\Model\EscalaFolga")
                ->verifica($dataAtual);
            $idMotorista = $request->getPost('motorista');

            $motorista = $em->find('Cadastro\Model\Motorista', $idMotorista);

            foreach ($escala as $es){
                if($es->getMotorista()->getIDPESSOA() == $motorista->getIDPESSOA()){
                    $data['mensagem'] = 'Esse motorista esta de folga nessa data!';


                }
            }
            return new \Zend\View\Model\JsonModel($data);
        }

    }

 

Share this post


Link to post
Share on other sites

@gust.php Você tem que escrever o resultado na página, o php não vai enviar o return dele pela requisição para o javacript.

 

Você pode utilizar o json_encode pra converter objeto para um texto json, depois um echo para escrever na página, assim o retorno dos dados para o ajax vai ser um texto em json.

echo json_encode(new \Zend\View\Model\JsonModel($data));

Depois que você receber a resposta do servidor você deve converter o texto em json para um object json, pra isso você usa o json.parse.

if (this.readyState == 4 && this.status == 200) {
   var return_data = JSON.parse(xhttp.responseText);
   console.log(return_data);
   document.getElementById("demo").innerHTML = return_data.mensagem;
}

 

Share this post


Link to post
Share on other sites
15 horas atrás, gabrielms disse:

@gust.php Você tem que escrever o resultado na página, o php não vai enviar o return dele pela requisição para o javacript.

 

Você pode utilizar o json_encode pra converter objeto para um texto json, depois um echo para escrever na página, assim o retorno dos dados para o ajax vai ser um texto em json.


echo json_encode(new \Zend\View\Model\JsonModel($data));

Depois que você receber a resposta do servidor você deve converter o texto em json para um object json, pra isso você usa o json.parse.


if (this.readyState == 4 && this.status == 200) {
   var return_data = JSON.parse(xhttp.responseText);
   console.log(return_data);
   document.getElementById("demo").innerHTML = return_data.mensagem;
}

 

@gabrielms cara, funcionando .... Muito obrigado pela ajuda. Forte abraço.

Share this post


Link to post
Share on other sites

Fala meu amigo @gabrielms.

 

Cara, resolvi fazer umas modificações no script e estou tendo problemas com o retorno. Estou logando o seguinte erro:

Error[object Object]

 

deixei o script assim:

Será que consegue me ajudar mais uma vez?

Obrigado.

 

$(function() {
    $("body").on('click', '#motorista', function () {

        var data = $('input[name=datai]').val();
        var motorista = $("#motorista select[name=motorista]").val();

        request = $.ajax({
            method: 'POST',
            url: base_url + '/Servico/verificaMotoristaFolga',
            data: {
                motorista: motorista,
                datai: data
            },
            success: function (response) {
                var return_data = JSON.parse(response);
                console.log(return_data.mensagem);

            },
            error: function (response) {
                console.log('Error' + response);
            }
        });
    });
});

Share this post


Link to post
Share on other sites

@gust.php É sempre bom publicar a sua solução, assim quem estiver com o mesmo problema vai saber resolver.

 

Eu não sei qual foi a sua solução; eu vi que você está tentando passar a resposta do server para um object json usando o método JSON.parse, porém eu não sei se você sabe, o próprio método ajax do jquery tem uma propriedade que especifica o tipo de dado que você espera retorna da sua solução e ele também converte para você, a propriedade em questão é a dataType.

 

$.ajax({
	method: 'POST',
	url: base_url + '/Servico/verificaMotoristaFolga',
	dataType: 'json',
	data: {
		motorista: motorista,
		datai: data
	},
	success: function (response) {
		var return_data = response;
	},
	error: function (response) {
		console.log('Error' + response);
	}
});

Passando a propriedade dataType com o valor "json" o jquery vai avalia a resposta como JSON e retorna um objeto json.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Gemenson Miranda
      Oi pessoal, estou com um problema na minha hospedagem LInux do Godaddy, publiquei meu site, fiz o apontamento correto do banco de dados, mas quando acesso a URL o site me exibe HTTP ERROR 500 exibe realizei a configuração do arquivo .htaccess, alterei as permissões para (755), nada disso resolve... A questão e que sempre que comento as informações de apontamento do banco de dados no arquivo index.php o site carrega normalmente, porem sem conexão com o bando mysql, o que me faz pensar que o erro pode esta relacionado ao banco mysql, porem não consigo visualizar o erro por que a tela fica toda branca e não retorna nada, como resolver esse erro ou ao menos exibir qual erro causa ele?? agradeço!
    • By TheRonaldoStar
      Oii, fala ae pessoal!!
      Alguém pode me ajudar com uma coisa por favor?;
      Seguinte!, eu anteriormente fiz uma pergunta aqui no fórum recorrente a isso, mas eu conseguir uma solução parcial.
      Que era, fazer uma listagem de todos os cadastros e fazer a junção dos cadastros com uma coluna igual, Ou seja existem duas colunas [DE e Para], que recebem o id de quem está recebendo ou que está enviando a mensagem, eu conseguir fazer a tal listagem por grupo mas o problema que estou tendo é: que so faz o agrupamento de as colunas contiver o id por ex: [De = "1" e Para ="2"].
      Atualmente estou usando a codificação deste Jeito:
       
      $sql_2 = $db -> prepare("SELECT * FROM privado WHERE (Para = '$Meu_id') Or (De = '$Meu_id') GROUP BY Para, De DESC"); $sql_2 -> execute(); Esta consulta como pode ver ele busca todos os cadastros que tenha o meu ID ou seja do usuário online!, Após a consulta ele vei obter em um "while" somente o [ Id_De eo Id_Para ] desta forma:
      while($dados_2 = $sql_2 -> fetch(PDO::FETCH_OBJ)){ $Id_De = ($dados_2 -> De); $Id_Para = ($dados_2 -> Para); } Mas em fim eu gostaria de saber como mostrar somente um resultado ou seja o ultimo resultado que tiver o meu ID em ambas colunas [ Id_De ou Id_Para ].
      Antes de vocês me recomendar a função DESC LIMIT 'valor' saiba eu quero que liste todos os usuários que enviou ou recebeu minha mensagem não somente 1 ou seja se eu mandar um mensagem para o usuário 2 e ele me retornar uma mensagem vai mostrar somente o ultimo registro que tenha o meu ID e o id dele.
       
      Atenciosamente,
      ~Ronaldo
       
    • By TheRonaldoStar
      Oi, mais cedo eu fiz um post aqui no site mas um pouco longo creio eu que e mais fácio eu fazer uma pergunta mais direta.
      A pergunta é:
      Como posso fazer agrupamentos de uma tabela através de dois campos cujo os valores são =, mesmo que esteja invertidos?
      EX: [DE = "1"], [PARA = "2"].
      E fazer o agrupamento ou só mostrar o ultimo cadastro mesmo que eles estejam invertidos desta forma?
      EX: [DE = "2"], [PARA = "1"].
       
      Acho que agora com este post fui mais claro, Alguém pode me ajudar por favor??.
      Atenciosamente,
      ~Ronaldo
    • By HigorCrds
      Bom, o que eu consegui até agora foi fazer com que, ao usuário clicar em algum dos botões de paginação (1, 2, 3...) o PHP guarde uma SESSION com o número da página correspondente.
      Segue o código:
       
      <!-- BOTÃO COM O NÚMERO DA PÁGINA --> <button onclick="mudaVar(<?php echo $i; ?>);"> <?php echo $i; ?> </button> <!-- FUNÇÃO PARA GUARDAR SESSION PG --> function mudaVar(valor) { $.ajax({ url:'sessions.php?valor='+valor }); } // GUARDA SESSION PG if(isset($_GET['valor'])){ $_SESSION['pg'] = $_GET['valor']; } Até aí tudo bem, só que o problema é que a SESSION não é alterada naquele momento, só quando eu atualizo a página.
      Como corrigir isso?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.