提交动态添加的表单

Question

我为每个产品创建了一个带有隐藏输入的表单作为添加到收藏夹按钮，但是当我单击该按钮时，第一个产品被添加到心愿单，而不是被点击的。

<form method="POST" class="fav-form"action="favourites-add.php">
   <input type="hidden" id="product_id" name="product_id" value="<? print $fch[id]; ?>">
   <input type="hidden" id="owner_id" name="owner_id" value="<? print $fch[owner_id]; ?>">
   <input type="hidden" id="client_id" name="client_id" value="<? print $_SESSION["owner_id"]; ?>">
   <input type="hidden" id="p_name" name="p_name" value="<? print $fch[p_name]; ?>">
   <input type="hidden" id="price" name="price" value="<? print $fch[price]; ?>">
   <input type="hidden" id="details" name="details" value="<? print $fch[details]; ?>">
   <input type="hidden" id="region" name="details" value="<? print $fch[region]; ?>">
   <input type="hidden" id="photo" name="photo" value="<? print $fch[photo]; ?>">
   <input type="hidden" id="photo2" name="photo2" value="<? print $fch[photo2]; ?>">
   <input type="hidden" id="photo3"  name="photo3" value="<? print $fch[photo3]; ?>">
   <button id="add" class="add-favourites" onclick="SubmitFormData();" type="button"><li class="far fa-star"></li></button>
</form>

function SubmitFormData() {
    var product_id = $("#product_id").val();
    var owner_id = $("#owner_id").val();
    var client_id = $("#client_id").val();
    var p_name = $("#p_name").val();
    var price = $("#price").val();
    var details = $("#details").val();
    var region = $("#region").val();
    var photo = $("#photo").val();
    var photo2 = $("#photo2").val();
    var photo3 = $("#photo3").val();

    $.post("favourites-add.php", {id:id, product_id: product_id, owner_id: owner_id, client_id: client_id, p_name: p_name,price: price,details: details, region: region, photo: photo, photo2: photo2, photo3: photo3, },
    function(data) {
        $('#fav').show();
    });
}

Answer 1

ID必须是唯一的

如果您有多个相同的表单，则仍然无法在它们之间回收id个属性。它们必须是独一无二的。

内在事件属性非常糟糕且没有帮助。

停止使用<button id="add" class="add-favourites" onclick="SubmitFormData();" type="button"><li class="far fa-star"></li></button>。

请改用提交按钮。

• 没有onclick属性。
• type="submit"

绑定JavaScript：

jQuery("form").on("submit", submitFormData);

（请注意，JS中的惯例是只有当它们是构造函数时才用大写字母开始函数名称，所以不要在这里为你的函数执行此操作）。

不要定期提交和Ajax

由于您现在在表单提交时触发JS，因此您需要明确停止正常的表单提交。

function submitFormData(event) {
    event.preventDefault();
}

注意您正在处理的表格

这就是我们改用这种方法的原因：

function submitFormData(event) {
    event.preventDefault();
    var form = this;
}

从该表单中获取数据

现在，您可以为每个值使用jQuery(form).find("[name='fieldName']).val() ...但jQuery提供了一种更简单的方法。

function submitFormData(event) {
    event.preventDefault();
    var form = this;
    var data = jQuery(form).serialize();
}

然后提交该数据

function submitFormData(event) {
    event.preventDefault();
    var form = this;
    var data = jQuery(form).serialize();
    $.post("favourites-add.php", data);
}