5

Estou a tentar enviar um dado para uma página PHP com AJAX, mas não estou a conseguir descobrir como fazer funcionar, vou passar a explicar o que tenho até agora!

O menu de dropdown está com o seguinte código:

<div class="btn-group">
 <button class="btn btn-danger btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
                    BOTÂO <span class="caret"></span>
                    </button>                   

                    <ul class="dropdown-menu" role="menu" id="status">
                        <li data="1"><a href="#">valor 1</a></li>
                        <li data="2"><a href="#">valor 2</a></li>
                    </ul>
</div>

E o AJAX está assim:

$(document).on('click','#status li',function(){
        $.ajax({
        url: 'exemple.php',
        type: 'POST',
        data: {
               'valor': $('#data').val()
              },
        });
}); 

É possível enviar o valor de um dropdown-menu feito em Bootstrap? Como eu posso pegar o valor na página exemple.php? Penso que a parte do AJAX está errada, mas não esto a conseguir resolver!

3 Respostas 3

3

Se fizer assim (só um exemplo), pode enviar tudo numa requisição só para page.php:

    <div class="btn-group">
    <button id="drop" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
        BOTÂO <span class="caret"></span>
    </button>                   
    <ul class="dropdown-menu" role="menu" id="status">
        <li data-something="1"><a href="#">valor 1</a></li>
        <li data-something="2"><a href="#">valor 2</a></li>
    </ul>
    <input type='hidden' id='selected_data'>
</div>
<br><br>
<div id='output'></div> 


<div class="modal-body">
<textarea id="area_1" name="area_1" class="form-control" rows="7"></textarea>
<br><br>    
<!-- BUTTON TO SEND THE VALUE AND THE TEXTAREA TO PHP PAGE-->    
<button type="button" id="enviar" class="btn btn-default">SEND TO PHP</button> 

$(document).on('click','#status li',function(){
        $('#selected_data').val($(this).data('something'));
    });

$(document).on('click','#enviar',function(){
        $.ajax({
            url: 'page.php',
            type: 'POST',
            data: {
                    valor: $('#selected_data').val(),
                    plaintext: $('#area_1').val(),                  
                  },

            success: function(resposta){
                $("#area_1").html(resposta);
            }
        }).done(function(data){
           alert("Successfull", data);          
       });
    });
2

Luis, a forma de pegar o valor do atributo, como o André Ribeiro passou, está correta. O erro parece estar na forma como você está construindo o "option data" do JQuery.ajax. Retire as aspas do index "valor", assim:

$(document).on('click','#status li',function(){
$.ajax({
    url: 'exemple.php',
    type: 'POST',
    data: {valor: $(this).attr('data')}
    });
}); 
6
  • Eu retirei as aspas '', mas não funcionou na mesma, o valor do dropdown-menu continua a não ser passado para a página PHP, a váriavel continua Undefined index. Mais alguma sugestão?
    – Luis
    Commented 31/01/2015 às 14:57
  • Luis, acabei de testar esse código no console online do JS Bin e a requisição segue corretamente para para o arquivo php. Você poderia postar o trecho do código PHP que recebe essa requisição? Assim podemos ter uma melhor noção.
    – ECJ
    Commented 31/01/2015 às 15:30
  • Na verdade eu estou a tentar receber duas variaveis na página PHP, elas podem estar a conflituar? posso postar o código AJAX de ambas se ajudar! <?php $a = $_POST['nome']; $b = $_POST['valor']; ?>
    – Luis
    Commented 31/01/2015 às 16:02
  • Conflitar não, mas o erro de index indefinido pode estar vindo da outra variável. Já verificou isso? Você pode evitar esse tipo de erro testando a variável com "isset()" antes de usá-la.
    – ECJ
    Commented 31/01/2015 às 17:13
  • Se você usa códigos ajax distintos para as variáveis, obviamente as requisições ocorrem em tempos diferentes. Assim, quando você enviar uma das variáveis, não estará enviando a outra e sempre terá o erro ocorrendo em qualquer das requisições. Sem dúvida você precisa controlar isso com "isset()" para processar apenas a parte do código correspondente a variável que você está enviando em dado momento.
    – ECJ
    Commented 31/01/2015 às 17:22
1

Pra pegar o valor do atributo data do li do seu menu você pode usar a função .attr( attributeName )

No seu código ficaria assim:

$(document).on('click','#status li',function(){
  $.ajax({
        url: 'exemple.php',
        type: 'POST',
        data: {
               'valor': $(this).attr('data')
              },
        });
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
 <button class="btn btn-danger btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
                    BOTÂO <span class="caret"></span>
                    </button>                   

                    <ul class="dropdown-menu" role="menu" id="status">
                        <li data="1"><a href="#">valor 1</a></li>
                        <li data="2"><a href="#">valor 2</a></li>
                    </ul>
</div>

5
  • Na página exemple.php eu utilizei uma váriavel para armazenar o valor, mas deu erro...$var = $_POST['valor']; O que pode estar a acontecer de errado?
    – Luis
    Commented 31/01/2015 às 4:08
  • @Luis Qual o erro? Commented 31/01/2015 às 4:27
  • o erro foi - Undefined index: valor on line 15, precisamente onde ela foi declarada na página exemple.php
    – Luis
    Commented 31/01/2015 às 5:38
  • @Luis Esse erro é a resposta da requisição ajax ou você está carregando o example.php diretamente? Commented 31/01/2015 às 5:44
  • É a resposta da requisição ajax, eu seleciono do dropdown-menu o valor que quero, por exemplo valor1 e depois faço enviar, este valor não tem que retornar, apenas deve ser utilizado para fazer uns cálculos na página exemple.php. Eu apenas preciso que o valor seja enviado para uma variável, o meu problema de momento é que com o código AJAX ele não está a reconhecer o valor que quero enviar (valor numérico de 1 ou 2) e acaba aparecendo esse erro, pois o PHP não detecta nenhuma variável!
    – Luis
    Commented 31/01/2015 às 5:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .