CODEWITHSUNDEEP
javascripthtmlspring-mvc
Assaf
Assaf

Reputation: 1124

HTML - Clicking a button to obtain table cell value

My goal - click on a button, fetch product value, add to cart.

I have an html page in which I want to click on a button and obtain productId value, in order to fetch it, insert to cart. The records in which I want to be able to add to the cart are fetched from the database each time the page is loaded

The problem is that when I press the button, even though I connect it with an ID, I only get the first record, and it seems like the button isn't connection to the table at all.

I have attached a photo to show how the page looks like - enter image description here

Here's the code:

    <!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        * {box-sizing: border-box;}

        body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        .topnav {
            overflow: hidden;
            background-color: #e9e9e9;
        }

        .topnav a {
            float: left;
            display: block;
            color: black;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }

        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

        .topnav a.active {
            background-color: #2196F3;
            color: white;
        }

        .topnav .search-container {
            float: right;
        }

        .topnav input[type=text] {
            padding: 6px;
            margin-top: 8px;
            font-size: 17px;
            border: none;
        }

        .topnav .search-container button {
            float: right;
            padding: 6px 10px;
            margin-top: 8px;
            margin-right: 16px;
            background: #ddd;
            font-size: 17px;
            border: none;
            cursor: pointer;
        }

        .topnav .search-container button:hover {
            background: #ccc;
        }

        @media screen and (max-width: 600px) {
            .topnav .search-container {
                float: none;
            }
            .topnav a, .topnav input[type=text], .topnav .search-container button {
                float: none;
                display: block;
                text-align: left;
                width: 100%;
                margin: 0;
                padding: 14px;
            }
            .topnav input[type=text] {
                border: 1px solid #ccc;
            }
        }
    </style>
</head>
<div class="topnav">
    <a class="active" href="/search">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
    <div class="search-container">
        <form action="/results">
            <input type="text" placeholder="Search.." name="search">
            <button type="submit"><i class="fa fa-search"></i></button>
        </form>
    </div>
</div>

<div style="padding-left:16px">
</div>

<style>
    table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        border: 1px solid #ddd;
    }

    th, td {
        text-align: left;
        padding: 16px;
    }

    tr:nth-child(even) {
        background-color: #f2f2f2
    }
</style>
</head>
<body>

<h2>Search Results</h2>

<table id="products">
    <tr>
        <th>Product ID</th>
        <th>Name</th>
        <th>Brand</th>
        <th>Rating</th>
        <th>Price</th>
        <th>Availability</th>

        <tr th:each="product : ${results}">
            <td th:text="${product.productId}" id="productId"></td>
            <td th:text="${product.productName}"></td>
            <td th:text="${product.brand}"></td>
            <td th:text="${product.rating}"></td>
            <td th:text="${product.price}"></td>
            <td th:text="${product.availableInStock}"></td>
            <td><button onclick="myfunction()" class="btn-select" type="button" id="buttonc">Add to cart</button></td>
        </tr>

</table>


<script>
    function myfunction() {
        alert(document.getElementById("productId").outerText);



    }
</script>

</body>
</html>

Upvotes: 0

Views: 81

Answers (3)

Unmitigated
Unmitigated

Reputation: 89384

All of your buttons will be invoking the same function, giving you no way to figure out which product ought to be added to the cart. You should give the button a data attribute like data-productid and pass it as an argument to the function (this.dataset.productid) to get the id of the product that should be added to the cart. You should also give one of the table cells an id of the product id and get the row using document.getElementById(productid).parentNode.

Also, there were a few syntax errors with your HTML like there being HTML (the header) before the body and two end </head> tags.

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        * {box-sizing: border-box;}

        body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        .topnav {
            overflow: hidden;
            background-color: #e9e9e9;
        }

        .topnav a {
            float: left;
            display: block;
            color: black;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }

        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

        .topnav a.active {
            background-color: #2196F3;
            color: white;
        }

        .topnav .search-container {
            float: right;
        }

        .topnav input[type=text] {
            padding: 6px;
            margin-top: 8px;
            font-size: 17px;
            border: none;
        }

        .topnav .search-container button {
            float: right;
            padding: 6px 10px;
            margin-top: 8px;
            margin-right: 16px;
            background: #ddd;
            font-size: 17px;
            border: none;
            cursor: pointer;
        }

        .topnav .search-container button:hover {
            background: #ccc;
        }

        @media screen and (max-width: 600px) {
            .topnav .search-container {
                float: none;
            }
            .topnav a, .topnav input[type=text], .topnav .search-container button {
                float: none;
                display: block;
                text-align: left;
                width: 100%;
                margin: 0;
                padding: 14px;
            }
            .topnav input[type=text] {
                border: 1px solid #ccc;
            }
        }
    table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        border: 1px solid #ddd;
    }

    th, td {
        text-align: left;
        padding: 16px;
    }

    tr:nth-child(even) {
        background-color: #f2f2f2
    }
</style>
</head>
<body>
<div class="topnav">
    <a class="active" href="/search">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
    <div class="search-container">
        <form action="/results">
            <input type="text" placeholder="Search.." name="search">
            <button type="submit"><i class="fa fa-search"></i></button>
        </form>
    </div>
</div>

<div style="padding-left:16px">
</div>

<h2>Search Results</h2>

<table id="products">
    <tr>
        <th>Product ID</th>
        <th>Name</th>
        <th>Brand</th>
        <th>Rating</th>
        <th>Price</th>
        <th>Availability</th>

        <tr th:each="product : ${results}">
            <td th:text="${product.productId}" id="${product.productId}"></td>
            <td th:text="${product.productName}"></td>
            <td th:text="${product.brand}"></td>
            <td th:text="${product.rating}"></td>
            <td th:text="${product.price}"></td>
            <td th:text="${product.availableInStock}"></td>
            <td><button onclick="myfunction(this.dataset.productid)" class="btn-select" type="button" data-productid="${product.productId}">Add to cart</button></td>
        </tr>

</table>


<script>
    function myfunction(productId) {   
    alert(productId);
    var row = document.getElementById(productId).parentNode;
    console.log(row);
    }
</script>

</body>
</html>

Upvotes: 1

AHB
AHB

Reputation: 558

The problem is that all of your buttons will be invoking the myfunction, and that just grabs the first productId and uses that outerText, without signifying what button was actually clicked.

You can pass an argument into myfunction, such as the productId, or you can use the Event object, https://developer.mozilla.org/en-US/docs/Web/API/Event, from inside your click handler and work out what was clicked from that.

I'd also suggest that you avoid using an ID for this purpose, as they are meant to be unique on the page.

Let me know if you need more concrete help!

Upvotes: 0

Anderson Urrego Restrepo
Anderson Urrego Restrepo

Reputation: 1

Try this when you call the javascript function myfunction(${product.productId}) and change the javascript function function myfunction(id) {}

Upvotes: 0

Related Questions