Error getting data from mysql using javascript and ajax

Question

I try to get data from mysql database using ajax. I adapted my old ajax code that works OK in different project, but It does not work here.

I use javascript function as bellow:

var text1 = document.getElementById('ST0_nazwaMenu');
var combo1 = document.getElementById('S0_dzienMenu');
var combo2 = document.getElementById('S0_posilekMenu');

function zaladujSzczegoly() {
        if (text1.value.trim() != "" && combo1.value.trim() != "" && combo2.value.trim() != "") {

                var nazwaMenu = text1.value.trim();
                var dzienMenu = combo1.value.trim();
                var posilekMenu = combo2.value.trim();

                $.ajax({
                        method: "POST",
                        url: "test.php",
                        data: {"jadlospis": nazwaMenu.val(), "dzien": combo1.val(), "posilek": combo2.val()},
                }).done(function( data ) {
                        var result = $.parseJSON(data);
                });


                alert(text1.value);

        }
}

text1.addEventListener('change', zaladujSzczegoly, false);
combo1.addEventListener('change', zaladujSzczegoly, false);
combo2.addEventListener('change', zaladujSzczegoly, false);

The test.php file is just for testing and it looks like this:

<?php

include 'db_connection.php';
include 'functions.php';


error_log("-->test.php:"."\n", 3, "/var/www/html/jadlospis/errors.log");

if (isset($_POST['jadlospis'],$_POST['dzien'],$_POST['posilek'])){

        error_log($_POST['jadlospis']."\n", 3, "/var/www/html/jadlospis/errors.log");

        $SQL = "SELECT COUNT(*) AS Konta FROM users WHERE jadlospis='".$_POST['jadlospis']."'";

        $result = mysqli_query($conn,$SQL ) or die(mysqli_error($this->dblink));
        while($row = mysqli_fetch_array($result))
        {
                $T_Count=$row['Konta'];
        }

        mysqli_close($conn);
        echo $result;
}

?>

After changing form controls the function is called and then, I got an error message in browser console saying: TypeError: nazwaMenu.val is not a function

Any hints on what the problem might be, please?

You already got the value when you did nazwaMenu = text1.value.trim(); you don't need to call val(). — Barmar
– Barmar, Commented Nov 22, 2019 at 17:30
combo1.val() should be combo1.value. val() is a jQuery method, but combo1 is a DOM element. — Barmar
– Barmar, Commented Nov 22, 2019 at 17:30
You're confusing yourself by mixing DOM methods like getElementById with jQuery methods like $("#S0_dzienMenu"). Pick one or the other and use them consistently. — Barmar
– Barmar, Commented Nov 22, 2019 at 17:32

Shankar · Accepted Answer · 2019-11-22 17:38:45Z

2

You have already fetched the value of text1 into variable nazwaMenu so you do not need to call nazwaMenu.val()
You can use text1.value.trim() or $("#ST0_nazwaMenu").val().trim() or just the varibale containing value nazwaMenu

because .val() can not be called on value or DOM, to usr .val() object needs to be of JQuery Object

replace your this line

data: {"jadlospis": nazwaMenu.val(), "dzien": combo1.val(), "posilek": combo2.val()},

with

data: {"jadlospis": nazwaMenu, "dzien": dzienMenu , "posilek": posilekMenu }

and you should be fine~

edited Nov 22, 2019 at 17:38

answered Nov 22, 2019 at 17:31

Shankar

3,0863 gold badges28 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

davidev Over a year ago

You are right, but I think you won't need the , at the end. As data is the last one.

Shankar Over a year ago

it doesn't make difference with the OP's problem though. Thanks anyway :)

davidev Over a year ago

Yeah right. The main problem is val(). Yours the correct! Good job

davidev · Accepted Answer · 2019-11-22 17:40:16Z

1

Try this line:

data: {"jadlospis": nazwaMenu, "dzien": combo1, "posilek": combo2}

You won't need a , at the end, as it is the last value.

Edit: Please see @Irony Stack solution, val() is not needed anymore.

edited Nov 22, 2019 at 17:40

answered Nov 22, 2019 at 17:34

davidev

8,6955 gold badges35 silver badges70 bronze badges

Collectives™ on Stack Overflow

Error getting data from mysql using javascript and ajax

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related