确定从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处理程序中确定提交表单的元素？试图编写一个知道单击了哪个元素的通用处理程序。例如，考虑到这一表格：
<form onsubmit="onSubmitHandler">
<input type="submit" name="submit1" />
<input type="submit" name="submit2" />
</form>
如何确定在onSubmitHandler中单击了哪个提交按钮？我尝试了Event.Tar
浏览 5提问于2009-02-12得票数 11
1回答
我从设计师那里收到了表单标签。
我需要从下面给出的GWT提交表单。
FormPanel form = null;
Button submit = null;
function onModuleLoad(){
form = FormPanel.wrap(DOM.getElementById("MyForm"));
form.setEncoding(FormPanel.ENCODING_MULTIPART);
submit = Button.wrap(DOM.getElementById("OK"));
submit.addClickHandler
浏览 3提问于2010-04-08得票数 0
在我的表单中，我只有一个没有按钮的字段：
add(new AutoCompleteTextField<String>("hladaneSlovo", settings) {
private static final long serialVersionUID = 1L;
@Override
protected Iterator<String> getChoices(String input) {
return new HladaneSlova().i
浏览 1提问于2012-07-04得票数 0
回答已采纳
我对extjs有一些奇怪的问题。我有一个表单和一个网格，每一个单独工作很好，但是当我把网格放在表单中时，一切都开始变得支离破碎。
我对doig的观点是，可以从网格的行提交ids，同时从表单中提交内容。为此，我将standardSubmit设置为false，并在表单的onSubmit属性中添加了一个javascript方法。
然而，当我以这种方式提交表单时，我得到了一个奇怪的错误：
Uncaught SynthaxError: Unexpected token <
但是表单值是提交的，并且在请求的头中可见。当然，当我将标准提交设置为true时，错误就消失了，但是网格中的值不再被提交了……
浏览 3提问于2011-09-27得票数 0
这是提交按钮：
<h:commandButton
actionListener="#{regBean.findReg}"
action="#{regBean.navigate}" value="Search" />
这是表单：
<h:form onsubmit="this.disabled=true;busyProcess();return true;">
如果按下submit按钮，页面将显示“忙”图标，直到请求被处理。问题是，表单永远不会提交，请求永远不会到达后端。但是，如果我像这样删
浏览 0提问于2010-05-18得票数 3
回答已采纳
我正在编写一个javascript对象，其中包含一个返回标准表单的html的方法。在这个对象中，我还有一个validate()方法；我希望生成的表单使用validate()；
因此，带有验证的表单的典型html可能如下所示：
<form id="a" onSubmit="return validate();">
问题是我需要能够引用对象实例，所以它需要更像onSubmit="my_object.validate();">
我尝试过像return '<form id="a" onSubmit="
浏览 0提问于2009-07-11得票数 0
如果我有一个没有按钮的表单，我想测试onsubmit函数是否返回true，然后提交它。这是我当前的代码，它工作得很好。
var form = document.getElementById('form');
var evt = document.createEvent('Event');
evt.initEvent('submit', true, true);
if(form.dispatchEvent(evt))
{
form.submit();
}
难道不能让dispatchEvent也提交表单吗？
浏览 1提问于2011-08-24得票数 9
回答已采纳
我正在尝试让一个表单内部的材料UI对话框组件工作。如果我将Dialog包装在form标记中，它们甚至不会出现在结果html中(还不知道为什么)……
<form onSubmit={someFunction}>
<Dialog>
...
</Dialog>
</form>
如果我反转它并将表单标记放在对话框中，表单元素将显示在生成的html中，但是设置为type="submit“的操作按钮将不会触发表单的onSubmit。
<Dialog>
<form onSubmit={someFunction}&g
浏览 3提问于2016-03-28得票数 4
1回答
我在试图覆盖表单元素的onsubmit事件时遇到了困难。我没有问题用addEventListener添加一个侦听器，但是对于我的特殊情况，我需要用替换-- onsubmit --但是由于某种原因，当我这样做时，它会给出以下错误：
Error: Component is not available = NS_ERROR_NOT_AVAILABLE
我的代码很简单：
gBrowser.contentDocument.getElementById("theform").onsubmit = function() {
return false;
};
本质上，我想阻止表单提交，但
浏览 0提问于2011-09-26得票数 2
回答已采纳
1回答
这里的表单对象是什么元素，我也可以附加一个submit/onsubmit eventHandler？我正在做一个铬的扩展，以修改一个网站，所以我没有完全访问直接网站代码外的检查元素。
<div class="search-inner" role="form">
我假设这是突出显示的一个，我正在使用这段代码尝试从eventListener中获取一个反应，但它似乎没有激活。
const form = document.getElementsByClassName("search-inner");
if(form != null &
浏览 8提问于2022-08-11得票数 0
在VanilaJs中，我们在onSubmit期间使用FormData make request从表单中获取数据。在ReactJ documentation中，我们看到在提交之前，我们建议提交数据，这引入了user.After onClick on submit按钮，我们从状态中获取这些数据并提出请求。那么，使用React处理表单是最好的方法吗？
浏览 9提问于2019-01-16得票数 2
回答已采纳
我在表单中只有一个按钮，所以问题不是“如果有多个按钮，这些类型应该是按钮(type="button")”。
但我无法提交表单，而是在控制台上出现以下错误：“由于表单没有连接，表单提交被取消”。
以下是表单代码：
return (
<Form onSubmit={handleSubmit(onSubmit)}>
<Row>
<Col>
<Button className={`text-nowrap m-auto mt-4 ${mutation.isLoading ?
浏览 7提问于2022-07-12得票数 0
我一直在寻找这个问题的答案已经有一段时间了，没有运气。对你们中的一些人来说，这可能是一个容易回答的问题。
在这个标签中：
<form method="post" action="" class="jcart" id="somethinghere" onsubmit="return validate(this)">
'this‘关键字代表什么？
例如，如果我想从另一个javascript函数中调用此表单上的‘wanted’函数，我将如何做？
我知道是这样的：
<script type=
浏览 1提问于2012-08-18得票数 2
回答已采纳
3回答
我有一个外部表单，一旦提交遗嘱，发送用户到下一步。内部表单是为嵌套在外部窗体中的表提交搜索请求。目前，我的解决方案不是触发这两种形式中的任何一种。
<form id="outerForm" onsubmit="submitOuter()">
<form id="innerForm" onsubmit="submitInner()">
<button type="submit" form="innerForm">Search</butt
浏览 5提问于2015-09-23得票数 1
回答已采纳
1回答
我正在制作一个网站在十月CMS。
我创建了一个组件，比如Component_1 & Component_2
现在，我想通过AJAX数据属性Component_1通过表单将数据从Component_2发送到Component_2。
所以，在我的component_1中，我有一个表单：
<form method="POST" data-request="Component_2::onSubmit" data-request-flash>
在Component_2中，我有方法onSubmit(){ //Nothing在这里}
当我提交表单时，我会得
浏览 3提问于2018-01-22得票数 0
回答已采纳
我的页面被编码成这样，我所拥有的一切都是在一个表单中。 <form onsubmit='return validate()' action='#' method='post'>
<button class='accordian'>Drop Stuff1</button>
<div class='panel'>
//stuff here
</div>
<div>
浏览 45提问于2018-07-16得票数 1
回答已采纳
我正试图处理提交一份表格的反应。表单有两个按钮，传统上使用formaction将表单发送到两个不同的位置。如何获得按钮的formaction，表单是在onSubmit函数中提交的？
onSubmit = (e) => {
e.preventDefault();
if (formaction === 'download') {
...
} else if (formaction === 'stop') {
...
}
}
render() {
return (
&
浏览 5提问于2020-09-15得票数 0
回答已采纳
4回答
我想要创建一个表单，其中提交按钮位于头部。我目前使用的是Reacti-钩子表单，但是很难从布局中的组件提交表单，显示表单(或子表单)。我已经包括了一个图像，可能有助于形象化我所说的。
是否有一种方法可以将表单数据或handleSubmit从Reacti-钩子表单传递到当单击onSubmit时将运行onSubmit的标头？
浏览 6提问于2022-01-27得票数 5
2回答
通过ajax函数调用验证
、、、
我有两段javascript，我想一起工作。我有一个通过ajax提交的表单和一个表单验证脚本，如果验证失败，我想一起防止ajax表单提交。
下面是ajax表单提交脚本：
<script type="text/javascript">
$(document).ready(function(){$(".sendName").click(function(){
var jsuser=$("#jsuser").val();
var jemail=$("#jemail").val();
var jusid=$("#jus
浏览 0提问于2012-05-19得票数 0
回答已采纳
当我点击“提交”按钮时，表单没有被提交。为什么？
我直接从Google的示例代码中获得了它，我只添加了一行：
document.getElementById("myform").submit()；
将显示“谢谢”消息。
如果我点击“提交而不验证”按钮，表单就会被提交。
<html>
<head>
<script>
function onSubmit(token) {
alert('thanks ' + document.getElementById('name').value);
浏览 0提问于2020-08-26得票数 0
我有一些使用JS提交表单的html：
<form onsubmit="doform();return false;">
在测试脚本中，我根据在SO和WWW::Selenium文档中找到的内容执行以下操作。
$sel->get_eval("this.browserbot.getUserWindow().doform()");
普通表单提交运行良好，但在selenium代码中不起作用。
如果我从JS文件中取出js并在测试文件中生成一个字符串，它就能正常工作。
my $js = "{ //do some javascript stuff he
浏览 0提问于2012-03-14得票数 0
回答已采纳
在问了几个问题之后，我设法创建了这个表单。如果提交的值是0，我可以毫不费力地让它返回false，但当它是字符串'Cambia ciudad‘时，我不能让它返回false。我确信我弄乱了引号或类似的东西。以下是表单：
<form role="search" method="get" action="http://chusmix.com/" onsubmit="if (document.getElementById('s')== 'Cambiá de ciudad") return false;&
浏览 0提问于2010-12-28得票数 1
回答已采纳
我希望能够在提交表格<Textfield>时访问我的表格<Form>的孩子们。在每个子钩子对象中，我还想触发一个特定的函数(例如，validate_field)。不确定这在钩子中是否可行？我不想使用ref/useRef，forwardRef对我来说是一个模糊的概念(如果这有任何帮助的话)。
我的场景是表单已经提交，而用户没有触摸/更新任何文本字段，所以还没有收集错误。在表单提交时，我希望每个孩子根据特定的约束来验证自己。
我也试过看useImperativeHandle，但是看起来这在props.children上是行不通的吗？
更新的工作代码在：中
submit_fo
浏览 4提问于2021-12-14得票数 1
回答已采纳
我有一个基本的表格，我正在用来注册会员。我使用form onsubmit事件根据表单的一些字段填充隐藏的表单字段。它工作得很好，但是如果javascript没有启用，我想阻止表单提交。这将确保在客户机上正确填充隐藏字段。
我意识到在不启用javascript的情况下支持注册可能是最好的做法，但我希望使用现有的解决方案运行
<form id='member_form' method="post" action="http://www.mysite.com/" onsubmit="build_username();" >
浏览 0提问于2010-03-10得票数 5
回答已采纳
我在7中的事件中遇到了麻烦。
当我有一个具有两个或多个 input[type=text]并按enter的表单时，事件按以下顺序发生：
(onClick)form (onSubmit) 提交按钮
样本代码：
<form onSubmit="{alert('form::onSubmit'); return false;}">
<input type="text">
<input type="text">
<input type="submit" onCl
浏览 5提问于2008-08-12得票数 9
2回答
我有几个表单，看起来像这样：
<form id=myForm onsubmit="saveFormData(this);return false">
....
</form>
提交后，将执行自定义函数并取消默认操作(通过http发送数据)。
但是现在我需要验证表单，如果验证成功，则触发自定义函数(本例中为saveFormData，但其他表单可能有所不同)，否则什么也不做。
因此，最终的事件处理程序应该是这样工作的：
$('#myForm').submit(function(){
if(formValidatesOk(this))
浏览 0提问于2012-12-20得票数 3
回答已采纳
在onSubmit中设置表单错误很容易
throw new SubmissionError({ _error: 'My form error message.' });
但是如何删除此错误？在重新提交时不会删除它，在更改字段值时也不会删除它。
我是否可以以某种方式手动删除消息，例如在重新提交表单时或超时后从onSubmit中删除？
浏览 2提问于2017-02-17得票数 0
我想运行ajax来获取一个值，如果值是真，那么提交表单，下面的代码使用onsubmit=xxx，但是这个表单会立即提交，而不是等待ajax结果。然后我想使用带有onclick函数的"a“标签来提交表单，这样可以完成工作，但是当我使用"enter”键提交表单时，将不会运行ajax代码。然后，当光标在输入字段中提交表单时，我希望绑定keypress。如何检查光标是否在窗体字段中或不在窗体字段中？
<?php
if(isset($_POST['act'])){
$rs=array(
'status'
浏览 7提问于2013-11-04得票数 0
回答已采纳
我的问题是当我点击按钮，表单提交的很好，但是内联的onsubmit事件没有被调用，所以确认警报永远不会被打印出来。
我的代码：
<!-- Delete button -->
<a onclick="document.getElementById('delete-form-`+ data.id +`').submit();" class="icon">
<i class="mdi mdi-delete"></i>
</a>
<!-- Hidden form
浏览 3提问于2017-08-21得票数 0
我有一份表格如下：
<form action="/action_page.php" onsubmit="alert('The form was submitted');" >
Enter name: <input type="text" name="fname">
<input type="button" onclick="document.getElementsByTagName('form')[0].submit()" val
浏览 5提问于2017-08-13得票数 3
回答已采纳
我在表单上有一些客户端JavaScript验证。它工作得很好。但是我想适应那些禁用了JavaScript的用户。我的验证不是从表单的onsubmit属性运行的，它是一个绑定到表单中普通按钮的事件处理程序。因此，启动验证和提交的按钮实际上并不是一个提交按钮，它只是一个按钮“type=”：
<input type="button" value="Ok" class="okbtn">
然后，我将一个事件处理程序注册到它的click事件，它执行我的验证。如果一切都通过了，它就会提交：
function clickHandler(event){
浏览 5提问于2010-01-24得票数 5
回答已采纳
我在python上的第二天，试着学习网络抓取。
我在网页中有一个表单，我正试图从其中删除数据
<form name="search" method="POST" action="index.php" onSubmit="return Search();">
url自动帮助填写搜索参数，但由于表单使用onSubmit()，我不知道如何使用python提交它。以前，我只是使用urllib.request来完成所有的工作。
浏览 2提问于2016-03-20得票数 1
我想知道表单提交事件和按钮单击事件来执行http post操作有什么不同。
表格提交示例：
<form #f="ngForm" (ngSubmit)="onSubmit(f)">
<input name="first" ngModel required #first="ngModel">
<input name="last" ngModel>
<button>Submit</button>
</form>
按钮单击示例：
<f
浏览 0提问于2019-03-08得票数 1
回答已采纳
在我为jQuery验证插件定制的突出显示功能中，我想做不同的事情，这取决于验证是由无效元素的blur()发起的(通过$('form').validate().element($element))，还是表单是提交的。(当元素无效时，会调用highlight函数。如果在表单提交时发生这种情况，则后者将中止。)
据我所知，插件中名为"onsubmit“的方法只是为表单的每个元素调用element()方法，没有传递任何指示调用来自何处的变量，我也没有找到任何可访问的变量或验证器的方法，我可以从我的突出显示函数中使用它们来找出是什么启动了验证。我希望我刚刚忽略了什么，所以如果有人
浏览 1提问于2020-05-06得票数 0
1回答
我有一个表单，它提交到的页面与它所在的页面不同。我想捕捉表单的onsubmit并执行一些VBScript代码。
我的想法和JSP中的Java代码一样，<% %>中的所有内容都将在html呈现之前进行计算，对吗？
以下是我的问题的简要概述：
<form id="frm1" method="post" action="otherSite" onsubmit="<% logFormSubmit "submitted"%>">
.
.
.
</form>
浏览 0提问于2010-09-13得票数 0
在使用React JS时，如何识别哪个按钮用于提交表单？我以为像这样的东西会起作用，但它不是。
export default function App() {
const onSubmit = e => {
e.preventDefault();
console.log(e.target.btn.value);
};
return (
<form className="App" onSubmit={onSubmit}>
<button type="submit" name="btn
浏览 2提问于2020-02-22得票数 9
我有一个非常简单的表单，有一个名称字段和两个提交按钮：'change‘和'delete’。当表单提交时，我需要在javascript中做一些表单验证，所以我需要知道哪个按钮被点击了。如果用户按enter键，则“change”值将到达服务器。所以真的，我只需要知道‘删除’按钮是否被点击了。
我能确定哪个按钮被点击了吗？或者我是否需要将“delete”按钮从提交按钮更改为常规按钮，并捕获其onclick事件以提交表单？
表单如下所示：
<form action="update.php" method="post" onsubmit="
浏览 0提问于2010-02-20得票数 19
回答已采纳
2回答
我是这么新的反应JS。我没有维护由其他人编写的代码。我的问题可能太基本了，对不起。
页面中有一个表单。是否在单击提交按钮后重新呈现页面？在我的onSubmit方法中，没有重新呈现网页的代码块.例如，在提交表单后，我希望设置一个标签"Register是否成功“。此外，如果表单中存在验证错误，我希望对输入字段进行着色。
实际上，我不知道何时重新呈现页面以及它呈现的页面的哪一部分？在页面中的某个地方，我如何强制重新呈现？
这是我的onSubmit方法；
onSubmit(e) {
e.preventDefault();
this.setState({
loading: tr
浏览 0提问于2018-12-27得票数 1
回答已采纳
我试图将在NextJS中接收到的查询arg (如果存在的话)作为react-hook-form表单中的隐藏输入传递。
天真的实现：
const GiveawayForm = () => {
const {
handleSubmit,
register
} = useForm();
const router = useRouter();
const referrer = router.query?.ref;
return (
<form onSubmit={handleSubmit(onSubmi
浏览 15提问于2022-12-04得票数 0
回答已采纳
我正在尝试拦截来自我不能控制的网页的表单提交。
我目前的实现是...
// During onLoad, loop through all forms and for each form object
var prevonsubmit = formobj.onsubmit;
if (prevonsubmit) {
formobj.onsubmit = function f() {
if(prevonsubmit()) {
interceptform();
return true;
}
ret
浏览 1提问于2012-03-26得票数 0
回答已采纳
使用新的react hooks。如何更新状态，然后提交表单。 例如:我有一个搜索框，它使用setSearch的正常状态，在提交时，它会获取服务器上的数据。我还有一个搜索的history，如果用户点击它，它应该填充搜索，然后提交表单。 const Search = () => {
const [search, setSearch] = useState('')
const onSubmit = () =>{
fetch('http://server.com/?search='+search)...
}
cons
浏览 43提问于2020-04-09得票数 1
回答已采纳
我想提交一个反应表格后，点击一个链接。
为此，如果单击链接，则需要以编程方式提交表单。
我的问题是:表单提交后不会触发onSubmit 处理程序。。
下面是我为此目的编写的代码片段：
var MyForm = React.createClass({
handleSubmit: function(e){
console.log('Form submited');
e.preventDefault();
},
submitForm : function(e){
this.refs.formToSubmit.submit();
},
re
浏览 12提问于2016-06-18得票数 51
回答已采纳
在我的表单中，我将一个函数绑定到表单提交：
$(document).ready(function() {
// Bind the submission to the form
$('form').bind('submit', onsubmit_action);
});
在onsubmit_action()中，我解除了提交事件的绑定，这样人们就不能再次单击该事件，并调用事件的preventDefault，因为我正在做一些AJAX的废话：
function onsubmi
浏览 1提问于2013-01-25得票数 0
1回答
我对Javascript有以下问题。我尝试在页面中的每个表单元素中自动添加一个"onsubmit“处理程序(在页面加载之后)。所以我写了这个脚本：
window.onload=function(){
var formElements=document.getElementsByTagName("form");
for (var k=0;k<formElements.length;k++){
formElements[k].onsubmit=function(param){
return formValidat
浏览 1提问于2013-07-14得票数 2
回答已采纳
1回答
我正在将Rails 2.3.14到Rails 3.0之间的Rails应用程序进行转换。
它仍然在使用Prototype (转换为jQuery是我们迁移路径中的后续步骤)，所以请不要回答jQuery。
我们有很多带有下拉的表单，只要其中一个下拉列表被更改，我们就会以AJAX的形式提交这些表单。
在Rails 2.3版本中，我们使用了form_remote_tag，然后用于下拉的onchange事件将调用$('myform').onsubmit();来提交表单。
在Rails 3.0分支中，我们已经将表单转换为与:remote => true一起使用form_tag，但是，当
浏览 3提问于2012-05-16得票数 0
回答已采纳
好的，我会尽力给出尽可能多的细节。
该站点不适合使用IE6。如果它能与IE8和Chrome一起使用，那就太好了，但这可以在以后完成。
该站点使用PHP。提交位于另一个PHP文件中的表单，该文件包含在DIV标记内的index.php中。
如果我只打开表单，提交就会正常工作，但是当我试图在索引页面上提交时，Firefox错误控制台会说文档是未定义的。表单代码是通过PHP逐行回显的。保存用户名和密码的文本字段，表单代码如下：
<form id="entrar" action="entrar.php" method="post" onsubmit=
浏览 1提问于2010-06-13得票数 1
当从onChange事件调用onSubmit方法时，我遇到了一个问题。 如果下面的表单是由提交按钮函数提交的，则会调用buttonOnSubmit。 但是，如果表单是由onChange事件中的函数props.submit()提交的，则不会调用函数buttonOnSubmit。 你知道为什么吗？我试图在文档和互联网上找到解释，但我失败了。 谢谢。 const Form = props => {
// this method is called if submit button is clicked, it is not called from onChange event
浏览 7提问于2019-05-31得票数 0
3回答
我无法为我的角形找到一个可行的解决办法。基本上，我希望在我的表单被成功捕获后自动回滚到顶部。
我能够捕获提交和重置表单，但有一些困难，试图滚动回顶部后，重新设置。
这是我account-payable.component.ts中的account-payable.component.ts函数
onSubmit() {
this.submitted = true;
// stop here if form is invalid
if (this.accountPayableForm.invalid) {
return;
}
this.load
浏览 2提问于2019-10-01得票数 3
回答已采纳
我正在处理角7中的反应性形式，我需要从表单外部的一个按钮调用submit。
<input type="button" form="ngForm" class='Button' value="Save" (click)="detailForm.ngSubmit.emit()" />
<form [formGroup]="gDetailForm" (ngSubmit)="onSubmit()" >
</form>
这个功能运转良好。
现在，我需要从
浏览 1提问于2019-05-29得票数 3
回答已采纳
我试图阻止浏览器在提交时验证表单。我已经重写了onsubmit事件以使用我自己的函数。不幸的是，当我提交表单时，它仍然被验证，并且我的函数没有运行。以下是守则：
function submitFunction() {
alert("Name is required.");
event.preventDefault();
}
<form onsubmit="submitFunction()">
<input type="text" placeholder="Name" required>
浏览 1提问于2020-10-17得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
