Get value of list item and POST to ajax

Question

If I have a php generated dropdown menu how can I POST this data to the server using jQuery ajax? So I can feedback on the same page whether the data was submitted, the code below is using bootstrap.

For my work I'm trying to create a game allowing the user to cast a self spell, the user will submit what self spell to cast and submit it to the selfspellajax.php and it will feedback into the #selfspellhint whether the spell is casted or not.

 <form role="form">
   <div class="input-group-btn">
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
       Self Spells
       <span class="caret"></span>
     </button>
     <ul class="dropdown-menu pull-left">
     <?php
require_once('../../protected/configreadutopia.php');

$connection = mysqli_connect(DBHOST,DBUSER,DBPASS,DBNAME);

if (!$connection) {
  die('Could not connect: ' . mysqli_error($con));
}

if(isset($_SESSION["userid"])){
    if(!empty(($_SESSION["userid"]))){
        //prepare stmnt
        $query= mysqli_prepare($connection,'SELECT * FROM spellbook');
        //execute
        mysqli_stmt_execute($query);
        //result set.
        $result = mysqli_stmt_get_result($query);

            while($row = mysqli_fetch_assoc($result))
            {
                echo '<li><a href="#" data-value="'.$row["spell"].'">'.$row["spell"].'</a></li>';
            }
        // Free result set
        mysqli_free_result($result);
    }
}else{
    echo 'No user logged in';
}
mysqli_close($connection);
     ?>
     </ul>
   </div>
             <button type="submit" id="submitselfspell" class="btn btn-default">Cast</button>
            </form>

My JS file

  $(".dropdown-menu li a").click(function(){
  $(this).parents(".input-group-btn").find('.btn').text($(this).text());
  $(this).parents(".input-group-btn").find('.btn').val($(this).text());
});

$("#submitselfspell").click(function () {
            var spellval = "test";
            jQuery.ajax({
            type: "POST",
            url: 'selfspellajax.php',
            data:{spellval:spellval},
            success: function(data) {
            $("#selfspellhint").html(data);
            }
        });

    });

Answer 1

Try this :

$(document).on('click', '.dropdown-menu li a', function () {
    var selected_value = $(this).text();
    $(#hidden_element).val(selected_value);   
});

Once got the value from the on change and store it on hidden element.After that use the following code :

$("#submitselfspell").click(function () {
            var spellval = $(#hidden_element).val();
            jQuery.ajax({
            type: "POST",
            url: 'selfspellajax.php',
            data:{spellval:spellval},
            success: function(data) {
            $("#selfspellhint").html(data);
            }
        });

    });

HTML Sample :

<form role="form">
   <div class="input-group-btn">
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
       Self Spells
       <span class="caret"></span>
     </button>
     <ul class="dropdown-menu pull-left">
        <li>Item - #1</li>
        <li>Item - #2</li>
        <li>Item - #3</li>
     </ul>
   </div>
   <input type="hidden" id="hidden_element" value=""> 
   <button type="submit" id="submitselfspell" class="btn btn-default">Cast</button>
</form>

Answer 2

Try this:

$(".dropdown-menu li a").click(function(){
  $(this).parents(".input-group-btn").find('.btn').text($(this).text());
  $(this).parents(".input-group-btn").find('.btn').val($(this).text());
  $(".dropdown-menu").attr('value', $(this).data('value'));
});

$("#submitselfspell").click(function () {
            var spellval = $(".dropdown-menu").attr('value');
            jQuery.ajax({
            type: "POST",
            url: 'selfspellajax.php',
            data:{spellval:value},
            success: function(data) {
            $("#selfspellhint").html(data);
            }
        });

});

Answer 3

Just read the value from your DropDown. Give your UL an id:

<ul class="dropdown-menu pull-left" id="my-dropdown">

Then you can read the value via jQuery

var data = $('#my-dropdown').val();

and put it in the data object of the ajax call.