Jump to content
giannis196

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

Recommended Posts

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 by giannis196

Share this post


Link to post
Share on other sites
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 by giannis196

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites
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 by giannis196

Share this post


Link to post
Share on other sites

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 by giannis196

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...