确定从onsubmit中提交表单的元素
在HTML中，onsubmit事件可以在表单提交时触发。当用户点击表单中的提交按钮或按Enter键时，onsubmit事件会被触发。要确定从onsubmit中提交表单的元素，您可以使用JavaScript代码来获取表单元素，并在onsubmit事件中执行相应的操作。
以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head><script>
function handleSubmit(event) {
event.preventDefault(); // 阻止表单的默认提交行为
const form = event.target;
const formData = new FormData(form);
const submitElement = formData.get("submitElement");
console.log("提交的元素是：", submitElement);
}
</script>
</head>
<body>
<form onsubmit="handleSubmit(event)">
<input type="text" name="input1" value="input1">
<input type="text" name="input2" value="input2">
<button type="submit" name="submitElement" value="button1">提交按钮1</button>
<button type="submit" name="submitElement" value="button2">提交按钮2</button>
</form>
</body>
</html>在这个示例中，我们创建了一个包含两个文本输入框和两个提交按钮的表单。当用户点击其中一个提交按钮时，handleSubmit函数会被触发。在函数中，我们首先阻止了表单的默认提交行为，然后使用FormData对象获取表单数据。通过调用formData.get("submitElement")，我们可以获取到用户点击的提交按钮的值。最后，我们将提交的元素打印到控制台上。
相关·内容
5回答
是否有方法从onsubmit处理程序中确定提交表单的元素？试图编写一个知道单击了哪个元素的通用处理程序。例如，考虑到这一表格： <input type="submit" name="submit1" />
<input
浏览 5提问于2009-02-12得票数 11
name="login" method="post" action=""> </form></html>
是否可以在输入元素类型butto
浏览 1提问于2013-03-14得票数 1
回答已采纳
我正在开发一个安卓应用程序，它使用指向基于jQueryMobile的站点的WebView。通常，禁用软键盘上的“Go”按钮就像在控件的XML标记中添加android:imeOptions="actionDone"一样简单。然而，在WebViews的情况下，这并没有起到作用。我怎样才能禁止'Go‘按钮自动提交表单，或者简单地用'Done’按钮来代替它，就像android:imeOptions="actio
浏览 5提问于2011-03-10得票数 6
回答已采纳
我使用zend_form和zend_form_element_submit创建了一个带有提交按钮的表单。单击submit后，代码将根据输入执行数据操作。如果没有键入任何输入，则不会发生任何事情。当我点击submit按钮时，即使没有变化，它也会重新加载我的网页。有什么办法可以防止页面加载吗？我可以使用触发事件的zend_form_element_button吗？我该如何捕捉它呢？
浏览 0提问于2012-03-03得票数 2
回答已采纳
提交
按一下按钮？email="+em1,true); }
这只适用于一个按钮点击，我无法让它工作提交和不知道为什么。
浏览 0提问于2011-11-08得票数 0
回答已采纳
所以，当我使用JS并尝试提交输入时，我尝试了一些事情，有些奇怪的事情我不理解逻辑。
在<form>标记的内部和外部存在着<input tpye="submit/>的区别。如果它在表单标记中，我需要使用preventDefault()函数，但是如果它是外部表单标记，如果编写简单的js普通代码，我就不需要这样做。为什么？，，onsubmit和onclick有什么区别？如果我使用preventDe
浏览 3提问于2019-12-05得票数 0
回答已采纳
我有这个JSP，找最后一行有主要问题的部分。addtopic.html" var="linkPost"/> method="post" onsubmit="return validate();">
最后一行有一个return validate()如果我保持它的方式，我的
浏览 2提问于2011-12-08得票数 1
回答已采纳
为什么这个表单要发送两次数据？另外，第二次，数据是“未定义的”。+username);});Hi, Sho在过去的一天里，我都被困在这个地方了。
浏览 1提问于2015-01-17得票数 1
回答已采纳
在我的表单中，我只有一个没有按钮的字段： privatereturn new HladaneSlova().iterator(); }.add(new AjaxFormSubmitBehavior(this, "onsubmitprivate static final
浏览 1提问于2012-07-04得票数 0
回答已采纳
我在Google中的一个功能有问题，但在Mozilla中却很糟糕：<script type="text/javascript"> ...
...我已经尝试
浏览 7提问于2014-09-08得票数 0
回答已采纳
我在react中有一个简单的输入，它不适用于onSubmit，但适用于onClick。为什么会这样呢？下面是一个示例的。 alert("Hi")const App = () => ( <input type='submit' value='click' onSubmit
浏览 33提问于2018-02-13得票数 2
回答已采纳
我在表单中添加了一个onsubmit处理程序，如下所示： alert(source); });
所以e.target =表单元素。我使用了几个提交按钮，并且需要确定<
浏览 0提问于2010-01-06得票数 1
回答已采纳
我是来自意大利的安德鲁，我正在尝试修改我在网上找到的脚本。它是一个创建HTML表单并在电子表格中上传答案的脚本。这是我开始学习的教程：var dropBoxId = "XXXXXXXXXXXXXXXX"; // Drive ID of 'dropbox' folder谢谢！！安德里亚新HTML代码：
<f
浏览 1提问于2015-05-24得票数 1
回答已采纳
首先，我不确定这是谷歌应用程序脚本还是iOS邮件应用程序的问题。我花了一段时间试图找到任何关于iOS邮件应用程序转换嵌入式html表单方法的东西，但什么也找不到。我嵌入了一个简单的HTML表单，并通过电子邮件发送它与谷歌应用脚本。我使用post作为表单的方法，并且在我要回发的脚本中设置了一个doPost函数。这几个月来一直运行得很好，但我昨天收到我的一个用户的消息说，由于某种原因，
浏览 5提问于2014-07-16得票数 0
我是web编程的新手，在表单按钮单击时调用JavaScript函数时遇到问题。它不会调用函数并执行alert()，而是重新加载页面，并重置输入到文本框中的数据。我确信这是一个简单的错误，但我在找出这个错误时遇到了麻烦。这是我的HTML表单按钮的代码
<input type="button" name="submitbutton" id="submitbutton" onclick=&qu
浏览 0提问于2010-11-02得票数 0
回答已采纳
2回答
我有一个这样的表单： <h2>Login</h2> <div class="form-groupspinner-border-sm mr-1"></span> </button>
</div
浏览 23提问于2020-06-15得票数 0
以下问题：这可以很好地工作。但在Safari中，我可以在焦点位于登录表单内时按Enter键。这将发送没有主表单的登录表单，因此我得到一个错误(它将我重定向到提交时请求的json的普通视图)。
浏览 3提问于2009-12-15得票数 14
回答已采纳
我显然不明白这是什么非常基本的问题，我希望有人能澄清这件事。<input type="submit" value="Search"/>给了我，但是如果我将/tagged更改为/search ( tumblr搜索表单的默认状态)，它实际上做了正确的事情，并给出了效果的url。所有这一切仅仅是因为tumblrs的搜索实际上是失败的
浏览 2提问于2011-10-01得票数 1
回答已采纳
4回答
onsubmit="validateForm()"><p id="loginMessage">Please Login!unsuccessful, please check your username and password"); }我已经在Javascript上创建了一个小的登录表单，我想让它在用户名和密码正确的情况下导航到Content.h
浏览 7提问于2014-10-26得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
