jquery submit 不提交表单

Question

我不想使用 input type="image" 或 input type="submit"。试图在单击时使用 img html 标记作为提交按钮。 img 标签上的 click 事件和表单上的 submit 事件有效，但未提交表单。有以下 HTML 代码

<form id="srch_id_form" name="srch_form" method="post" action="http://phbtxt.com.au:8080/cgi-bin/testpost.cgi" > 
    <img id="srch_id_submitform" src="update.png" />
</form>

在下面粘贴 jquery 代码。单击图像但未提交表单时，我收到警告框“表单正在提交”。

$("#srch_id_submitform").click(function(){
    $("#srch_id_form").submit();
});

$("#srch_id_form").submit(function(){
    alert('Form is submitting');
    return true;
});

Answer 1

jQuery 选择器和 DOM 元素的区别：jQuery 选择器是 DOM 元素集合的包装器。如果你在一个 jquery 选择器上调用一个函数，被调用的函数就是一个 jQuery 函数。如果您需要在 DOM 元素上调用函数，则必须访问 jQuery 集合内的 DOM 元素，并从中调用函数。为此，您使用get(index)，其中 index 是 jQuery 集合中元素的索引。如果你的 jQuery 选择器只有一个元素，.get(0) 就是 DOM 元素。

submit() 是两个截然不同的东西：

• 在jQuery中，它是一个事件，通常在提交表单时触发（即通常在提交表单时，会触发该事件，如果为它定义了处理程序，则可以执行某些操作）。如果你在 jQuery 中调用 .submit()，它会触发这个事件的所有处理程序......但它不会提交表单。
• 在DOM元素中，只存在于form元素，是提交表单的方法

不必触发submit()事件，只需调用表单DOM元素的submit()方法即可。

为此，不要使用 jQuery 选择器，而是使用 DOM 表单元素本身：

$("#srch_id_form").get(0).submit();

get() 从 jQuery 选择器返回 DOM 元素。

注意：当您将元素用作img 来触发操作时，建议向用户提供视觉线索。您可以使用 css cursor 样式执行此操作，并在 :hover 状态（伪类）属性中稍微更改样式。