使用 div 作为提交按钮

Posted 2023-03-05

【中文标题】使用 div 作为提交按钮

【英文标题】：Use a div as a submit button

【发布时间】：2011-11-19 18:22:42

【问题描述】：

我想在提交按钮中转换由图像 + 文本（用于翻译）组成的 div。有可能吗？

我设法将图片用作提交，但文字不是链接，它给整个图片+文字带来“破碎”的感觉

【问题讨论】：

仅使用 javascript...您在寻找非 javascript 方法吗？

【参考方案1】：

<div onclick="document.myform.submit()"></div>

【参考方案2】：

Jquery 用法。

$('div').click(function () 
    $('form').submit();
);

【参考方案3】：

你可以通过两种方式做到这一点。

您可以使用类型为 submit 的按钮并使用 CSS 将其样式设置为 div 在div上添加onClick，在click事件上提交表单。

对于方法 2，您可以通过 jQuery 或不通过普通 js 来实现

<script>
    function submitOnClick(formName)
        document.forms[formName].submit();
    
</script>
<form id="myForm" ...>
    ....
    <div onclick="submitOnClick('myForm')>
        ...
    </div>
    ...
</form>

Trevor 的回答展示了如何使用 jQuery。 在他的示例中，只需将 'div' 和 'form' 替换为您的 div 的 id 并形成如下形式：

如果div和form的id分别为myDiv和myForm指定为'#myDiv'和'#myForm'，这里#用来指定后面的字符串是一个元素的id。