`

关于如何在submit按钮提交前设置异步方法控制是否提交

 
阅读更多

       需求:最近有一个需求,就是在文件下载前,先弹出提示框,提示即将下载文件的大小等信息。用户根据提示信息的实际需要,选择确定或者取消。

       问题:下载按钮使用submit类型,点击后,没有办法可以捕捉submit按钮在提交之前的事件。也就是说,直接处理,没办法通过异步查询返回提示内容给用户选择。

       解决:通过在页面上隐藏原submit下载按钮,重新增加一个button类型按钮,通过点击button类型按钮,异步提交参数并返回需要下载文件的大小等信息供用户选择。在用户选择确定后,代码设置原submit按钮的click()事件提交整个form,并获取到下载文件。

       总结:整个思路就是隐藏submit类型按钮,将与用户交互的行为交给button类型按钮,在异步操作后,再根据需要选择是否点击submit类型按钮,这样就等于间接控制了如何在submit按钮提交前设置异步方法控制是否提交。

分享到:
评论

相关推荐

    按钮的Ajax请求时一次点击两次提交的解决方法

    在使用JavaScript的Ajax请求时,如果在Ajax请求完成后没有阻止按钮的默认行为,即表单提交,就会发生“一次点击两次提交”的情况。下面详细探讨两种常用的解决办法。 ### 解决方案一:更改按钮的type属性 第一种...

    表单点击提交按钮后变成灰色.rar

    在JavaScript编程中,表单(Form...开发者可以通过控制按钮的`disabled`属性,配合事件监听和异步提交技术,实现更加智能和友好的表单交互。在实际开发中,还需要注意兼容性问题,确保在各种浏览器环境下都能正常工作。

    javascript方式防止表单重复提交

    3. **利用Ajax异步提交**:通过Ajax提交表单,可以在后台处理完数据后再更新页面状态,这样用户不会看到页面刷新,也就无法再次提交。在`success`回调中,可以重置表单或恢复提交按钮的状态。 4. **页面跳转或显示...

    js屏蔽前台提交按钮

    3. **异步提交与加载提示**:在提交表单前显示一个加载提示,让用户体验更友好。例如,显示一个遮罩层或旋转图标,表明提交正在进行: ```javascript document.getElementById('loadingIndicator').style.display ...

    extjs四种异步提交

    在EXTJS中,异步提交数据是常见的操作,主要用于与服务器进行无刷新的数据交互。这里提到了EXTJS的四种异步提交方式,分别是基于EXT JS的Ajax方法、指定HTML表单的Ajax提交、EXT JS自定义表单的提交以及使用Action...

    防止Layui form表单重复提交的实现方法

    在上述函数中,如果需要在禁止表单默认提交行为的同时,与服务器进行数据交互,则可以使用JavaScript的XMLHttpRequest或者现代的Fetch API来异步提交表单数据。使用AJAX提交表单数据的好处是,可以避免页面刷新,...

    Ajax 实现异步提交的几个实例

    比如,用户在搜索框中输入关键词时,不仅可以实时显示匹配结果,还可以在用户选定一个结果后,异步提交该结果,触发相关操作,如跳转到详细页面或直接执行搜索。 总结起来,Ajax技术在Web开发中扮演着重要角色,它...

    iframe实现异步无刷新提交

    在上述代码中,用户点击"提交"按钮后,`submitForm`函数会被调用,将`iframe`的`src`设置为表单的`action`属性值,即提交地址。当`iframe`加载完成后,我们可以通过`onload`事件处理服务器的响应。 需要注意的是,...

    一个form多个submit处理案例

    - 对于不希望页面刷新的场景,可以使用jQuery或其他库的Ajax方法来异步提交表单。每个submit按钮点击时,对应的Ajax请求可以根据按钮的值来改变URL、数据和回调函数,实现不同功能。 5. **CSS样式**: - 为了让...

    swift-SubmitButton是一组iOS动画提交按钮采用Swift开发

    为了实现"SubmitButton"的动画效果,开发者可能会扩展UIButton类,添加自定义属性和方法,或者使用UIView动画API来控制按钮的外观变化。例如,可以添加过渡动画,使按钮在被点击时放大、改变颜色或显示加载指示器。 ...

    js和jq使用submit方法无法提交表单的快速解决方法

    在这个示例中,`submitForm`函数会在表单数据验证通过后调用`submit`方法,从而实现异步提交或者其他自定义操作。而`validateForm`函数用于检查表单数据的有效性。 总之,当遇到使用`submit`方法无法提交表单的问题...

    Vue form 表单提交+ajax异步请求+分页效果

    在本篇文章中,我们将详细介绍 Vue 表单提交、Ajax 异步请求和分页效果的实现方法。这些技术是 Web 开发中常用的技术,能够提高用户体验和网站性能。 一、Vue 表单提交 Vue 表单提交是指在Vue框架下实现的表单提交...

    JSP_重复提交_解决方法

    使用Ajax进行异步提交可以避免整个页面的刷新,从而降低重复提交的风险。这种方式适用于需要实时反馈的场景。 ##### 方法7:Struts框架中的重定向 在Struts框架中,可以通过配置文件实现重定向,防止重复提交: ```...

    在脚本中提交

    - **异步提交**:使用AJAX(Asynchronous JavaScript and XML)技术,可以在不重新加载整个页面的情况下提交表单数据,从而提供更流畅的用户体验。 - **页面局部更新**:仅更新页面的部分区域,而不是整个页面,这样...

    Gravity-Forms--Disable-Submit:提交表单后,禁用“重力表单”表单中的“提交”按钮(例如,快十倍!!)。

    它基于WordPress的插件系统,通过自定义短代码在页面上插入表单,并使用JavaScript和Ajax处理异步提交。当用户填写并提交表单时,重力表单会发送一个Ajax请求到服务器,验证表单数据并进行处理。在此过程中,我们...

    浅谈layui 绑定form submit提交表单的注意事项

    通过返回`false`,我们可以阻止表单的默认提交行为,从而可以自定义处理表单数据或进行异步提交。 总结一下,使用layui绑定form submit提交表单需要注意以下几点: 1. 在提交按钮上添加`lay-submit`属性,使layui...

    css3点击提交按钮加载进度条动画特效

    // 在这里进行数据提交或异步请求 }); ``` 这个例子展示了如何将CSS3与JavaScript结合,创建出交互性更强的网页元素。这样的特效不仅提高了用户体验,也让网站看起来更加现代化和专业。同时,这种技术在响应式设计...

    jquery实现submit提交表单

    在描述中提到的问题是,如果表单中有一个输入元素(通常是提交按钮)的`name`属性被设置为"submit",这会导致jQuery的`submit()`函数失效。这是因为浏览器在处理表单提交时,会查找名为"submit"的按钮并将其作为提交...

    防止重复提交

    2. **AJAX异步提交**:使用AJAX进行异步提交,提交过程中显示加载状态,成功后更新页面,这样用户无法在提交过程中再次触发请求。 3. **Token机制**:生成一个一次性Token,提交时附带Token,服务器端验证Token的...

    js提交表单的三种方式

    通过在按钮或其他元素上绑定`onclick`事件,我们可以控制何时以及如何提交表单。例如: ```html <button onclick="submitForm()">手动提交 ``` 在JavaScript中定义`submitForm`函数: ```javascript function...

Global site tag (gtag.js) - Google Analytics