javascript - 点击函数内的提交函数

Question

我使用单击函数来获取单击表单的当前 ID，然后运行提交表单函数来应用我的代码。

但是一旦我单击运行该函数，代码就不适用，我尝试调试代码以找出导致此问题的原因，似乎单击函数可以正常工作，但提交函数却不能根本没有工作。

如果没有任何点击函数包装提交函数，则提交函数可以正常工作。

<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>

如何在点击函数中实现提交函数？

附注我坚持将 onclick 函数保留在 html 中，因为它对我的 php 代码很有值(value)。

Answer 1

里面的事件submit()方法在提交表单时发生。当您单击按钮(或链接)时，表单实际上并未提交。请注意，您的按钮有多个 id 属性。有多种实现方法。

<强>1。如果您的 HTML 和 JS 代码位于同一个文件中:

从 addCart() 函数中删除 submit() 方法。

<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。如果您的 HTML 和 JS 代码位于不同的文件中:

转换a元素进入 button与 type="submit" 并使用数据属性来获取该行的 id。

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>