Question

在我的页面上，我不会使用PHP发送电子邮件（请不要发表评论），然后使用外部服务来解决此问题，该服务由fetch调用。这就是为什么我使用onclick函数提交表单数据的原因；并且此onclick已绑定到按钮。实际上，这个onclick不使用表单功能，只是通过ID来获取表单数据。

该按钮位于表单外部。不用说，在那种情况下，我不能从必需和模式验证之类的典型表单功能中受益。

是否有一种简单的方法来使按钮通过onclick发送数据并触发表单验证？通过表单验证，我的意思是通常的内部HTML 验证。当然，我可以在onclick函数体中进行验证，但这不是我想要的-我想使用表单的功能。

Answer 1

您将需要将提交按钮放回表单，以便可以利用所有这些内置功能，然后在表单上使用submit事件，然后然后利用fetch, URLSearchParams和FormData的优势，如下所示：

// HTML

<form id="form">
    <!-- inputs go here... -->
    <button type="submit">Submit</button>
</form>

// JavaScript

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {

    // prevents default submission so we can do our magic
    e.preventDefault();

    // build request
    const formData = new FormData(form);

    fetch('some/endpoint', {
        method: 'post',
        body: new URLSearchParams(formData),
    });

    // do something else...

});

这些都是现代最佳实践，但是兼容性不好。您可能需要查看XMLHttpRequest而不是fetch，甚至要遍历表单元素而不是使用FormData，但这应该使您朝着正确的方向前进。

是否可以使用form（validation）的功能，而是使用onclick发送数据？

1 个答案: