submit function inside click function

Question

I'm using click function to get the current ID of the clicked form, then running submit form function to apply my code.

But once I click to run the function the code doesn't apply, I've tried to debug the code to find out what causing this problem, it's seems like the click function works properly, but the submit function doesn't work at all.

The submit function is working if there weren't any click function wrapping it.

<form method="POST" class="<?php echo $row['code']; ?>" id="form<?php echo $row['id']; ?>">
    <a id="submit" class="product-links" id="cartsub" href='javascript:addCart(<?php echo $row['id']; ?>);'>
       <i class="fa fa-shopping-cart"></i>
    </a>
</form>
<script>
    function addCart(id){
        $("#form" + id).submit(function(e) {
            e.preventDefault();
            var code = $(this).find('input[id=code]').val();
            var dataString = 'code=' + code;
            $.ajax({
                type: 'POST',
                url: 'addcart.php',
                data: dataString,
                cache: false,
                success: function (result) {
                    if(result == "success"){
                        alertify.success("המוצר נוסף לעגלה");
                        $("#plus").fadeIn(300).delay(1500).fadeOut(300);
                    }
                    else{
                        alertify.error("המוצר כבר קיים בעגלה");
                    }
                }
            });
            $("#cartreload1").load("product.php #cartreload1");
            $("#cartreload2").load("product.php #cartreload2");
            $("#cartreload1").load("product.php #cartreload1");
            $("#cartreload2").load("product.php #cartreload2");
        });
    }
</script>

How can I implement submit function inside click function?

P.S. I insist on keeping onclick function in html because its valuable for my php code.

Have you tried adding a "ajaxError " or "done" event to your post method when its inside the function and doesn't work. Does it show any errors? Or does the ajax post not trigger at all — Adin Sijamija
– Adin Sijamija, Commented Feb 9, 2020 at 11:29
@King23 No but my Ajax code works since before I have added it to click function it was working fine. I suspect that the submit function just doesn't run inside click function, maybe there is another approach to that. — Yotam Dahan
– Yotam Dahan, Commented Feb 9, 2020 at 11:32

Buszmen · Accepted Answer · 2020-02-09 11:31:54Z

1

If you look closely on .submit() docs you can see that the way you used it is for handling an event. But no event is being triggered. To send the actual event you have to either put data as a first argument and then callback .submit( [eventData ], handler ) or nothing at all .submit().

And now I am wondering what do you actually need to achieve here. If you just want to send AJAX and you can gather the data by yourself, you don't need to use submit event at all. Just remove $("#form" + id).submit(function(e) { and the closing and it should send AJAX on click.

Triggering submit event will result in form being sent ... the old fashion way. Meaning the page will actually go to the url in action attribute - which actually you don't have! You can inject data or hijack the whole submit process with jQuery handler, but I don't think it's what you want to do here.

answered Feb 9, 2020 at 11:31

Buszmen

2,50622 silver badges28 bronze badges

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

1 Comment

Yotam Dahan Over a year ago

You are right, at start I thought I must use submit function to get ajax values.

N'Bayramberdiyev · Accepted Answer · 2020-02-09 11:41:01Z

The event inside submit() method occurs when a form is submitted. The form is actually not submitting when you click your button (or link). And note that your button has multiple id attributes. There are several ways to implement it.

1. If your HTML and JS codes are in the same file:

Remove submit() method from addCart() function.

<form method="POST" class="<?php echo $row['code']; ?>" id="form<?php echo $row['id']; ?>">
    <a id="submit" class="product-links" href='javascript:addCart(<?php echo $row['id']; ?>);'>
       <i class="fa fa-shopping-cart"></i>
    </a>
</form>
<script>
    function addCart(id) {
        var code = $(this).find('input[id=code]').val();
        var dataString = 'code=' + code;
        $.ajax({
            type: 'POST',
            url: 'addcart.php',
            data: dataString,
            cache: false,
            success: function (result) {
                if(result == "success"){
                    alertify.success("המוצר נוסף לעגלה");
                    $("#plus").fadeIn(300).delay(1500).fadeOut(300);
                } else {
                    alertify.error("המוצר כבר קיים בעגלה");
                }
            }
        });
        $("#cartreload1").load("product.php #cartreload1");
        $("#cartreload2").load("product.php #cartreload2");
        $("#cartreload1").load("product.php #cartreload1");
        $("#cartreload2").load("product.php #cartreload2");

        return false;
    }
</script>

2. If your HTML and JS codes are in separate files:

Convert the a element into the button with type="submit" and use data attributes to get the id of the row.

HTML:

<form method="POST" class="<?php echo $row['code']; ?>" id="form<?php echo $row['id']; ?>">
    <button id="submit" class="product-links" type="submit" data-id="<?php echo $row['id']; ?>">
       <i class="fa fa-shopping-cart"></i>
    </button>
</form>

JS:

<script>
    $("#form" + id).submit(function(e) {
        e.preventDefault();
        var code = $(this).data('id');
        var dataString = 'code=' + code;
        $.ajax({
            type: 'POST',
            url: 'addcart.php',
            data: dataString,
            cache: false,
            success: function (result) {
                if(result == "success"){
                    alertify.success("המוצר נוסף לעגלה");
                    $("#plus").fadeIn(300).delay(1500).fadeOut(300);
                } else{
                    alertify.error("המוצר כבר קיים בעגלה");
                }
            }
        });
        $("#cartreload1").load("product.php #cartreload1");
        $("#cartreload2").load("product.php #cartreload2");
        $("#cartreload1").load("product.php #cartreload1");
        $("#cartreload2").load("product.php #cartreload2");
    });
</script>

Collectives™ on Stack Overflow

submit function inside click function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related