Passing the selected value of a dropdown list to a php variable before submitting the form

Question

I am using the code below (in lightboxform.php) to send the selected dropdown value to a php file (edit.php) through ajax, and from the php file to send it back (to lightboxform.php) and assign it to the php variable that I want. However, something is not working, probably with sending and receiving back the value. Please help.

<span><?php _e('Select package*', 'gdlr-lms'); ?></span>
<select id="package" onchange="getval(this);">

            <option value="1">Package 1</option>
            <option value="1.5">Package 2</option>
            <option value="2.55">Package 3</option>
            </select>

<script> src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script>
 function getval(sel){
 var value = sel.value;
 $.ajax({
    type:"POST",
    url: 'edit.php',
    data: "val="+ value,
    success: function ( result )  {
      //  window.location.reload();
     }

  });
}

</script>

<?php echo $package ?>

And here is the code in edit.php:

<?php $package = $_GET['val'];
echo $package;
?>

Answer 1

I recommend changing it to

<script type="text/javascript">
$(function () {
    $("#package").change(function () {
        var selectedText = $(this).find("option:selected").text();
        var selectedValue = $(this).val();
        $.ajax({
            type:"POST",
             url: 'edit.php',
            data: "val="+ value,
            success: function ( result )  {
            //  window.location.reload();
          }

        });
    });
});
</script>