What's wrong with my selector that supposed to select the child of "this"?

[giannis196]

Ok so i am trying to make a shopping cart and now i must make jQuery to select the value of input number box so i made this script code:

 

    $('#previewCon tbody tr .addtocart').click(function(){
        var itemid=$(this).attr('data-id');
        var itemqty=$(this).find('#number').val();
        alert(itemqty);
    })

The code suppose to select the pressed button and find the #number's number to add it to cart, unfortunately there is something wrong with the selector.
can you help me out with that?

Edited October 27, 2019 by giannis196

[dsonesuk]

If its a button? It normally wouldn't have children so the find() wouldn't work,  you need to directly target the element.

[giannis196]

1 hour ago, dsonesuk said:

If its a button? It normally wouldn't have children so the find() wouldn't work,  you need to directly target the element.

yes, it's a button
what do you mean with "directly target the element"?

can you give me an example?

edit: ok i understood what do you mean so i need to target the element in the same level (because what i am trying to select is in the same level with button) just like css's + but how i select an element in the same level in javascript?

i edited the code and now it works only for the 1st item of the list, if i click to another item of the list it will not work, it will simply take the 1st input box

here is the edited code:

 

$('#previewCon tbody tr .addtocart').click(function(){
        var itemid=$(this).attr('data-id');
        var itemqty=$('#previewCon tbody tr #number').val();
        console.log(itemqty);
    })

so, what to do to take the value from the same tr where i pressed the add to cart button?

Edited October 27, 2019 by giannis196

[dsonesuk]

A id is supposed to be unique within a page so target the id directly.

Next sibling '+' in css would be next() in jquery. 

IF data-id is the id you wish to target then use that to target the id related to button clicked.

var itemqty=$('#previewCon tbody tr #'+itemid).val();

	var itemqty=$(this).next().find('.number').val();
	

Edited October 27, 2019 by dsonesuk

[giannis196]

2 hours ago, dsonesuk said:

A id is supposed to be unique within a page so target the id directly.

Next sibling '+' in css would be next() in jquery. 

IF data-id is the id you wish to target then use that to target the id related to button clicked.

var itemqty=$('#previewCon tbody tr #'+itemid).val();

 

	var itemqty=$(this).next().find('.number').val();
	

 

if you can tell me how i can select 1 level back then i think i have the solution.
i will select (this) i will tell the machine to look 1 level back and then i will call find('#number'+itemid)

Edited October 27, 2019 by giannis196

[giannis196]

Ok, i finally found it!

here is the correct code:
 

<?php

    require_once("database.php");
    $select = $pdo->prepare("SELECT * FROM `carshopdatabase` ");
    $select->execute([]);
    $query = $select->fetchAll();
        echo "<table id='previewCon'><thead><th>ID</th><th>car name</th><th>HP</th><th>CC</th><th>Drive Type</th><th>Required License</th><th>Cost</th><th>qty</th></thead><tbody>"; 
foreach($query as $k => $i){
    $comment[$k]=$i["comment"];
   echo "<tr data-id=".$i["id"]."><td id='id'>cr".$i["id"]."</td> <td>".$i["car_name"]."</td> <td>".$i["HP"]."</td> <td>".$i["CC"]."</td> <td>".$i["drive_type"]."</td> <td>".$i["required_license"]."</td> <td>".$i["cost"]."</td><td><input type='number' id='number".$i['id']."' min='1' step='1'></td><td data-id=".$i["id"]."><input data-id=".$i['id']." class='addtocart' type='button' value='Add to cart'/></td></tr>";
}
echo "</tbody></table>";
echo "<script>$('#previewCon tbody tr').click(function(){
    var id=$(this).attr('data-id');
        $.ajax({
            url: 'Postcomment.php', 
            type: 'POST', 
            data: {id:id}, 
            success: function(response){
                $('#carcomment').html(response);
            }
        })
    })
    $('#previewCon tbody tr .addtocart').click(function(){
        var itemid=$(this).attr('data-id');
        var itemqty=$('#number'+itemid).val();
        console.log(itemqty);
    })
    </script>"

?>

by this way it searches for the id number and it puts the itemid at the end so i have ex: number3 as id to search, it searches for the number3 it and it takes its value

these 4 lines of code took me the entire day but i found it!

edit: i also edited the id of the input type from my table and now its id=number.$i['id']
 so i have ex number3 for the machine to find with the adobe id which is also number3 so it finds it and it gets its value

Edited October 27, 2019 by giannis196