CODEWITHSUNDEEP
jqueryhtmlasp.netasp.net-mvc
Tal Rofe
Tal Rofe

Reputation: 1844

jQuery script on button is not working

I think the script is not working because my controller is not running once I press the button in my website. Once I press the button, nothing happens. The relevant codes are attached.. I'm pretty sure the problem is with my script.

My script:

    <script>
    $("#btn_add").click(function(event)
    {
        event.preventDefault();
        var url = '@Url.Action("AddToCart", "Cart", new {idinput = "IDINPUT", amount = "THEAMOUNTER"})';
        url = url.replace("THEAMOUNTER", $("#amounter").val());
        url = url.replace("IDINPUT", $(this).data("id"));
        window.location.href = url;
    });
</script>

the relevant part in the html code:

@foreach (var product in Model)
        {

            <figure class="portfolio-item col-md-4 col-sm-6">
                <img src="~/images/@product.Picture" class="img-responsive" />
                <div class="product-details">

                    <div class="form-group">
                        <label>Enter amount</label>
                        <div class="col-md-10">
                            <input type="text" id="amounter" />
                        </div>
                    </div>
                    <div>
                        <a id="btn_add" href="" [email protected] class="btn btn-info btn-lg" style="margin-left:60px">
                            <span class="glyphicon glyphicon-shopping-cart"></span> Add to cart
                        </a><br />

Upvotes: 0

Views: 83

Answers (1)

Manoz
Manoz

Reputation: 6597

give repeated buttons a class instead of using duplicate ids. Say .Mybtn for instance 

<a href="" data-id='@product.Id' class="btn btn-info btn-lg Mybtn" style="margin-left:60px">

put your click handler in document ready section. 

<script>
    $(function(){
        $(".Mybtn").click(function(event)
        {
            event.preventDefault();
            var url = '@Url.Action("AddToCart", "Cart", new {idinput = "IDINPUT", amount = "THEAMOUNTER"})';
            url = url.replace("THEAMOUNTER", $("#amounter").val());
            url = url.replace("IDINPUT", $(this).data("id"));
            window.location.href = url;
        });
    });
</script>

Upvotes: 2

Related Questions