js submit不提交表单

在JavaScript中，如果你想阻止表单的默认提交行为，可以使用event.preventDefault()方法。这通常在你需要在表单提交前进行一些验证或者异步操作时非常有用。

以下是一个基础的示例，展示了如何在点击提交按钮时阻止表单提交，并通过Ajax发送数据到服务器：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Submit Example</title>
<script>
function handleSubmit(event) {
    // 阻止表单的默认提交行为
    event.preventDefault();

    // 获取表单数据
    const formData = new FormData(event.target);

    // 使用Fetch API发送数据到服务器
    fetch('/your-server-endpoint', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
        // 这里可以添加处理成功响应的代码
    })
    .catch((error) => {
        console.error('Error:', error);
        // 这里可以添加处理错误响应的代码
    });
}
</script>
</head>
<body>

<form onsubmit="handleSubmit(event)">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <br>
    <button type="submit">Submit</button>
</form>

</body>
</html>

在这个示例中，当用户点击提交按钮时，handleSubmit函数会被调用。这个函数首先调用event.preventDefault()来阻止表单的默认提交行为。然后，它使用FormData对象来获取表单中的数据，并通过Fetch API将这些数据异步发送到服务器。

这样做的好处包括：

用户体验：可以在不刷新页面的情况下提交表单，提供更流畅的用户体验。
数据验证：在提交前可以进行客户端或服务器端的数据验证。
异步操作：可以在提交表单的同时执行其他任务，如显示加载指示器或处理其他用户输入。

如果你遇到了表单提交的问题，可能的原因包括：

JavaScript错误：检查控制台是否有任何错误信息。
事件绑定问题：确保handleSubmit函数正确绑定到表单的onsubmit事件。
服务器端问题：如果服务器端没有正确处理请求，即使前端阻止了默认提交行为，数据也不会被正确处理。

解决这些问题通常涉及检查JavaScript代码、确保事件正确绑定、以及验证服务器端的处理逻辑。

页面内容是否对你有帮助？

有帮助

没帮助

当您禁用javascript时，表单为什么仍要提交？

、

即使您完全禁用了javascript，表单仍然会提交。我以为它需要javascript才能起作用..。onClick()或onSubmit()函数触发GET/POST请求。

浏览 2提问于2014-04-05得票数 3

回答已采纳

2回答

如何设置和删除默认输入单击我的页面

、、

那就是在我的页面上有一个保存按钮，那就是提交按钮。当我点击进入它的所有点击保存按钮。即使我在做别的事情。有没有人可以告诉我如何从我的页面中删除这个默认的输入单击。

浏览 0提问于2011-05-02得票数 2

回答已采纳

2回答

如何从验证脚本PHP/ jQuery的action=“第三方位置”执行

、、、

此表单有一个action属性，用于将表单数据发送到epay。问题是，我需要先验证这个表单数据，然后才能将其发送到支付宝。有没有什么方法可以让我从验证脚本执行表单操作？表单id用于捕获使用jQuery提交的表单，并开始验证数据。

浏览 0提问于2014-10-25得票数 0

3回答

页面在使用AJAX时保持刷新。

、、

我正在创建一个包含表单的模态框。表单将返回使用ajax和php提交的输入，然后模式框将消失。问题是，结果显示了几秒钟之后，方框就消失了，页面会刷新。Symptoms</h2></header> <form class="js-ajax-php-json"

浏览 2提问于2014-11-02得票数 0

回答已采纳

2回答

parseInt(x,10)导致最大调用堆栈/过多的递归错误

、、

