Question

我希望我的表单中的span具有与input type="submit"相同的“提交”行为。

请注意我不能使用 AJAX ，因为第三方提供商不支持 AJAX 提交，因此存在input type="submit"

大多数搜索都使用submit()方法返回，但这不起作用？

HTML

<form method="post" action="http://www.google.com">
    <input type="text" placeholder="Name">
    <span class="submit-span">Span submit</span>
    <input type="submit">
</form>

的jQuery

$(document).ready(function(){
    var spanSubmit = $('.submit-span');

    spanSubmit.on('click', function() {
        $(this).submit();
    });
});

Answer 1

您的jQuery代码中的$(this)不是指表单，而是<span>元素本身。因此，您可以使用DOM横向来搜索/搜索父<form>元素：

$(document).ready(function(){
    var spanSubmit = $('.submit-span');

    spanSubmit.on('click', function() {
        $(this).closest('form').submit();
        // Will also work, but might fail if nesting is changed:
        // $(this).parent().submit();
    });
});

这是一个proof-of-concept fiddle，我在其中使用警报来侦听提交事件，以验证表单提交确实已被调用:)

Answer 2

为什么不在点击处理程序中提交表单元素？

    $(document).ready(function(){
    var spanSubmit = $('.submit-span');

    spanSubmit.on('click', function() {
        $(this).closest('form').submit();
    });
});

Answer 3

在这里，你要调用跨度上的提交事件（没有这样的事件。

spanSubmit.on('click', function() {
  $(this).submit();
});

您需要在表单上调用此事件：

spanSubmit.on('click', function() {
  $(this).closest('form').submit();
});

Answer 4

您应该在submit元素上触发原生JavaScript form事件：

$(document).ready(function(){
    var spanSubmit = $('.submit-span');

    spanSubmit.on('click', function() {
        $(this).closest('form')[0].submit();
    });
});

jQuery |提交带有跨度的表格

4 个答案: