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 Alex Dias
      Olá amigo, não sou usuário avançado, conseguir um código-fonte que lista arquivos de uma pasta no servidor, esses fontes listavam apenas os arquivos, daí eu dei uma incrementada nele para além dos arquivos ele listar também o tamanho do arquivo e a data da última modificação, segue ANEXO como ele está exibindo os resultados com perfeição.

      A minha dificuldade é que ele lista os arquivos da pasta por ordem alfabética de A a Z e eu gostaria muito que essa lista de arquivos fosse exibida por ordem de data de modificação decrescente, da mais atual para a mais antiga, e não estou conseguindo realizar essa tarefa, gostaria muito da ajuda dos amigos para solucionar esse ocorrido, desde já agradeço a ajuda de todos.

      Segue o código-fonte

       
      <?php //$diretorio = "D:\SERVIDOR-APACHE\PATRIMONIO TECNOLOGIA\images"; $diretorio = "/home/patrimonio/www/sites/default/files/ftpdata/download/Acesso Remoto"; //USADO PARA LISTAR OS ARQUIVOS DA PASTA $url = "sites/default/files/ftpdata/download/Acesso Remoto/"; // USADO PARA FAZER O LINK DE DOWNLOAD // abre o diretório $ponteiro = opendir($diretorio); // monta os vetores com os itens encontrados na pasta while ($nome_itens = readdir($ponteiro)) { $itens[] = $nome_itens; } // ordena o vetor de itens sort($itens); // percorre o vetor para fazer a separacao entre arquivos e pastas foreach ($itens as $listar) { // retira "./" e "../" para que retorne apenas pastas e arquivos if ($listar!="." && $listar!=".."){ // checa se o tipo de arquivo encontrado é uma pasta if (is_dir($listar)) { // caso VERDADEIRO adiciona o item à variável de pastas $pastas[]=$listar; } else{ // caso FALSO adiciona o item à variável de arquivos $arquivos[]=$listar; } } } // lista as pastas se houverem if ($pastas != "" ) { foreach($pastas as $listar){ print "";} } // lista os arquivos se houverem if ($arquivos != "") { foreach($arquivos as $listar){ //CONDICAO PARA NOMEAR EM BYTES, KB, MB, GB, TB $tamanho = filesize("$url/$listar"); $kb = "1024"; $mb = "1048576"; $gb = "1073741824"; $tb = "1099511627776"; if($tamanho<$kb){ $tamanho_resposta = ($tamanho." bytes"); }else if($tamanho>=$kb&&$tamanho<$mb){ $kilo = number_format($tamanho/$kb,2); $tamanho_resposta = ($kilo." KB"); }else if($tamanho>=$mb&&$tamanho<$gb){ $mega = number_format($tamanho/$mb,2); $tamanho_resposta = ($mega." MB"); }else if($tamanho>=$gb&&$tamanho<$tb){ $giga = number_format($tamanho/$gb,2); $tamanho_resposta = ($giga." GB"); } // FIM CONDICAO PARA NOMEAR EM BYTES, KB, MB, GB, TB // DATA DA ULTIMA MODIFICACAO $modificado = date("d/m/Y H:i:s", filemtime("$url/$listar"))."<br>"; // FIM DATA DA ULTIMA MODIFICACAO //echo"$modificado"; // FAZ A LISTA DE XIBICAO DOS AQRUIVOS DO DIRETORIO // FAZ A LISTA DE XIBICAO DOS AQRUIVOS DO DIRETORIO echo" <tr> <td width='438' height='30' bgcolor='#ffffff'><p><font size='2'>&nbsp;&nbsp;<a href='$url/$listar' target='_blank'>$listar</a></font></p></td> <td width='192' bgcolor='#ffffff'><p><font size='2'>&nbsp;&nbsp;$tamanho_resposta</font></p></td> <td width='340' bgcolor='#ffffff'><p><font size='2'>&nbsp;&nbsp;$modificado</font></p></td> <td width='202' bgcolor='#ffffff'><p align='center'><a href='$url/$listar' target='_blank'><img src='images/nuvem.jpg'/></a></p></td> </tr> "; } } else { echo "<p><font color='#ff0000' size='3'>Não há nenhum arquivo.</font><p><br>"; } echo"</table>" ?>  

    • By Ewerton Hugo
      Boa noite, estou tentando fazer um site, que mostre a hora no momento que é acessado, juntamente com uma imagem que represente os periodos do dia, manhã
      , tarde e noite.Porém não consigo fazer com que o código em java script funcione alguém pode me ajudar (sou iniciante)?
       
       
       
    • By huntressDc
      Estou com uma atividade de aula para fazer e gostaria de uma ajuda, devo receber do usuário o valor da compra e o valor pago, e então exibir o troco. Até aí ok, só que também pede para exibir numa textarea as notas utilizadas no troco, informando sempre o mínimo de notas possíveis, exemplo:
       
       
      vlrCompra = 53,00 vlrPago = 100,00 vlrTroco = 47,00 notasTroco = 4 notas de 10,00 1 nota de 5,00 2 notas de 1,00  
      Não sei como fazer essa última parte, alguém para me ajudar? AS NOTAS QUE EU TENHO DISPONIVEIS SAO 1, 5, 10, 50
      Eis o que fiz até agora:
       
      function calculaTroco(){          var valorCompra = parseFloat($("#valorCompra").val());     var valorPago = parseFloat($("#valorPago").val());     var valorTroco = 0;          if (validarCampos() && validarNan()){         if (valorPago == valorCompra){             valorTroco = 0;             $("#valorTroco").val(valorTroco);             alert("Não gerou troco");                      }else if(valorPago > valorCompra){                          valorTroco = valorPago - valorCompra;             $("#valorTroco").val(valorTroco);                      }else{             alert("Não gerou troco (Valor pago menor que valor da compra)");         }         notasUtilizadas();         $("#valorCompra").val("");         $("#valorPago").val("");         $("#valorCompra").focus();     } } validarCampos() e validarNan() são apenas funções de tratamento. A função notasUtilizadas() seria a função que não estou conseguindo fazer... Devo utilizar array, if, for nessa atividade.
       
      Se alguém puder me ajudar, me dar umas dicas, agradeço muito!
       
      Parte do HTML:
      <!DOCTYPE html>
      <html lang="pt-BR">
          <head>
              <meta charset="utf-8"/>
              <title>Calcular Troco</title>
              <script type="text/javascript" src="jquery.js"></script>
              <style type="text/css">
                  fieldset { width:250px; }
                  label { display:block; float:left; } 
                  label, input, textarea, select { width:150px; margin: 5px 0; }
                  th, td { border:1px solid #ccc; font-size:0.9em; }
              </style>
          </head>
          <body>
              
              <form id="formulario">
                  <fieldset>
                      <legend>Calcular Troco</legend>
                      
                      <label for="valorCompra" >Valor da compra:</label>
                      <input type="text" id="valorCompra" name="valorCompra" /><br />
                      
                      <label for="valorPago" >Valor pago:</label>
                      <input type="text" id="valorPago" name="valorPago" /><br /><br />
                      
                      <button type="button" id="button" onclick="calculaTroco()">Calcular troco</button><br /><br />
                      
                      <label for="valorTroco" >Valor do troco:</label>
                      <input type="text" id="valorTroco" name="valorTroco" readonly="readonly"/><br /><br />    
                      
                      <label for="notasUtilizadas">Notas utilizadas:</label>
                      <textarea rows="3" id="notasUtilizadas" readonly="readonly" ></textarea><br/>
                      
                  </fieldset>
              </form>
          <script type="text/javascript" src="troco.js"></script>
          </body>
      </html>
    • By Vinicius Bazan
      Estou tendo um problema em elaborar o meu código com javascript, estou fazendo um teste em html e css simples pra depois elaborar um website, o objetivo aqui é fazer um relógio pelo JS e ter um contador em baixo desse relógio que vai pegar valores a partir de um switch para esse contador funcionar, isso porque se trata de dados sobre tipos de agressões contra as mulheres, então os cases do switch tem o dado em segundos para executar a formula, uma mensagem inicial e uma mensagem final.
       O usuário teria dois botões, um de cada lado (nesse caso estou usando 2 div com as ID's #btd e #bte, ao apertar esses botões aumentaria o valor de uma variável em +1 ou -1 e isso faria o switch escolher outro case e trocar os dados do contador, mas os dados não são trocados, mantendo as informações iniciais.
       Ao todo tem 4 funções, a função relogio(), contador(), btd() e bte(), sendo que a btd e bte estão dentro da contador() 
       Estou colocando o codigo dentro do spoiler, se alguém puder me ajudar a achar alguma solução agradeço
       
      OBS: Eu nem sei se pode ter uma function dentro da outra, mas como estou aprendendo JS ainda, imagino que assim como outras estruturas (If, Else, Switch, etc...) possa ser possível colocar uma função dentro da outra.
       
       
    • By luialcantara
      Olá, a empresa onde trabalho tem uma página de login para área restrita que está com problema na função de cadastro. O formulário está enviando os dados para o banco de dados e o usuário se torna ativo para acesso normalmente. O problema é que a mesma função que salva os dados deveria redirecionar o cliente para a área restrita ou então para a página inicial para que ele digite usuário e senha e consiga acessar a página. 
       
      A página já estava pronta quando comecei aqui e eu não tenho domínio sobre php, mas já corrigi alguns erros que estavam impedindo o cadastro. Porém os clientes reclamam pois após concluir o cadastro a imagem de carregamento não desaparece, então apenas coloquei um delay para evitar os questionamentos, pois o usuário fica ativo, então é só voltar para o login que eles conseguem usar nosso site.
       
      A página está dividida entre uma de login (php), uma para cadastro (php) e a principal, que está no wordpress. 
       
      Função do formulário de cadastro:
                  submitHandler: function(form) {                 $(".botoesactions").hide();                 $(".ajaxloader").show();                 var dados = jQuery( form ).serialize();                  $(".ajaxloader").fadeOut(1500);                 $.ajax({type: "POST", data: dados, url:"<?php echo get_site_url(); ?>/atendimento/cadastrar",success: function(data){                     console.log(data);                     try {             var ret = JSON.parse(data);                     } catch (e) {          var ret = false;                    }                     $(".ajaxloader").hide();                     if(ret !== false && ret.retorno === "ok"){                         console.log(ret);                         alert("Cadastrado realizado com sucesso!");                         window.location.href = "<--!?php echo get_site_url(); ?-->/atendimento/";                     }else if(ret !== false && ret.retorno === "fail"){                         alert(ret.mensagem);                         $(".botoesactions").show();                     }else{                         $(".botoesactions").show();                     }                 }});             }  
       
      Função de inserção de informações no banco de dados:
      elseif('cadastrar' == $syjusaten){                         if(!isset($_SESSION) || !isset($_SESSION['jusate_session']['answeris']) || $_SESSION['jusate_session']['answeris'] != 42 ){                 if($_POST && $_POST['typos'] == "iscadastro"){                     $url= $urlServer.'/Cliente/ClienteSite/cadastraclientesite';                     $parms = array(                         "usuario" => $_POST['user'],                         "Senha" => $_POST['pass'],                         "Cliente.ClienteId" => $_POST['clienteId'],                         "Cliente.Nome" => $_POST['nome'] /*Existem outros dados, mas acho que ficaria muito codigo e não contribuem para erro*/                     );                     $respServer = syJuCurl($url, $parms);                     if($respServer == ""){                         echo json_encode( array(                             "retorno" => "fail",                             "mensagem" => "Não foi possivel realizar o cadastro. Tente novamente mais tarde"                         ));                     }else{     echo $respServer;                         }                 }else{                     echo "ELSEE";                     header("Location: ".get_site_url()."/atendimento");                 }                         exit;             }else{                 header("Location: ".get_site_url()."/atendimento/");             }         }  
      Agradeço pela atenção ;)
       
×

Important Information

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