SPA:我如何在没有提交按钮的情况下提交onChange事件的表格

Question

如何在不触发默认行为的情况下提交SPA中标记的onChange事件的表单(页面重载(。我发现，我可以使用.form元素从事件中访问表单。但是，如果我触发.form.submit()，则页面重新加载，尽管我已经声明了on:submit|preventDefault。

我准备了一个我的问题示例：https://svelte.dev/repl/894212c7c3d847dd961745f5e9d5750a?version=3.46.2

还有没有一种干净/正确/最佳实践的方法来解决这个问题，而不使用提交按钮？

提前感谢您的帮助！

Answer 1

使用FormData构造函数从表单中获取数据。然后使用Fetch、XMLHttpRequest或您喜欢的任何HTTP工具进行POST。

const myForm = document.getElementById('myForm');
const formData = new FormData(myForm);
const XHR = new XMLHttpRequest(),
XHR.addEventListener( 'load', function( event ) {
alert('DONE!');
} );
XHR.send( formData );

干净的方法是使用javascript或纯html表单的表单库。当他们点击提交时重新加载页面有什么问题？

Answer 2

使用onChange提交表单。不建议从onChange提交表单。

<script type="text/javascript"t>
function submit(event):
document.getElementById('meow').submit()
event.preventDefault() // put it at the end to prevent page reload
<script/> 
<form id="meow">
<input onChange="submit()" type="text" name="n" placeholder="enter your name"/><br/>
</form>