我有一个简单的JS函数，它基于2个输入值更新一个隐藏的文本框。 $("#payment-form").on("submit",function (e) { $("#cents").val("00");

浏览 2提问于2016-03-23得票数 1

回答已采纳

3回答

基于文字的游戏代码不起作用？

、、

title>game</title></style><body> room = "Main Enterence" $("#mainForm&q

浏览 5提问于2017-11-14得票数 1

回答已采纳

2回答

停止提交表单的Javascript

、

如果Javascript被关闭，是否有可能阻止表单被提交？我知道你可以做隐藏表演的事。但是，如果Javascript被关闭，是否有可能确保表单无法提交？

浏览 9提问于2017-02-16得票数 0

回答已采纳

3回答

HTML表单所需的命令不起作用？

、、、

我正在尝试让我的表单要求在提交表单之前填写某些字段。，发现命令应该是这个简单的命令但是由于某些原因，在我的表单上，即使指定的字段没有填写，它也会提交它。我甚至尝试在Dreamweaver中用一个新的表单创建一个全新的文件，只有一个必需的输入项和

浏览 3提问于2013-09-05得票数 0

2回答

Listengin格式提交- Javascript

、、、

每当用户提交表单时，我都会收听该表单。我有两种方式提交我的表格。单击提交的表单提交表单 <

浏览 0提问于2020-07-03得票数 1

回答已采纳

2回答

停止从javascript提交表单

、、

我已经为问题准备了这个演示<form action=test id=form></form> <but

浏览 1提问于2015-02-22得票数 1

回答已采纳

1回答

使用selenium WebDriver在网页中执行javascript

、、、、

false"; document.forms[0].submit(); }如果我尝试手动提交表单，它将无法正确加载。JavascriptExecutor js = (JavascriptExecutor)driver; js.executeScript("document.getEle

浏览 1提问于2015-06-18得票数 0

回答已采纳

2回答

为什么我的表单可以在除IE7之外的所有浏览器中提交？

、、

我有一个表单，可以在除IE7以外的所有浏览器中提交。在IE7中，当单击submit时，浏览器显示一个空白页面，地址栏更改为处理和提交表单的PHP文件的地址。下面是表单：您可以在IE7中将表单留空，只需单击submit，您将看到它加载了一个空白的白色页面。在其他浏览器中，当表单为空时，它会指出必填字段，当表单填写完毕后，它会提交。下面是处理表单的"schedule_cla

浏览 1提问于2013-01-09得票数 0

回答已采纳

4回答

使用Javascript和PHP验证表单时遇到的问题

、、、

好的，在用PHP验证表单之前，我想先用Javascript验证它。如果Javascript函数，让我们称它为validate()，检测到一个错误，我想阻止PHP被执行。我所知道的只有一种方法可以使我做到这一点:使用链接而不是提交按钮，如下所示：这可能是validate()函数：//Do all the validation document.form_na

浏览 12提问于2011-07-13得票数 3

回答已采纳

3回答

使用JavaScript访问分配给单击的提交按钮的值

、、

当HTML表单中有几个提交按钮时，如下所示：<button type="submit" name="submit_button", value="b2"></button>

浏览 3提问于2015-11-13得票数 1

5回答

单击submit按钮时忽略onSubmit

、、

我有一个指定了onSubmit="validate()"的表单，但是如果单击了submit按钮，我想忽略验证。有没有一种很好的跨浏览器的方法来检测提交按钮是否被点击，从而忽略验证？

浏览 8提问于2010-03-09得票数 2

回答已采纳

2回答

提交按钮提交错误的表单

、

/p> <p><label></label><button id="patients" style="margin-top:17px;" name="patients" type="submitlabel></label><button id="physicians" name="physicians" style="margin-top:

浏览 9提问于2014-11-12得票数 3

回答已采纳

4回答

jQuery验证两次提交表单

、、

由于某种原因，我的表单被提交了两次，这会导致错误。someNameSpace.myValidateFunction(); $('#myForm').submit();你知道为什么这份表格要提交两次吗？表单按钮不是输入提交，而是<button>元素(在本例中需要)。

浏览 5提问于2014-05-16得票数 4

回答已采纳

6回答

Window.location.href有时不工作的原因是什么？

、、、

jsp页面，用于提交按钮，点击javascript中的函数。当我第一次点击按钮时，没有重定向到CallService.jsp。我点击了两到三次按钮之后，只有该页面将被重定向。name="uname" id="uname"> <br> <input type="submit" va

浏览 10提问于2013-10-24得票数 0

回答已采纳

2回答

下面的提交绕过javascript验证。是因为点按一下还是我漏掉了什么？谢谢<form name="myprofile" action="do_update" method="post" onsubmit="return validate_submission(this.name<input type="text" id="text_fullname" name="text_fullname" value=&q

浏览 0提问于2012-12-04得票数 0

回答已采纳

3回答