Why doesnt HTML-form insert values into Mysql?

Question

So the PHP script is actually having a connection with the server, but somehow the database at localhost doesn't fill. What did I possibly do wrong?

script.php

<?php
$link = mysqli_connect("127.0.0.1", "root", "", "testdb");

if (!$link) {
echo "Error: Unable to connect to MySQL." . PHP_EOL;
echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;
echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;
exit;
}

echo "Success: A proper connection to MySQL was made! The my_db database is 
great." . PHP_EOL;
echo "Host information: " . mysqli_get_host_info($link) . PHP_EOL;

$klas = isset($_POST['klasDown']);
$naam = isset($_POST['naamTxt']);

$stmt = $link->prepare("INSERT INTO resultaten (Klas, Naam) VALUES (?, ?");
if (!$stmt) {
echo "false";
} else {
$stmt->bind_param("ss", $klas, $naam);
$stmt->execute();
}


mysqli_close($link);
?>

HTML:

<form id="myForm" method="post" action="script.php">
Naam: <input name="naamTxt" type="text" maxlength="512" 
id="naamTxt" class="searchField"/> <br>

Klas: <select name="klasDown">
  <option value="H4A" selected="selected">H4A</option>
  <option value="H4B" >H4B</option>
  <option value="H4C">H4C</option>
  <option value="H4C">H4D</option>
  <option value="H4C">V4A</option>
  <option value="H4C">V4B</option>
  <option value="H4C">V4C</option>
  <option value="H4C">V4D</option>  
</select> 


<div class="row">
<div class="col-4">1. Kies 1/5 </div>
<div class="col text-center"><input type="radio" name="v1" id="v1_1" 
value="Helemaal mee oneens"></div>
<div class="col text-center"><input type="radio" name="v1" id="v1_2" 
value="Deels oneens"></div> 
<div class="col text-center"><input type="radio" name="v1" id="v1_3" 
value="Neutraal"></div> 
<div class="col text-center"><input type="radio" name="v1" id="v1_4" 
value="Deels mee eens"></div> 
<div class="col text-center"><input type="radio" name="v1" id="v1_5" 
value="Helemaal mee eens"></div>
</div>

<input type= "submit" style="text-align: center" 
onclick="bereken()">
</form>

^ Above is the Html Form

Bereken() function:

function bereken() {

    var e = 0;
    var c = 0;


    if(document.getElementById('v1_1').checked)  {
      c = c - 0
    }else if(document.getElementById('v1_2').checked)  {
      c += 1;
    }else if(document.getElementById('v1_3').checked)  {
      c += 2;
    }else if(document.getElementById('v1_4').checked)  {
      c += 3;
    }else if(document.getElementById('v1_5').checked){
      c += 4;
    }

    var klas = li.options[li.selectedIndex].value;
    var naam = document.getElementById('searchTxt').value;

    alert(klas + ", " + naam);
}

^ This is the Javascript bereken() function . Apparently too much code, so have to add some text.

Answer 1

I hope the following might prove of use in getting the database updated. The javascript function itself now submits the form ( based upon original idea ) and by doing so allows you to use an alert statement with the values to be sent. I was initially getting an error about undefined li in the javascript function - hence using querySelector to identify the form element.

In this instance the form submits to the same page but the form action could easily be set as you had previously, I only did this to write the code now. The sql uses prepared statements - not tested but should(?!) be OK.

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' ){

        try{

            $dbuser='root';
            $dbpwd='';
            $dbhost='localhost';
            $dbname='testdb';

            $link=new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );


            if( !$link ) {
                $message=sprintf( "Error: Unable to connect to MySQL.\nDebugging errno: %s\nDebugging error: %s" );
                throw new Exception( $message, $link->errno, $link->error );
            }

            $klas = !empty( $_POST['klasDown'] ) ? filter_input( INPUT_POST, 'klasDown', FILTER_SANITIZE_STRING ) : false;
            $naam = !empty( $_POST['naamTxt'] ) ? filter_input( INPUT_POST, 'naamTxt', FILTER_SANITIZE_STRING ) : false;

            if( !$klas ) throw new Exception('klas cannot be empty');
            if( !$naam ) throw new Exception('naam cannot be empty');

            $stmt = $link->prepare( "insert into `resultaten` (`klas`, `naam`) values ( ?, ? )" );
            if( $stmt ){

                $stmt->bind_param( 'ss', $klas, $naam );
                $result=$stmt->execute();
                if( !$result )throw new Exception('SQL insert failed');

            } else {
                throw new Exception('Failed to prepare SQL query');
            }


            $stmt->free_result();
            $stmt->close();
            $link->close();

        }catch( Exception $e ){
            echo $e->getMessage();
        }

    }
?>
<!doctype html>
<html>
    <head>
        <title>Bereken</title>
        <script>

            function bereken() {
                var e = 0;
                var c = 0;

                if(document.getElementById('v1_1').checked)  {
                  c = c - 0
                }else if(document.getElementById('v1_2').checked)  {
                  c += 1;
                }else if(document.getElementById('v1_3').checked)  {
                  c += 2;
                }else if(document.getElementById('v1_4').checked)  {
                  c += 3;
                }else if(document.getElementById('v1_5').checked){
                  c += 4;
                }
                var li=document.querySelector('select[name="klasDown"]')
                var klas = li.options[li.selectedIndex].value;
                var naam = document.getElementById('naamTxt').value;

                alert( klas + ", " + naam );
                document.forms['myForm'].submit();
            }

        </script>
    </head>
    <body>
        <form id="myForm" method="post">
            Naam: <input name="naamTxt" type="text" maxlength="512" id="naamTxt" class="searchField"/> <br>

            Klas: <select name="klasDown">
              <option value="H4A" selected="selected">H4A</option>
              <option value="H4B" >H4B</option>
              <option value="H4C">H4C</option>
              <option value="H4C">H4D</option>
              <option value="H4C">V4A</option>
              <option value="H4C">V4B</option>
              <option value="H4C">V4C</option>
              <option value="H4C">V4D</option> 
            </select> 


            <div class="row">
                <div class="col-4">1. Kies 1/5 </div>
                <div class="col text-center">
                    <input type="radio" name="v1" id="v1_1" value="Helemaal mee oneens">
                </div>
                <div class="col text-center">
                    <input type="radio" name="v1" id="v1_2" value="Deels oneens">
                </div> 
                <div class="col text-center">
                    <input type="radio" name="v1" id="v1_3" value="Neutraal">
                </div> 
                <div class="col text-center">
                    <input type="radio" name="v1" id="v1_4" value="Deels mee eens">
                </div> 
                <div class="col text-center">
                    <input type="radio" name="v1" id="v1_5" value="Helemaal mee eens">
                </div>
            </div>
            <button type="button" style="text-align: center" onclick="bereken()">Verstuur</button>
        </form>
    </body>
</html>

Answer 2

On script.php do the following

If(isset($_POST['submit''])){

$klas = $_POST['klasDown'];

$naam = $_POST['naamTxt'];

$stmt = $link->prepare("INSERT INTO resultaten (Klas, Naam) VALUES (?, ?");

if (!$stmt) {

echo "false";

} else {

$stmt->bind_param('ss', $klas, $naam);

$stmt->execute();

}

}

Replace the button With the following

input type= "submit"

name="submit"

value=" Verstuur"

style="text-align: center"

onsubmit="bereken()"

Answer 3

Replace

$klas = isset($_POST['klasDown']);
$naam = isset($_POST['naamTxt']);

with

$klas = $_POST['klasDown'];
$naam = $_POST['naamTxt'];

isset will return a boolen, not a string that you are expecting.