Get data and submit without refreshing page

Question

 ////////////////// Jquery AJAX submit zonder te refreshen ///////////////////////////

           function submitdata() {
              var vakken  = document.getElementById("vakken").value;
               var dataString = 'vakken=' + vakken;

                   // AJAX
                   $.ajax({
                       type: "POST",
                       url: "prototype.php",
                       data: dataString,
                       cache: false,
                       success: function(html) {
                           alert(html);
                       }

                   });

               return false;

           }

what is wrong here? //////////////////////////////////////////////////////////////////////////////////

<form id="selector" action="prototype.php" method="post" enctype="multipart/form-data">
                        <select name="vakken">

                            <option value="DED">VAK: DED  </option>
                            <option value="UXU">VAK: UXU  </option>
                            <option value="SCO">VAK: SCO  </option>
                            <option value="PO">VAK: PO  </option>
     </select>
                        <button type="button" onClick="submitdata();">Submitii</button>
                    </form>
                </div>

                <div id="vlakkencontainer">
                    <?php
    // recieve data 
                    if(isset($_POST['vakken'])) {
                        $vak = $_POST['vakken'];
                        echo $vak;
                        $sqldedquery = mysqli_query($con, "SELECT * FROM `opdracht` WHERE `vak` = '" . $vak . "'");
                        $vlakid = 0;
                        while ($row = mysqli_fetch_array($sqldedquery)) {

                            $afbeelding = $row['afbeeldingnaam'];
                            $pdf = $row['pdfnaam'];
                            $naamopdracht = $row['opdrachtnaam'];

                           echo '<a id="vakhover" href="../../../db/' . "$pdf" . '"><div class="vlak" id=' . "$vlakid++" . '>
            <img src="../../../db/' . $afbeelding . '"><div id="naamopdracht">' . $naamopdracht . '</div>
        </div></a>';
                        } 
                    } ?> 

how can i get this data out of my db without refresh the page. i tried ajax but i could not get it to work!

Answer 1

you do not have an element with id = vakken, replace your select from

<select name="vakken">

to

<select name="vakken" id="vakken">

it works fine

<form id="selector" action="prototype.php" method="post" enctype="multipart/form-data">
    <select name="vakken" id="vakken">

        <option value="DED">VAK: DED  </option>
        <option value="UXU">VAK: UXU  </option>
        <option value="SCO">VAK: SCO  </option>
        <option value="PO">VAK: PO  </option>
     </select>
    <button type="button" onClick="submitdata();">Submitii</button>
</form>

<script>

           function submitdata() {
              var vakken  = document.getElementById("vakken").value;
              alert(vakken);
           }
</script>

after that PHP script can process vakken parameter...

Answer 2

I don't see any id "vakken", you have to change :

var vakken  = document.getElementById("vakken").value;

To :

var vakken = document.getElementsByName("vakken").value;

Answer 3

Problem here is that you are returning HTML without specifying a data-type for your ajax call, which in my experience defaults to JSON which your response is clearly not. It helps to have a failure callback handler to check if what you are doing is wrong too.

Check if adding this to your AJAX function fixes things

         $.ajax({
                   type: "POST",
                   url: "prototype.php",
                   data: dataString,
                   cache: false,
                   //This is new
                   dataType: "html",
                   success: function(html) {
                       alert(html);
                   }
               }).fail(function(){alert("Something has gone terribly wrong")});