ajax调用给出jquery错误

Question

for school i am trying to get data from a form into database, using Jquerys ajax function. the hard part is that i make the inputs dynamically depending of the amount of data in my database. Because of this I really have no Idea how i can get this data in a good way, I have tryed something(here below) but this gives me this error:

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined jquery-1.9.1.js:2208

I hope some one can help me,

Thanks in advance,

Justin

Code:

$(document).ready(init);
console.log("document readyed");

function init() {
    console.log("started init");
    ajaxcall();
    $("#wedstrijden").submit(function (event) {
        console.log("e.preventdefault");
        event.preventDefault();
        submitHandler();
    });
}

function ajaxcall() {
    console.log("i'am getting the games");
    $.ajax({
        dataType: "json",
        url: 'libs/php/function.php',
        success: getAllWedstijdenCallback
    })
}

function submitHandler() {
    console.log("submithandler started");
    $inputVoorValue = $('.voor').val();
    $inputVoorValues = $(this.$inputVoorValue);
    $inputTegenValue = $('.tegen').val();
    $inputTegenValues = $(this.$inputTegenValue);
    $idValue = $('wedstijdId').val();
    $idValues = $(this.$idValue);
    console.log($inputVoorValue);
    console.log($inputTegenValue);
    updateAjaxCall($idValues, $inputTegenValues, $inputVoorValues)
}
function updateAjaxCall($idValue, $inputTegenValue, $inputVoorValue) {
    console.log("i'm updating");
    $.ajax({
        dataType: "json",
        url: 'libs/php/function.php',
        data: {id: $idValue, thuisPoint: $inputVoorValue, uitPoint: $inputTegenValue},
        success: $("#wedstrijden").submit(function () {
            console.log("updated");
        })
    })
}
function getAllWedstijdenCallback(data) {
//    console.log(data);
    $.each(data, function (i, val) {
        if (val <= 5) {
            console.log("need to add wedstrijden to the database");
//            addDataToDatabase();
        } else {
            createFormLine(val);
        }
    });
}

function createFormLine(data) {
    console.log(data);
    $thuisClub = data.thuisClub;
    $thuisPoint = data.thuisPunt;
    $uitClub = data.uitClub;
    $uitPoint = data.uitPunt;
    console.log("test");
    if ($thuisPoint == null || $uitPoint == null) {
        $("#wedstrijden").prepend("<div class='fromLine'><div class='labels'> " +
            $thuisClub + " - " + $uitClub
            + "</div><span class='wedstrijdId'></span><label for='voor'>voor</label><input class='voor numberInput' type='number' placeholder=" + $thuisPoint + "> <label for='tegen'>tegen</label>" +
            "<input class='tegen numberInput' type='number' placeholder=" + $uitPoint + "> <input class='sbm-button' type='submit' value='ok'> </div>");
    }
}

here is the server code

require_once 'settings.php';
$mysqli = mysqli_connect($db_host, $db_user, $db_password, $db_database);
if (mysqli_connect_error()) {
    echo mysqli_connect_error($mysqli) . "We are not able to connect to the online database";
}
if (isset($_GET['club']) && !empty($_GET['club'])) {
    jsondecode($mysqli);
}
else if(isset($_GET['id'])){
    updatePoints($mysqli);
}
else if (isset($_GET['thuisPoint']) && !empty($_GET['thuisPoint']) && ($_GET['uitPoint']) && ($_GET['uitPoint'])) {
    updatePoints($mysqli);
} else{
    getWedstrijd($mysqli);
}
function jsondecode($mysqli)
{
    $apiLink = 'http://docent.cmi.hr.nl/moora/imp03/api/wedstrijden?club=';
//    $club = $_GET['club'];
    $data = json_decode(file_get_contents($apiLink . "Ajax"));
    foreach ($data as $data => $info) {
        $thuisClub = $info->homeClub;
        $uitClub = $info->awayClub;
        addWestrijden($mysqli, $thuisClub, $uitClub);
    }
}

//querys
function addWestrijden($mysqli, $thuisClub, $uitClub)
{
    $query = "INSERT INTO wedstrijd (thuisClub, uitClub) VALUES('$thuisClub', '$uitClub')";
    $resultAddWedstrijd = mysqli_query($mysqli, $query) or die(mysqli_error($mysqli));
    getWedstrijd($mysqli);
}

function getWedstrijd($mysqli)
{
    $query = "SELECT * FROM wedstrijd ORDER BY thuisClub DESC";
    $resultGetWedstijd = mysqli_query($mysqli, $query) or die(mysqli_error($mysqli));
    while ($result = mysqli_fetch_assoc($resultGetWedstijd)){
        $rows []= $result;
    }
    header("Content-Type: application/json");
    echo json_encode($rows);
    exit;
}

function updatePoints($mysqli)
{
    $id = $_GET['id'];
    $thuisPoints = $_GET['thuisPoint'];
    $uitPoints = $_GET['uitPoint'];
    $query = "UPDATE wedstrijd SET thuisPunt = '$thuisPoints', uitPunt = '$uitPoints') WHERE id = '$id'";
    mysqli_query($mysqli, $query) or die(mysqli_error($mysqli));
    getWedstrijd($mysqli);
}

Answer 1

You need to define the expected parameters inside of your updateAjaxCall function:

function updateAjaxCall($idValue, $inputTegenValue, $inputVoorValue)
{
    //...
}

Edit:

There's a problem with the following variables too, which is giving you the error you mentioned in your comment below:

$inputVoorValue = $(this, '.voor')[0].val();
$inputTegenValue = $(this, '.tegen').val();
$idValue = $(this + 'wedstijdId').val();

If you want to find the value of inputs inside your form, then do something like this:

$('#wedstrijden .voor')[0].val();

or

$("#wedstrijden").submit(function(event){
    alert("Handler for .submit() called!");
    event.preventDefault();
    submitHandler($(this));
});

...

function submitHandler(form) {
    $inputVoorValue = form.find('.voor')[0].val();
}