Question posted in
You can find the official documentation here.

submit function inside click function – Jquery ajax

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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search