'Why does my .val() return undefined even though id is correct and the script is in the right place?

I'm trying to parse some data from generated HTML which displays objects from a database to jquery.

Here's how info within blocks is generated:

<?php foreach ($items as $item): ?>
<div class="item-info-div" style="padding: 5px;">
            //different fields output
            <a><?= $item->dailyRate ?> per day</a><br>
//then I generate a unique id using field name + id
            <input type='hidden' name='dailyRate' id='dailyRate<?=$item->id?>'
             value='<?=$item->dailyRate?>'>
//then I have a button that should parse the data to jquery
            <input type='submit' name='add_to_list' class='btn btn-warning my-2 add' 
            value='Add To list' id='<?=$item->id?>'>
</div>

Then in the file where I generate the blocks, I put the script right before the closing body tag

<script type="text/javascript">
$(document).ready(function(){
$(document).on("click",".add",function(){
    var id = $(this).attr("id");
    var dailyRate = $("#dailyRate"+id+"").val();

    console.log('I am the current value: ' + dailyRate);  
});
 }); 
</script>

The thing is when I look at the HTML source in a browser, both value and id for the field are generated properly. If I do the same concatenation in jquery ("#dailyRate"+id+""), it does produce the same string as the one in the HTML source. var Id is alerted just fine. Why does this .val statement return undefined when alerted/console.logged? What should I do to make it store the value of the hidden input? I have tried changing the datatype for dailyRate in the database (let's say it's bigint), it still says undefined.

UPD: My bad, the problem was with the data. Instead of a serial ID in my project, we use generated ID which features spaces. Because of them, jquery couldn't point at the address (id) correctly. Thanks to https://stackoverflow.com/users/4680889/hasan-%c4%b0slamo%c4%9elu the problem was solved. Solution I really needed: id='dailyRate<?=str_replace(' ','',$vehicle->regNum)?>'

phpjqueryparsing


Solution 1:[1]

I wrote your code and it's perfectly worked. You should check your object or jquery call. You can find the working example below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<?php
$item = new StdClass();
$item->id = 1;
$item->dailyRate = 5;
$items = array($item);

?>
<?php foreach ($items as $item): ?>

<div class="item-info-div" style="padding: 5px;">
            //different fields output
            <a><?= $item->dailyRate ?> per day</a><br>
//then I generate a unique id using field name + id
            <input type='hidden' name='dailyRate' id='dailyRate<?=$item->id?>'
             value='<?=$item->dailyRate?>'>
//then I have a button that should parse the data to jquery
            <input type='submit' name='add_to_list' class='btn btn-warning my-2 add' 
            value='Add To list' id='<?=$item->id?>'>
</div>
<?php endforeach ?>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click",".add",function(){
    var id = $(this).attr("id");
    var dailyRate = $("#dailyRate"+id+"").val();

    console.log('I am the current value: ' + dailyRate);  
});
 }); 
</script>

</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hasan ?SLAMO?LU

Related Questions