表单无法提交，单击提交按钮时没有任何反应。

Question

我的表单无法提交。

我的表单长这样：

<form id="courseform" name="courseform" class="fs-form fs-form-full" autocomplete="off" method="POST" action="{% url 'checkout' %}">
{% csrf_token %}
<input type="hidden" name="useremail" value="{{useremail}}">

<button id="fs-submit-button" class="fs-submit" type="submit">Continue to payment</button>
</form>

页面最后我有我的javascript代码：

$(".fs-submit").click(function(e) {
    $('#courseform').submit();
});

在我的基础项目urls.py文件中：

from users import views as user_views

urlpatterns = [

    path('checkout/', user_views.checkout, name='checkout'),

] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

点击按钮后，没有任何反应，控制台中没有JavaScript错误信息。

- Lawrence DeSouza

---

<button id-"fs-submit-button"="" class="fs-submit" type="submit"> 应该改为 <button id="fs-submit-button" class="fs-submit" type="submit">。我不知道是否还有其他问题。 - vqf

因为某些原因，那个被复制的不正确，已经修正了。我甚至尝试加入<a href>标签，但它也无法重定向到新的URL。 - Lawrence DeSouza

在使用jQuery时需要注意的一件重要事情是将所有与DOM相关的代码绑定在$(document).ready()内部。 - Rishi Raj

这可能是一个重要因素，即此表单是在提交另一个表单后打开的模板上进行的。我想知道Django是否会阻止第二个表单被提交。 - Lawrence DeSouza

在GitHub上创建一个可复现的项目。 - aaron

继续深入研究后，我发现在Django中有formsets，用于在同一页上有多个表单实例的情况下使用。这值得一试，因为两个表单都是从同一个URL视图调用的。 - Lawrence DeSouza

Answer 1

以下两种方法都可以正确实现此功能，两种方法几乎相同。除非您需要将其用于某些错误处理/验证等操作，否则您不再需要使用JQuery函数。

1. 在表单元素外部使用按钮。

<form id="courseform" name="courseform" class="fs-form fs-form-full" autocomplete="off" method="POST" action="{% url 'checkout' %}">
{% csrf_token %}
<input type="hidden" name="useremail" value="{{useremail}}">
</form>
<button id="fs-submit-button" value="Submit" form="courseform" class="fs-submit" type="submit">Continue to payment</button>

2. 使用<input>标签并设置type="submit"属性。

<form id="courseform" name="courseform" class="fs-form fs-form-full" autocomplete="off" method="POST" action="{% url 'checkout' %}">
{% csrf_token %}
<input type="hidden" name="useremail" value="{{useremail}}">

<input type="submit" value="Continue to Payment"/>
</form>

- Rishi Raj

---

我已经缩小了问题范围，发现是我正在使用的js脚本中的“Review and Submit”页面出了问题，该脚本可以在这里找到：https://tympanus.net/codrops/2014/07/30/fullscreen-form-interface/问题是，我无法在代码中找到那部分内容！ - Lawrence DeSouza

该死，最终这确实有所帮助。经过了两个该死的星期，它终于提交成功了。我不知道为什么需要JavaScript来提交表单，当它只是一个类型为submit的输入标签，但至少现在它可以工作了。 - Lawrence DeSouza

Answer 2

首先，我想确认一下。您是否使用ajax加载此表单？ 如果是的话，您可以尝试使用

$(document).on("click", ".fs-submit", function(e) {
    $('#courseform').submit();
});

因为

object.click(function(e){});

不能用于已经通过 AJAX 加载的表单。

- Vivan Eko

Answer 3

抱歉，伙计们，看起来这个问题没有简单的答案。不过我在其中一个JS文件中找到了以下内容：

$("form").on('submit', function (event) {
    event.preventDefault();
    return false;
});

然而，即使将其注释掉，表单仍然无法提交。在javascript中没有其他类似的函数或事件监听器，因此问题很可能是由Django核心中的某些内容引起的。

- Lawrence DeSouza

Answer 4

也许有些事件阻止了您的提交事件。 您可以检查一下监听您表单提交事件的内容。

var item = $('form');
for(var i=0; i < items.length;i++)
{
    var elem = items[i];
    var data = jQuery.hasData( elem ) && jQuery._data( elem );
    console.log(data.events);
}

结束检查，查看哪些提交事件正在监听您的控制台。

- EmreKalafat

Answer 5

针对Aspx Web表单

如果使用Ajax更新面板，且您的按钮点击事件在$(document).ready中，那么在部分回发后，按钮点击事件将停止触发。 您可以将代码移动到Sys.Application.add_load()中，以便在部分回发后继续正常工作。

  $(document).ready(function() {
    Sys.Application.add_load(){

     };      
    });

或者你可以检查哪个事件监听器被绑定到点击事件上 https://developers.google.com/web/updates/2015/05/get-and-debug-event-listeners

- Anurag.Desai