Ir para conteúdo
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.

Compartilhar este post


Link para o post
Compartilhar em outros 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>

 

Compartilhar este post


Link para o post
Compartilhar em outros 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>

 

Compartilhar este post


Link para o post
Compartilhar em outros 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>

 

Compartilhar este post


Link para o post
Compartilhar em outros 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;

Compartilhar este post


Link para o post
Compartilhar em outros 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);
        }

    }

 

Compartilhar este post


Link para o post
Compartilhar em outros 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;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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);
            }
        });
    });
});

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por ILR master
      Fala galera, tudo bem?
       
      Tenho o seguinte codigo:
       
       class Data {
      public static function ExibirTempoDecorrido($date)
      {
          if(empty($date))
          {
              return "Informe a data";
          }
          $periodos = array("segundo", "minuto", "hora", "dia", "semana", "mês", "ano", "década");
          $duracao = array("60","60","24","7","4.35","12","10");
          $agora = time();
          $unix_data = strtotime($date);
          // check validity of date
          if(empty($unix_data))
          {  
              return "Bad date";
          }
          // is it future date or past date
          if($agora > $unix_data) 
          {  
              $diferenca     = $agora - $unix_data;
              $tempo         = "atrás";
          } 
          else 
          {
              $diferenca     = $unix_data - $agora;
              $tempo         = "agora";
          }
          for($j = 0; $diferenca >= $duracao[$j] && $j < count($duracao)-1; $j++) 
          {
              $diferenca /= $duracao[$j];
          }
          $diferenca = round($diferenca);
          if($diferenca != 1) 
          {
              $periodos[$j].= "s";
          }
          return "$diferenca $periodos[$j] {$tempo}";
      }
      }
       
      Funciona redondinho se o valor retornado for de algumas horas, mas...
      Quando passa de dois meses, ele retorna a palavra mess. Deve ser por conta dessa linha
      if($diferenca != 1) 
          {
              $periodos[$j].= "s";
          }
       
      Quero que modre:
       
      2 meses atrás
      e não
      2 mess atrás.
       
      Espero que tenham entendido.
       
      Valeu
    • Por Carlos Web Soluções Web
      Olá...
      Estou tentando fazer o seguinte !!
      Listando dados em tabela !!
      Gostaria que....se na listagem houver 4 linhas...indepedente de seu número de ID, faça a listagem em ID ser em ordem 1 2 3 4 !!
      Exemplo...se tiver uma listagem de dados que está em ID 1 3 3...faça ficar 1 2 3 !!

       
      echo "<table class='tabela_dados' border='1'> <tr> <td>ID</td> <td>Nome Empresa</td> <td>Responsável</td> <td>Telefone 1</td> <td>Telefone 2</td> <td>E-mail 1</td> <td>E-mail 2</td> <td>Endereço</td> <td>CEP</td> <td>Bairro</td> <td>AÇÃO 1</td> <td>AÇÃO 2</td> </tr> "; $sql = "SELECT ID FROM usuarios_dados WHERE Usuario='$usuario'"; $result = $conn->query($sql); $num_rows = $result->num_rows; $Novo_ID = 1; for ($i = 0; $i < $num_rows; $i++) { $registro = $result -> fetch_row(); $sql2 = "UPDATE usuarios_dados SET ID='$Novo_ID' WHERE ID='$Novo_ID'"; $result2 = $conn->query($sql2); $Novo_ID++; } $sql = "SELECT * FROM usuarios_dados"; $result = $conn->query($sql); if ($result->num_rows > 0) { // output data of each row while($row = $result->fetch_assoc()) { echo "<tr> <td>$row[ID]</td> <td>$row[Nome_Empresa]</td> <td>$row[Responsavel]</td> <td>$row[Telefone_1]</td> <td>$row[Telefone_2]</td> <td>$row[Email_1]</td> <td>$row[Email_2]</td> <td>$row[Endereço]</td> <td>$row[CEP]</td> <td>$row[Bairro]</td> <td> <form method='post' action='Editar_Dados.php'> <input type='hidden' name='usuario' value='$usuario'> <input type='hidden' name='senha' value='$senha'> <input type='hidden' name='ID' value='$row[ID]'> <input type='submit' style='padding: 10px;' value='EDITAR'> </form> </td> <td> <form method='post' action='Deletar_Dados.php'> <input type='hidden' name='usuario' value='$usuario'> <input type='hidden' name='senha' value='$senha'> <input type='hidden' name='ID' value='$row[ID]'> <input type='submit' style='padding: 10px;' value='DELETAR'> </form> </td> </tr> "; } } else { echo "0 results"; } $conn->close();  
    • Por ILR master
      Boa tarde pessoal, tudo bem ?
       
      Eu uso o tinymce para cadastro de textos no meu siite, porém, quero fazer um sistema para que os colunistas possam fazer o próprio post.
      O problema do tinymce, é que ele mantém a formatação do texto copiado, como tamanho de fonts, negritos, etc... Quero que o usuário cole o texto e a própria textarea limpe a formatação para que ele formate como quiser.
       
      A pergunta é:
       
      O tinymce tem uma opção para desabilitar a formatação quando um texto é colocado?
      Tem alguma função via java ou php para retirar a formatação assim que o texto é colado?
      Ou é melhor usar um outro editor?
       
      Agradeço deste já.
    • Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.