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 srs1999_
      Tópico
       
      Site em Código
      Sobre desenvolver sites sem o wordpress que ja tá tudo ali feito que seja um site dinâmico ou seja com banco de dados , APIs de pagamento, Painel para o usuário ,  além de todas  as funções que tem no wordpress e você teria propriedade pra explicar sobre detalhes mais técnicos da produção onde no wordpress só quem entende de progrqmação explicaria algum detalhe técnico 
      Então usando basicamente : 
      FRONT END 
      HTML 
       CSS 
      JAVASCRIPT 
      ALGUMA DE BACKEND COMO PHP E BANCO DE DADOS
      Pode se criar sites/sistemas tão bons ou melhores que no wordpress
       
      Fato : o proprio wordpress é feito em php e ate o proprio facebook tbm em php
      Fato 2 :  cerca de 70% dos sites são feitos em Wordpress
       
      Acho esse lance de procurar o caminho mais fácil limita muito a pessoa por exemplo é facil editar imagens no paint bem intuitivo , agora para editar no photoshop com muitas outras possibilidades  acaba sendo importante ir explorando essa elaboração mais difícil  com um mesmo objetivo. No caso do exemplo ( editar imagens )  
       
      Reflexão:
      Vale a pena se dedicar a trabalhar com a ferramenta Wordpress apenas por ser um meio rápido de ganhar dinheiro ?
      Ou trabalhar sem wordpress  usando tudo que exigido pra criar coisas originais mais que não seria tão rápido a produção. Mas creio que além dos sites feitos também geraria a possibildade de vender o sistema web criado para o cliente personalizar .
       
      Você Desenvolveria de que forma :
       Wordpress apenas ?
       
      Conhecer programação pra trabalhar 
      com  Wordpress ?
       
      Produzir tudo só com programação totalmente dinâmico sem  Wordpress?
    • By violin101
      Caros amigos
       
      saudações...
       
      Peço desculpa, se postei minha dúvida em local errado.
       
      Tenho um formulário onde valido todos os campos e após clicar no BUTTON para adicionar, tenho uma função que muda o TITLE e deixa desabilitado.
       
      O problema é o seguinte:
      - caso algum campo fica em branco, após validar o formulário e mudar o BUTTON, não consigo depois de preenchido HABILITAR novamente o button.
       
      Observação:
      1) após preencher o campo que ficou em branco, como faço para HABILITAR o button novamente e mudar o title do button ?
       
       
      na VIEW está assim:
      <form action="<?php echo current_url(); ?>" id="frmEstoque" method="post" onsubmit="this.btn_adc.disabled=true;" > <div class="card-body"> <div class="row"> <!---Todos os campos do Formulário---> </div> </div> <div class="card-footer" style="text-align:center;"> <input type="hidden" id="idCli" name="idCli" value="<?php echo $cliente->idClientes; ?>" /> <a href="<?php echo base_url() ?>admin/estoque" id="" class="btn btn-danger"><i class="fa fa-undo"></i> Voltar</a> &nbsp; <button type="submit" id="btn_adc" name="btn_adc" class="btn btn-primary">Adicionar</button> </div> </form>  
      na JavaScript está assim:
      <script> //Função para Mudar o VALUE do Button Adicionar Veículo document.getElementById("btn_adc").addEventListener("click",function(){ this.innerHTML = this.value++ || 'Aguarde...'; },false); </script> /* Observação: 1) como removo a função acima, após validar o formulário e esse encontrar algum campo vazio. 2) após preencher o campo que ficou em branco, HABILITAR o button novamente. */ <script type="text/javascript"> $(document).ready(function(){ //Função para Validar Formulário $('#frmEstoque').validate({ rules :{ etq_categcars:{ required: true}, etq_destaq:{ required: true}, etq_status:{ required: true} }, messages:{ etq_categcars :{ required: '<span style="color:#ff0000;">Campo Requerido</span>'}, etq_destaq :{ required: '<span style="color:#ff0000;">Campo Requerido</span>'}, etq_status :{ required: '<span style="color:#ff0000;">Campo Requerido</span>'} }, errorClass: "help-inline", errorElement: "span", highlight:function(element, errorClass, validClass) { $(element).parents('.form-group').addClass('error'); }, unhighlight: function(element, errorClass, validClass) { $(element).parents('.form-group').removeClass('error'); $(element).parents('.form-group').addClass('success'); } }); //Status dos Botões ADICIONAR - iniciar como desabilitado. document.getElementById("btn_adc").disabled = true; }); function statusButton(){ //valida conteudo do input if ($("input[name=etq_vlrcpr]").val() != 0 && $("input[name=etq_vlrvda]").val() != 0) { //habilita o botão document.getElementById("btn_adc").disabled = false; } else { //desabilita o botão se o conteúdo do input ficar em branco document.getElementById("btn_adc").disabled = true; } } </script>  
      Grato,
       
      Cesar
       
       
       
       
    • By mateus.andriollo
      Olá,
      Gostaria de saber se alguem pode me ajudar.
      Meu PHP esta na pasta public_html em um CPanel, quero saber se é possível armazenar em pasta fora da pasta  pública, por segurança mesmo...
      Faço isso em ASP, ai chamo a imagem por um fso, funciona mas queria saber se tem como no PHP.
    • By Joob
      Boas Malta,
       
      Não sei porquê que não estou a conseguir remover os ficheiros após minutos..
      Por exemplo ele vai buscar o delete_expired_shared_links e apaga a partilha feita após o tempo colocado, mas no delete_old_zips já não apaga.
      Supostamente ele vai buscar os ficheiros da pasta zip e deveria apagar.
       
      protected function schedule(Schedule $schedule) { $schedule->call(function () { $this->delete_expired_shared_links(); })->everyMinute(); $schedule->call(function () { $this->delete_old_zips(); })->everyFiveMinutes(); // Run queue jobs every minute $schedule->command('queue:work --stop-when-empty') ->everyMinute() ->withoutOverlapping(); } protected function delete_old_zips(): void { $zips = Zip::where('created_at', '<=', Carbon::now()->subDay()->toDateTimeString())->get(); $zips->each(function ($zip) { \Storage::disk('local')->delete('zip/' . $zip->basename); $zip->delete(); }); } protected function delete_expired_shared_links(): void { $shares = Share::whereNotNull('expire_in')->get(); $shares->each(function ($share) { $created_at = Carbon::parse($share->created_at); if ($created_at->diffInHours(Carbon::now()) >= $share->expire_in) { $share->delete(); } }); } }  
      Obrigado :)
×

Important Information

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