Form inside of $.load not posting correctly

Are you familiar with AJAX? Forgive me if you know this already, but in case you don't:

Ajax posts data to an external php file, which processes the data it receives, and sends back an answer. It looks like this:

FILE #1:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#Sel').change(function() {
                    var opt = $(this).val();
                    var someelse = 'Hello';
                    var more_stuff = 'Goodbye';
                    $.ajax({
                        type: "POST",
                        url: "receiving_file.php",
                        data: 'selected_opt=' + opt + '&something_else=' +someelse+'&more_stuff='+more_stuff,
                        success:function(data){
                            alert('This was sent back: ' + data);
                        }
                    });
                });
            });
        </script>
    </head>
<body>

<select id = "Sel">
    <option value ="Song1">default value</option>
    <option value ="Song2">Break on through</option>
    <option value ="Song3">Time</option>
    <option value ="Song4">Money</option>
    <option value="Song5">Saucerful of Secrets</option>
</select>

FILE #2: receiving_file.php

<?php
    $recd = $_POST['selected_opt'];
    echo 'You chose: ' . $recd;

Form inside of $.load not posting correctly

Related

Recent Posts