Access a Jquery function after a click on a button

Question

I am having this html code:

<form class="add-to-cart-form">
         <input type="hidden" name="product-code" value="2" />
         <input type="submit" value="Add" class="button" onclick="addToCart('2');"/>
    </form>

And a javascript code:

function addToCart(product_id, quantity) {
        quantity = typeof(quantity) != 'undefined' ? quantity : 1;

        $.ajax({
            url: 'test.php',
            type: 'post',
            data: 'product_id=' + product_id + '&quantity=' + quantity,
            dataType: 'json',
            success: function(json) {
                alert(json.message);
            }
        });
    }

IN the html file anytime, I click on the submit button, instead of taking me to the function addToCart, the form is submitted.

I am new to javascript and really don't know the source of the problem. Kindly help me solve this problem.

hardly see reason for having form since you don't reference any of the inputs in it. But basic issue is doing ajax doesn't tell browser not to submit the form through default browser process — charlietfl
– charlietfl, Commented Jul 15, 2016 at 3:04

Nick Larsen · Accepted Answer · 2016-07-15 03:09:52Z

1

Clicking a submit button has a default action of submitting the form. If that's not what you want to do, you have to prevent it.

<form class="add-to-cart-form">
     <input type="hidden" name="product-code" value="2" />
     <input type="submit" value="Add" class="button" onclick="event.preventDefault();addToCart('2');"/>
</form>

answered Jul 15, 2016 at 3:09

Nick Larsen

18.9k6 gold badges70 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aditya Gupta Over a year ago

Instead of preventing the default action, we can just change the type of the input element to button (as suggested in one of the comments).

Collectives™ on Stack Overflow

Access a Jquery function after a click on a button

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related