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

gust.php · Junho 21, 2019

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.

gabrielms · Junho 21, 2019

@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>

gust.php · Junho 22, 2019

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>

gabrielms · Junho 22, 2019

@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>

gust.php · Junho 23, 2019

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;

gabrielms · Junho 23, 2019

@gust.php Isso mesmo, eu não coloque nenhum elemento com o id "demo", porque eu não sei como você vai manípular a resposta.

gust.php · Junho 26, 2019

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);
        }

    }

gabrielms · Junho 26, 2019

@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;
}

gust.php · Junho 26, 2019

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.

gust.php · Junho 30, 2019

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);
            }
        });
    });
});

gust.php · Junho 30, 2019

Resolvido .... Obrigado meu amigo. @gabrielms

gabrielms · Junho 30, 2019

@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.

Arquivado

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

Recommended Posts

gust.php 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrielms 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gust.php 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrielms 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gust.php 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrielms 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gust.php 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrielms 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gust.php 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

gust.php 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

gust.php 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrielms 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

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

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Conteúdo Similar

Fóruns

Tempo Real

Informação importante