同一页面上的多个表单AJAX

I'm having troubles on making this work. I need to have multiple forms on the same page... I've tried countless things, but nothing seem to work.

我在做这项工作时遇到了麻烦。我需要在同一页面上有多个表单...我尝试了无数的东西,但似乎没有任何工作。

What I'm trying to do here is identify every form (in some way) in order to submit that one instead of the FIRST form on the page. Code below, works but submits always the same form, the first one!

我在这里要做的是识别每个表单(以某种方式),以便在页面上提交那个表单而不是FIRST表单。下面的代码,工作但总是提交相同的形式,第一个!

Here's my current code

这是我目前的代码

JS:

$(document).ready(function(){

    $('.submit').on("click", function() {

        var artworkId = $("#inquirebox").data("artworkid");

        $.post("send.php";, $("#artinquire"+artworkId).serialize(), function(response) {
            $('#success').html(response);
        });

        return false;

    });

});

HTML:

<div id="inquirebox" data-artworkid="<?php echo 456;?>">
    <form action="" method="post" id="artinquire<?php echo 456;?>" data-artworkid="<?php echo 456;?>">
        <label for="name">Name:</label><br />
        <input type="text" name="name" id="name" /><br />

        <label for="email">Email:</label><br />
        <input type="text" name="email" id="email" /><br />

        <label for="message">Message:</label><br />
        <textarea name="message" id="message"></textarea><br />

        <input type="hidden" name="id" value="<?php echo 456;?>">
        <input type="hidden" name="artist" value="<?php echo $title1; ?>">
        <input type="hidden" name="url" value="<?php echo $uri1; ?>">
        <input type="hidden" name="artwork" value="<?php echo $artwork1; ?>">

        <input type="button" value="send" class="submit" id="submit" data-artworkid="<?php echo 456;?>">
        <div id="success"></div>
    </form>
</div>

1 个解决方案

#1

You're using the same ID on all the DIV wrappers around the forms.

您在表单周围的所有DIV包装器上使用相同的ID。

ID's must be unique, so you could use a class instead, but you really don't need any identifiers at all, nor do you need data attributes, the .submit button is inside the form, so all you need is this.form, or more jQuery'ish $(this).closest('form') to get the parent form

ID必须是唯一的,所以你可以使用一个类,但你根本不需要任何标识符,也不需要数据属性,.submit按钮在表单内部,所以你只需要this.form,或更多jQuery'ish $(this).closest('form')来获取父表单

$(document).ready(function(){

    $('.submit').on("click", function() {

        var form = $(this).closest('form');

        $.post("send.php", form.serialize(), function(response) {
            form.find('.success').html(response);
        });

        return false;

    });
});

You should however use a class on the #success element to find it based on the form.

但是,您应该在#success元素上使用一个类来根据表单查找它。

#1