cshtml onclick button event and pass a value

Question

I have been searching for a solution to this I have a button function

html

<button class="snipcart-add-item btn c8-bg c5-text" onclick="AddProduct(item.Id)">

    @umbraco.library.GetDictionaryItem("USN Shop Add to Basket Listing")
</button>

item.id has got a value as it works in an original code that I are trying to bypass

java script is

function AddProduct(ptr) {
    $('select').on('click', function () {
        s.ajac({
            url: '/CartSurface/ProductAddToCart',
            data: "{'productId':ptr}",
        }).done(function () {
            alert('Added');
        });
    });
    console.log("Button Pressed")
}

and I get the following error when the button is pressed in the console.log

Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick

controller

public static void ProductAddToCart(int productId)
{
  ......
}

I think I have missed something stupidly simple but I cant see it

Following Owns comments

Thanks Own have changed code to

function AddProduct(value) {
        $('select').on("click", function () {
            s.ajac({
                url: '/IBDCartSurface/ProductAddToCart',
                data: "{'productId': value}",
            }).done(function () {
                alert('Added');
            });
        });
        console.log(value);
        console.log("Button Pressed");
    }

<button class="snipcart-add-item btn c8-bg c5-text" onclick="AddProduct(value)" value="@item.Id">

I get the value in the console and the "Button Pressed" message but my break point dont get triggered and the alert dosnt get triggered.

Can I ask what is the differance between s.ajac and $.ajax other than the latter cant find the url.

Note I have changed the Controller name in the controller as well

Answer 1

Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick

Your button element is passing the item ID as an argument for AddProduct. The error is telling you that the variable item either doesn't exist or is outside of the current scope.

Answer 2

Change your JS to something like:

document.on("click", "#buttonId", function(){
    data = $(this).attr("data-id");
    s.ajac({
        url: '/CartSurface/ProductAddToCart',
        data: "{'productId': data}",
    }).done(function () {
        alert('Added');
    });
}

Then change your html to

<button class="snipcart-add-item btn c8-bg c5-text" id="buttonId" data-id="item.id">
    @umbraco.library.GetDictionaryItem("USN Shop Add to Basket Listing")
</button>

Answer 3

Have found a different way to do it. I dont entirely understand all of it but I get the gist of it.

Wrap the button in the controller call where the id is the name of the controller function. Means not having to translate from one code type to another etc.

values are retrieved from the 2 input tags

csHtml

using (Html.BeginUmbracoForm<IBDCartSurfaceController>("SiteWideAddToBasket", null, new { @class = "form", role = "form" }))
{
  <input type="hidden" id="productPageId" name="productPageId" value="@item.Id" />
  <input type="hidden" id="productPrice" name="productPrice" value="@item.ProductCurrentPrice" />
  <button class="snipcart-add-item btn c8-bg c5-text" id="addToBasket" type="submit">
    @umbraco.library.GetDictionaryItem("USN Shop Add to Basket Listing")
  </button>
}

Then the Controller is

[HttpPost]
public ActionResult SiteWideAddToBasket(int productPageId, decimal productPrice)
{
......
}