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 Alberto Nascimento
      Preciso que o nome do arquivo que foi salvo durante o registro de um formulário, ao ser exibido através de uma busca e mostrado em ECHO possa se tornar um link.
      Como consigo fazer isso?
       
      echo "<a href="http://www.meusite.com.br/app/".$rows_cursos['novonome'].";  
       
    • By Onaita
      Boa noite, preciso de uma ajuda com o código abaixo:
      - Dentro da variável '$dados' tenho uma array em que o id repete com datas diferentes, preciso descartar uma das duas arrays repetidas com o mesmo 'id', mantendo a de menor data, ou seja, o resultado final seria:
      "Array ( [0] => Array ( [id] => 12 [data] => 2020-07-02 ) , [1] => Array ( [id] => 13 [data] => 2020-06-10 ) ) "
      - já tentei de tudo um pouco a princípio estou trabalhando com a ideia de loop dentro de loop, para varrer e comparar, mas como vcs podem ver estou deixando passar alguma coisa;
      <?php
      $dados =     [array("id" =>12, "data"=>"2020-07-02"),
                  array("id" =>13, "data"=>"2020-06-10"),
                  array("id" =>13, "data"=>"2020-06-15"),
                  array("id" =>12, "data"=>"2020-05-12")];
      $total = count($dados);
      foreach($dados as $item){
          for($i=1; $i < $total; $i++){
              if($item['id'] == $dados[$i]['id']){
                  if(strtotime($item['data']) <= strtotime($dados[$i]['data'])){
                      unset($dados[$i]);
                      $dados = array_values($dados);
                      $total = count($dados);
                      
                  }    
              }    
          }    
      }
      print_r($dados);
      Array ( [0] => Array ( [id] => 12 [data] => 2020-07-02 ) ) //resultado
       
      Se alguém achar o erro, ou uma forma de resolver esse problema ficarei muito agradecido!
      Obrigado e Um grande abrs a todos!
    • By jribeirojr
      Olá pessoal boa tarde, gostaria de saber se conseguem me ajudar.
      Hoje tenho um sistema que contempla o site e uma área administrativa, tudo feito em Codigniter, mas que começou a ficar muito grande, devido as diversas funcionalidades e estava pensando em reestruturar, mas estou bem confuso como poderia estruturar, se criando um RESTFull e conectando tanto o site quanto o administrativo, usar php com um VUE, React, Node, etc.
      Fico imaginando o seguinte e gostaria da opinião de vcs:
      - criar um restfull através de uma url tipo api.dominio.com.br
      - criar as conexões do admin usando react ou vue onde o usuário acessaria pela url app.dominio.com.br
      - criar as conexões do site usando react ou vue onde o usuário acessaria pela url www.dominio.com.br
       
      O que acham? Fico com receio da quantidade de administração / controle que teria para poder atualizar, etc. Conseguiriam me dar uma luz?
       
      Lembrando que este sistema posso usar para diferentes clientes com o mesmo nicho de negócio, se alguém puder me ajudar agradeço e desculpe o email longo, eu hoje uso PHP, MySQL, Mustache, JQuery
       
      Obrigado
       
    • By Alberto Nascimento
      Estou tentando, mas não esta exibindo o registro...
       
      localizar.php
       
      <?php session_start(); $_SESSION["localizarfotografia"] = $_POST["codphoto"]; ?> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>EXIBIR FOTOGRAFIA PELO CÓDIGO INTERNO</title> <style type="text/css"> <!-- .Style6 {font-size: 13px} .auto-style20 { text-align: center; } .auto-style22 { background-color: #FEB624; } .auto-style23 { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: xx-small; text-align: center; } .auto-style25 { background-color: #FFCC66; } .auto-style26 { font-size: x-small; } .auto-style27 { font-size: x-small; text-align: center; } .auto-style28 { text-align: center; background-color: #FEB624; } --> </style> </head> <body style="margin-top: 50"> <body onload="form1.login.focus();"> <form id="form1" name="form1" method="post" action="pesquisaragora.php"> <div class="auto-style20"> <table align="center" cellpadding="0" cellspacing="0" class="auto-style23" style="width: 500"> <tr> <td class="auto-style20"> &nbsp;</td> </tr> <tr> <td class="auto-style22"> &nbsp;</td> </tr> <tr> <td class="auto-style25" style="height: 41px">Informe o código da FOTOGRAFIA abaixo</td> </tr> <tr> <td class="auto-style25"> <table align="center" style="width: 450"> <tr> <td class="auto-style27"><span class="Style6"> <label> <input name="codphoto" type="text" id="codphoto" style="width: 305px; height: 83px;" /></label></span></td> </tr> <tr> <td class="auto-style26"><strong> </strong></td> </tr> <tr> <td class="auto-style20"><span class="Style6"> <label> <input type="submit" name="Submit" value="LOCALIZAR PHOTO" /></label></span></td> </tr> </table> </td> </tr> <tr> <td class="auto-style25">&nbsp;</td> </tr> <tr> <td class="auto-style28"> &nbsp;</td> </tr> </table> <br></div> </form> </body> </html>  
      pesquisarphoto.php
       
      <?php include("config.php"); $codphoto = $_POST['codphoto']; $sql_logar = "SELECT * FROM photos WHERE codphoto = '$codphoto'"; $exe_logar = mysql_query($sql_logar) or die (mysql_error()); $fet_logar = mysql_fetch_assoc($exe_logar); $num_logar = mysql_num_rows($exe_logar); $codphoto = $fet_logar['codphoto']; $nome = $fet_logar['nome']; $cidade = $fet_logar['cidade']; $uf = $fet_logar['uf']; if ($num_logar == 0){ echo "Desculpe, mas a foto não foi localizada."; echo "<br><a href='javascript:window.history.go(-1)'>Clique aqui e tente novamente.</a>"; } else{ session_start(); $_SESSION['codphoto'] = $codphoto; $nome = $fet_logar['nome']; $cidade = $fet_logar['cidade']; $uf = $fet_logar['uf']; echo $exibir["codphoto"]; echo $exibir["nome"]; echo $exibir["cidade"]; echo $exibir["uf"]; } ?>  
       
       
       
       
       
       
       
       
    • By SaraAlcaras
      Olá galera! Estou criando um jogo da velha para coloca no meu portfólio, porem estou com um pequeno problema que não consigo resolver.. Quando o jogo finaliza a tela da uma ampliada/expandida no tamanho é quase imperceptível porem é algo que eu gostaria de mudar. Qual propriedade posso usar no css pra evitar que isso aconteça?
       
      Código CSS:

       
      :root{ --O-color: rgb(10, 177, 243); --X-color: rgb(253, 148, 148); --E-color: rgb(0, 0, 0); } * { margin: 0; padding:0; box-sizing: border-box; } body { display: grid; align-items: center; justify-content: center; font-family: grenze; height: 100vh; background-color: rgb(153, 153, 153); } .nextPlayer{ color: rgb(60, 62, 63); border: 1px solid rgb(211, 223, 104); box-shadow: 3px 5px 12px rgb(0, 0, 0); } .players { color: rgb(60, 62, 63); border: 1px solid rgb(211, 223, 104); box-shadow: 3px 5px 12px rgb(0, 0, 0); height: 55px; display: flex; flex-direction: column; justify-content: space-evenly; } .player{ display: flex; } .topo { display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; margin-bottom: 20px; } .topo .players, .topo .nextPlayer { font-family: grenze; font-weight: bold; border-radius: 4px; } .title { font-size: 3rem; color: rgb(60, 62, 63); margin-bottom: 0; } .title2 { display: none; } .board { display: grid; grid-template-columns: repeat(3, 178px); grid-template-rows: repeat(3, 130px); gap: 1rem; cursor: pointer; } .board.game-over{ opacity: 0.10; } .cell { display: grid; align-items: center; justify-content: center; background-color: white; border-radius: 4px; font-size: 2rem; font-weight: bold; color: #00000066; } .cell:not(.O):not(.X):hover { box-sizing: 0 20px 25px -5px rgba(0, 0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0, 0.4); } .cell.O, .cell.X, .game-over .cell { cursor: not-allowed; } .cell.O { background-color: var(--O-color); } .cell.X { background-color: var(--X-color); } footer{ text-align: center; font-size: 30px; } .winner-message{ margin: 1rem; } .winner-message span.O{ color: var(--O-color); } .winner-message span.X{ color: var(--X-color); } .winner-message span.E{ color: var(--E-color); } button { padding: 0.9rem 1.5rem; border: none; border-radius: 5px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0, 0.6); background-color: rgb(68, 255, 146); color: white; font-size: 1.2rem; cursor: pointer; } @media only screen and (max-width: 767px) and (orientation:portrait) { body { width: 100%; text-align: justify; } .board{ grid-template-columns: repeat(3, 88px); grid-template-rows: repeat(3, 80px); -webkit-tap-highlight-color: transparent; } button { font-size: 10px; } .cell { border-radius: 3px; font-size: 1rem; } footer { font-size: 13px; } .title { font-size: 1.5rem; display: none; padding: 0.6em; /* transform: translateY(80%); */ } .title2 { display: flex; font-size: 1.5rem; padding: 0.6em; color: rgb(60, 62, 63); } .topo{ flex-direction: column; } .players { height: 65px; width: 95px; align-items: center; } .nextPlayer{ text-align: center; height: 22px; width: 118px; /* transform: translateY(-150%); */ } } @media only screen and (max-width: 767px) and (orientation:landscape) { body { width: 100%; text-align: justify; } .board { grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(3, 60px); -webkit-tap-highlight-color: transparent; } footer { font-size: 0.5rem; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; } button { font-size: 0.5rem; } .title { font-size: 0.8rem; } .players{ height: 30px; width: 50px; align-items: center; font-size: 0.5rem; } .nextPlayer{ text-align: center; height: 14px; width: 60px; font-size: 0.5rem; } .cell { border-radius: 3px; font-size: 0.8rem; } } @media only screen and (min-width: 991px) and (max-width: 1200px) { body { width: 100%; text-align: justify; } }

×

Important Information

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