Dropdown-menu Bootstrap with PHP

Asked

Viewed 909 times

5

I’m trying to send a data to a PHP page with AJAX, but I can’t figure out how to make it work, I’ll explain what I have so far!

The dropdown menu has the following code:

<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>

And AJAX is like this:

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

Is it possible to send the value of a dropdown menu made in Bootstrap? How can I get the value on the exemple.php page? I think the AJAX part is wrong, but it’s not working!

php ajax twitter-bootstrap

3 answers

3


If you do so (just one example), you can send everything in a page.php-only request:

    <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, the way to take the value of the attribute, as André Ribeiro passed, is correct. The error seems to be in the way you are constructing the "option data" from Jquery.ajax. Remove the quotes from the index "value", like this:

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

  • I removed the '' quotes, but it didn’t work anyway, the value of the dropdown-menu is still not passed to the PHP page, the variable remains Undefined index. Any more suggestions?

  • Luis, I just tested this code on the JS Bin online console and the request goes correctly to the php file. Could you post the snippet of the PHP code that receives this request? So we can get a better sense.

  • Actually I am trying to receive two variables on the PHP page, they may be conflicting? I can post the AJAX code of both if it helps! <? php $a = $_POST['name']; $b = $_POST['value']; ?>

  • Conflict no, but the undefined index error may be coming from the other variable. Have you checked this? You can avoid this type of error by testing the variable with "isset()" before using it.

  • If you use distinct ajax codes for variables, obviously requests occur at different times. So, when you submit one of the variables, you will not be sending the other and you will always have the error occurring in any of the requests. No doubt you need to control this with "isset()" to process only the part of code corresponding to the variable you are sending at any given time.

  • Even with isset() in PHP it is no mistake, I think the whole problem is in the way AJAX is written, has how to take a look at the code and show me how I can aggregate the two AJAX requests in 1 only, for when to click the button being to PHP it send the two variables at the same time? http://jsfiddle.net/Luis/qxckcwmo/4/

Show 1 more comment

1

To get the value of the attribute data of li from your menu you can use the function .attr( attributeName )

Your code would look like this:

$(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>

  • On the example.php page I used a variable to store the value, but gave error...$var = $_POST['value']; What may be wrong?

  • @Luis What’s the mistake?

  • the error was - Undefined index: value on line 15, precisely where it was declared on the exemple.php page

  • @Luis This error is the response to the ajax request or you are loading example.php directly?

  • It is the response of the ajax request, I select from the dropdown-menu the value I want, for example valor1 and then send, this value does not have to return, it should only be used to make some calculations on the page exemple.php. I just need the value to be sent to a variable, my problem at the moment is that with the AJAX code it is not recognizing the value I want to send (numeric value of 1 or 2) and this error appears, because PHP does not detect any variable!

Browser other questions tagged php ajax twitter-bootstrap

You are not signed in. Login or sign up in order to post.