onsubmit 相关问题

onSubmit是在HTML表单上按下提交按钮时调用的HTML事件。该事件也称为form.submit（）函数被调用。它可用于触发JavaScript以验证表单，预处理其数据或完全阻止提交。

我试图让一个javascript函数在提交表单时起作用，该函数似乎没有运行。有人可以帮忙吗？函数上传(){ ...</desc> <question vote="21"> <p>我试图让 JavaScript 函数在提交表单时起作用，该函数似乎没有运行。有人可以帮忙吗？</p> <pre><code><html> <head> <script> function upload(){ alert("I am an alert box!"); } </script> </head> <body> <form enctype="multipart/form-data" method="post" onsubmit="return upload();"> <input type="file" name="file"> <input type="submit" name="upload" value="Datei hochladen"> </form> </body> </html> </code></pre> </question> <answer tick="true" vote="32"> <p>将事件处理程序附加到表单元素时，事件处理程序的范围是表单而不是窗口</p> <pre><code><form enctype="multipart/form-data" method="post" onsubmit="return upload(this);"> <script> function upload(scope) { console.log(scope); // The passed scope from the event handler is } // the form, and not window </script> </code></pre> <p>由于表单内的输入元素作为属性附加到表单对象（其中名称是键），因此在事件处理程序中调用 <pre><code>upload()</code></pre>（其中范围是表单）相当于调用 <pre><code>form.upload()</code></pre>，但表单已经存在有一个具有该名称的元素，因此 <pre><code>form.upload</code></pre> 是上传按钮，而不是全局范围内的 <pre><code>upload()</code></pre> 函数。</p> <p>要解决此问题，请重命名函数或元素</p> <pre><code><html> <head> <script> function upload(){ alert("I am an alert box!"); } </script> </head> <body> <form enctype="multipart/form-data" method="post" onsubmit="return upload();"> <input type="file" name="file"> <input type="submit" name="upload2" value="Datei hochladen"> </form> </body> </html> </code></pre> <p><a href="http://jsfiddle.net/ybrCC/"><strong>小提琴</strong></a></p> </answer> <answer tick="false" vote="1"> <p>我的问题，我在不知道表单内的表单的情况下，我与内部表单交互，无论我做什么，外部表单总是执行</p> </answer> <answer tick="false" vote="0"> <p>您的脚本中的问题是您没有根据您的愿望返回 true 或 false。例如，如果您想阻止上传，您的函数<strong>可能会返回 false</strong>，并且您只是测试警报但不返回任何内容。你必须这样做</p> <pre><code> alert( whathever ); return true; // or return false according your need. </code></pre> </answer> <answer tick="false" vote="-4"> <p>在代码中添加 return 语句</p> <pre><code><script> function upload(){ alert("I am an alert box!"); return false; } </script> </code></pre> </answer> </body></html>

javascript onsubmit

回答 0 投票 0

PHP onSubmit，JS函数不会执行

我对 PHP 和 JS 还很陌生，但是从我所读到的内容来看，当表单具有 onSubmit 元素时，表单需要函数返回 true 才能执行提交。我

javascript php html onsubmit

回答 1 投票 0

如何将表单上传的文件以表单形式保存到特定文件夹？

所以，我尝试将上传的文件保存在特定的文件夹中。比如说，我有一个 html 文件，如下所示： ... 因此，我尝试将上传的文件保存在特定文件夹中。比如说，我有一个 html 文件，如图所示： <form> <input type="file" id="image_file" /> <input type="file" id="text_file" /> <input type="submit" /> </form> 现在，我想为上述表单编写一个 js onsubmit 函数，以便它将给定的文件保存在基本文件夹内的唯一文件夹中。我一直在研究各种方法来做到这一点，我发现的唯一解决方案是通过进行 ajax 调用来使用服务器，但我不想这样做。 javascript 中有没有本地方法可以让我做到这一点？仅使用客户端 JavaScript 无法将上传文件存储到服务器。您需要任何后端语言/技术。 Javascript 是客户端语言，仅在客户端浏览器中运行，因此您需要将所选文件发送到服务器，然后使用任何后端语言（例如，php 或 'node.js`）将其保存在服务器上) 查看这些链接： https://www.w3schools.com/php/php_file_upload.asp https://www.w3schools.com/nodejs/nodejs_uploadfiles.asp

javascript forms input onsubmit

回答 1 投票 0

jQuery 多种形式。需要在“提交时”捕获 $(this) 表单

我在页面上有几个表单，其中包含类似小部件的元素来上传图像。可能有一个，也可能有 10 个。我正在尝试动态地、单独地捕获 subm 上的特定表单...

jquery forms onsubmit

回答 1 投票 0

导航到另一个页面后显示react-toastify toast

我有这个函数，可以在提交时将数据提交到 API 调用函数，然后使用成功数据显示一个 toast。作为下一步，我导航到另一个页面并显示 toast...

reactjs navigation react-router-dom onsubmit react-toastify

回答 2 投票 0

当我在表单中使用onSubmit时，整个用户界面消失了

我的编码工作正常，但是当我在表单中使用 onSubmit 作为属性时，整个用户界面消失并且用户界面上没有显示任何内容，为什么解决方案是什么我的编码工作正常，但是当我在表单中使用 onSubmit 作为属性时，整个 ui 消失，并且 ui 上没有显示任何内容，为什么解决方案是什么 <form onSubmit={handleSubmit}> // what is the problem with this line because this onsubmitdisappear the ui // the code goes here </form> 您是否在 preventDefault() 函数中使用 handleSubmit 方法？ <form ...> 默认行为是提交并刷新页面，这就是 ui 消失的原因。您需要通过使用 preventDefault() 防止这种默认行为来处理它。通过在handleSubmit中调用preventDefault()，可以阻止表单提交和刷新页面，从而允许您根据需要处理表单数据。以下是您应该如何修改 handleSubmit 函数： const handleSubmit = (submitevent) => { submitevent.preventDefault(); // form submission logic here //... } 由于您没有提到任何源代码，这些可能是您面临的问题：函数的正确初始化。如果重定向到空白页面，您应该阻止表单提交的默认行为，如下面的代码所示。 function handleSubmit(e) { e.preventDefault(); } <form onSubmit={handleSubmit}> </form>

reactjs onsubmit

回答 2 投票 0

为什么我的 onSubmit 在 PrimeReact 对话框中不起作用？

当 onSubmit 被推送时，我的代码不再提交数据，即使是在我使用 and 标签时：唯一的...

reactjs dialog onsubmit primereact

回答 2 投票 0

SwiftUI：如何触发 onSubmit 修饰符？

他们的decimalPad键盘没有返回按钮。所以我喜欢添加一个使用键盘工具栏的工具。但是如何创建提交按钮呢？结构ContentView：视图{ @国家私人VA...

swiftui onsubmit submit-button

回答 1 投票 0

react js中的登录问题和onSubmit问题

我登录时遇到问题（我需要检查电子邮件并通过），这是唯一的检查电子邮件我的第二个问题是表单中的 onSubmit 不起作用！ `从'react'导入React，{useEffect，useState}；导入

reactjs authentication onsubmit

回答 2 投票 0

添加表单标签并提交常量后页面不再显示

在添加表单和导航元素之前，页面显示得足够好。没有错误，但数据不再随反应应用程序显示刚接触 Reactjs 有一个工作（很好的页面显示

reactjs forms onsubmit

回答 1 投票 0

如何阻止机器人使用 .submit() 绕过我的“必填”字段？

我有一个表单会产生大量垃圾邮件。我已完成所需的所有输入并附加了验证码。这没有产生任何影响。我假设机器人出于某种原因正在使用 form.submit()

javascript form-submit preventdefault onsubmit

回答 3 投票 0

NextJS 14 服务器操作抛出“无法重新定义属性”错误

我正在开发一个 NextJS 14 项目，并努力实现新的服务器操作功能，该功能在一段时间前引入了我的 NextJS 作为常规 API 调用的替代方案。这是一个精简版...

reactjs next.js form-submit onsubmit server-action

回答 1 投票 0

当有多个表单时，提交事件会被多次触发

我在一个php页面中有多个表单，我像这样在parentForm数组中添加了表单 ParentForm.push($('.js-address-form 表单')); 问题是当我提交一份表单时 onsubmit 事件被触发......

javascript jquery forms form-submit onsubmit

回答 1 投票 0

在 javascript 中预览表单

我需要你的帮助。我快到了.. ：）我想在提交之前预览我的表单。但是 form.submit();不起作用。这是我的代码： HTML：我需要你的帮助。我快到了..:) 我想在提交之前预览我的表单。但是 form.submit();不起作用。这是我的代码： HTML： <form action="" method="post" name="frmaction" onSubmit="return preview(this);"> <label>First Name:</label> <input name="fname" type="text" size="40" value="" /> <label>Last Name:</label> <input name="lname" type="text" size="40" value="" /> </form> Javascript： <script> function preview(form){ var dia_log; $( "label" ).each(function(i,val) { dia_log +=$(this).text() + " " + $(this).next().val()+"<br/>"; }); dia_log =dia_log.replace('undefined', ''); $.confirm({ 'title' : 'Are all these information is correct?', 'message' : dia_log, 'buttons' : { 'Yes' : { 'class' : 'blue', 'action': function(){ form.submit(); } }, 'No' : { 'class' : 'gray', 'action': function(){} } } }); return false; } </script> JQuery： (function($){ $.confirm = function(params){ if($('#confirmOverlay').length){ // A confirm is already shown on the page: return false; } var buttonHTML = ''; $.each(params.buttons,function(name,obj){ // Generating the markup for the buttons: //buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>'; buttonHTML += '<input type="submit" class="button '+obj['class']+'" value="'+name+'"/>'; if(!obj.action){ obj.action = function(){}; } }); var markup = [ '<div id="confirmOverlay">', '<div id="confirmBox">', '<h1>',params.title,'</h1>', '<p>',params.message,'</p>', '<div id="confirmButtons">', buttonHTML, '</div></div></div>' ].join(''); $(markup).hide().appendTo('body').fadeIn(); var buttons = $('#confirmBox .button'), i = 0; $.each(params.buttons,function(name,obj){ buttons.eq(i++).click(function(){ // Calling the action attribute when a // click occurs, and hiding the confirm. obj.action(); $.confirm.hide(); return true; }); }); } $.confirm.hide = function(){ $('#confirmOverlay').fadeOut(function(){ $(this).remove(); }); } })(jQuery); 希望得到你的回复。非常感谢。首先，您应该从 HTML 代码中删除 onSubmit="return preview(this);"，因为这违反了 w3c 标准。相反，请在表单中使用提交 <button>。 <form action="" method="post" name="frmaction"> <label>First Name:</label> <input name="fname" type="text" size="40" value="" /> <label>Last Name:</label> <input name="lname" type="text" size="40" value="" /> <button type="submit" name="submit">Submit</button> </form> 其次，当单击提交按钮时，您没有应用e.preventDefault，而且我也找不到像$.confirm这样的插件。我建议使用默认的 JavaScript confirm()。这是正确的代码： <script type="text/javascript"> //Register the click-submit event $('form').on('click', function(e) { e.preventDefault(); preview($(this)); }); function preview(form){ var dia_log; $( "label" ).each(function(i,val) { dia_log += $(this).text() + " " + $(this).next().val() + "<br/>"; }); dia_log = dia_log.replace('undefined', ''); if ( confirm("Are all these information is correct? " + dia_log) ) { alert('yes is clicked'); form.submit(); } else { alert('no is clicked'); } /* In any case you should consider to remove the following alignment style because is unproductive! The eye is distracted by the alignment/appearance and not focuses at the important stuff. $.confirm({ 'title' : 'Are all these information is correct?', 'message' : dia_log, 'buttons' : { 'Yes' : { 'class' : 'blue', 'action': function(){ form.submit(); } }, 'No' : { 'class' : 'gray', 'action': function(){ //Here you had to apply return false; return false; } } } }); */ } </script> 如果有的话请提供$.confirm的网址。我想看看它是如何工作的。您可以在 e.preventDefault() 中使用 Javascript。 <form onsubmit="preview(event)"> ... </form> const preview = (e) => { e.preventDefault(); const form = $(e.target); form.find("input").forEach(inp => { console.log(inp.value) }) }

javascript jquery onsubmit

回答 2 投票 0

如何向提交按钮添加一个功能，该功能显示<div>提交点击后提交的表单，而无需浏览器重新加载[关闭]

我有一个div包含一些样式和文本，例如提交的表单，还尝试添加动画，一旦单击表单提交，div就会淡入我使用javascript来调用该函数，但它不工作...

javascript html css forms onsubmit

回答 1 投票 0

嗨，我如何向提交按钮添加一个功能，该功能显示提交点击后提交的<div>表单，而无需重新加载浏览器[关闭]

我有一个div包含一些样式和文本，例如提交的表单，还尝试添加动画，一旦单击表单提交，淡入div，我使用javascript来调用该函数，但它不工作...

javascript html css forms onsubmit

回答 1 投票 0

在 ngForm 中，每次单击操作按钮都会导致提交表单

我有一个 ngForm，它有多个按钮，除了提交表单的按钮外，每个按钮都有 diff 操作，例如，简单地更改用于 *ngIf 条件检查的状态。然而，每次...