2023.11.21使用＜button＞元素来触发form表单和数据提交
2023.11.21使用＜button＞元素来触发form表单和数据提交
除了使用<input>中的submit方式进行form表单和数据提交，还可以使用button方式，两种方式视使用场景，各有优点。
方法一：可以将<button>放在<form>元素中，并将type属性设置为"submit"。这样当用户点击按钮时，就会触发表单的提交操作。如下示例代码：
<!DOCTYPE html>
<html>
<head><title>Form Submission</title>
</head>
<body><form action="/submit-form" method="post"><input type="text" name="username" placeholder="用户名"><input type="password" name="password" placeholder="密码"><button type="submit">提交</button></form>
</body>
</html>
方法二：使用button元素进行传值。
将button元素包含在form标签中，并设置一个隐藏的input元素来存储值。当用户点击按钮时，表单会提交并将值传递给服务器。
html
<form action="your-action-url" method="post"><input type="hidden" name="value" value="your-value" /><button type="submit">Submit</button>
</form>
方法三：使用JavaScript处理按钮的点击事件，并通过JavaScript将值传递给其他地方，比如存储在变量中或者发送给服务器。
<button onclick="getValue('your-value')">Click</button><script>function getValue(value) {// 处理传递的值console.log(value);// 或者将值发送到服务器}
</script>
方法四：使用data-属性：使用data-*属性来存储值，并通过JavaScript获取该值。
<button id="myButton" data-value="your-value">Click</button><script>var button = document.getElementById('myButton');var value = button.dataset.value;console.log(value);
</script>
方法五：通过JavaScript动态创建了一个表单元素，并将要传递的参数作为隐藏字段添加到表单中。然后，将表单添加到页面中并提交表单，实现将image.url传递到后端。后端处理完成后会根据具体情况进行页面跳转。
<button type="button" class="btn btn-primary" onclick="previewImage('{{ image.url }}')">预览</button>
……
<script>function previewImage(imageUrl) {var form = document.createElement('form');form.method = 'POST';form.action = '/preview_image';var input = document.createElement('input');input.type = 'hidden';input.name = 'image_url';input.value = imageUrl;form.appendChild(input);document.body.appendChild(form);form.submit();}
</script>
当然还可以使用jquery和ajax进行传递，视使用场景决定。
相关文章：
2023.11.21使用＜button＞元素来触发form表单和数据提交
2023.11.21使用＜button＞元素来触发form表单和数据提交 除了使用<input>中的submit方式进行form表单和数据提交，还可以使用button方式，两种方式视使用场景，各有优点。 方法一：可以将<button>放…...
leetcode：504. 七进制数
一、题目： 链接： 504. 七进制数 - 力扣（LeetCode） 函数原型： char* convertToBase7(int num) 二、思路 本题要将十进制数转换为二进制数，只要将十进制num数模7再除7，直到num等于0 每次将模7的结…...
centos安装指定版本docker
centos7安装指定版本的docker 官方文档 https://docs.docker.com/engine/install/centos/ 1、卸载旧版本 $ sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine2、设…...
PPT幻灯片里的图片，批量提取
之前分享过如何将PPT文件导出成图片，今天继续分享PPT技巧，如何提取出PPT文件里面的图片。 首先，我们将PPT文件的后缀名，修改为rar，将文件改为压缩包文件 然后我们将压缩包文件进行解压 最好是以文件夹的形式解压出来…...
《Fine-Grained Image Analysis with Deep Learning: A Survey》阅读笔记
论文标题 《Fine-Grained Image Analysis with Deep Learning: A Survey》 作者 魏秀参，南京理工大学 初读 摘要 与上篇综述相同： 细粒度图像分析（FGIA）的任务是分析从属类别的视觉对象。 细粒度性质引起的类间小变化和类内…...
【网络安全】伪装IP网络攻击的识别方法
随着互联网的普及和数字化进程的加速，网络攻击事件屡见不鲜。其中，伪装IP的网络攻击是一种较为常见的攻击方式。为了保护网络安全，我们需要了解如何识别和防范这种攻击。 一、伪装IP网络攻击的概念 伪装IP网络攻击是指攻击者通过篡改、伪造I…...
redis非关系型数据库
1.redis redis：开源的，使用c语言编写的NQL数据库 redis：基于内存运行，支持持久化（数据恢复）。采用的就是key-value（键值对）的存储形式，目前在分布式架构中，…...
LeetCode 0053. 最大子数组和：DP 或 递归（线段树入门题？）
【LetMeFly】53.最大子数组和：DP 或 递归 力扣题目链接：https://leetcode.cn/problems/maximum-subarray/ 给你一个整数数组 nums ，请你找出一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最…...
二十三种设计模式全面解析-解密职责链模式：请求处理的设计艺术
当我们构建软件系统时，经常会遇到需要处理各种不同类型请求的情况。有时，请求的处理逻辑可能相当复杂，需要按照一定的规则和条件进行处理。在本文中，我们将深入探讨职责链模式在请求处理中的应用。职责链模式通过将请求发送者和接…...
【linux】安装telnet
Telnet Telnet协议是TCP/IP协议族中的一员，是Internet远程登录服务的标准协议和主要方式。它为用户提供了在本地计算机上完成远程主机工作的能力。在终端使用者的电脑上使用telnet程序，用它连接到服务器。终端使用者可以在telnet程序中输入命令…...
深入探索 PaddlePaddle 中的计算图
**引言** 计算图是深度学习平台 PaddlePaddle 的核心组件之一，它提供了一种图形化的方式来表示和执行深度学习模型。通过了解和理解 PaddlePaddle 中的计算图，我们可以更好地理解深度学习的工作原理，并且能够更加灵活和高效地构建和训练复杂…...
西南科技大学814考研一
C语言基础 字节大小 char：1 字节 unsigned char：1 字节 short：2 字节 unsigned short：2 字节 int：通常为 4 字节（32 位平台）或 8 字节（64 位平台） unsigned int&#x…...
【网络编程】简述TCP通信程序，三次握手，四次挥手
文章目录 🎄TCP通信程序⭐打印字符串✨中文乱码问题🎈解决方法 🌺TCP三次握手🌺TCP四次挥手🛸其他 🎊专栏【网络编程】 🍔喜欢的诗句：更喜岷山千里雪 三军过后尽开颜。 🎆…...
 使用介绍 5 -- Trace32 ELF 文件加载介绍】)
【ARM Trace32(劳特巴赫) 使用介绍 5 -- Trace32 ELF 文件加载介绍】
请阅读【ARM Coresight SoC-400/SoC-600 专栏导读】 文章目录 1.1 Trace32 加载符号表1.1.1 ELF 文件加载1.1.2 其它格式文件加载1.1.3 多个 ELF 的加载1.2 Trace32 UEFI 配置1.2.1 x86 32-BIT1.2.2 x86 64-BIT1.2.3 ARM1.1 Trace32 加载符号表 劳特巴赫 TRACE32 可以显示目标…...
Linux（4）：Linux文件与目录管理
目录与路径 相对路径在进行软件或软件安装时非常有用，更加方便。利用相对路径的写法必须要确认目前的路径才能正确的去到想要去的目录。 绝对路径的正确度要比相对路径好，因此，在写程序（shell scripts）来管理系统的条…...
Altium Designer学习笔记2
原理图的绘制 需要掌握的是系统自带原理图库元件的添加。...
Atlassian发布最新补贴政策，Jira/Confluence迁移上云最低可至零成本
到2024年2月15日，Atlassian将不再提供对Jira、Confluence、Jira Service Management等Server版产品的支持。 近期，Atlassian推出了一项针对云产品的特殊优惠。现在从Server版迁移到云版，您能享受到高额补贴，甚至成本低至零元。立…...
基于FPGA的五子棋（论文+源码）
1.系统设计 在本次设计中，整个系统硬件框图如下图所示，以ALTERA的FPGA作为硬件载体，VGA接口，PS/2鼠标来完成设计，整个系统可以完成人人对战，人机对战的功能。系统通过软件编程来实现上述功能。将在硬件设计…...
QT5 MSVC2017 64bit配置OpenCV4.5无需编译与示范程序
环境：Windows 10 64位 Opencv版本：4.5 QT：5.14 QT5 MSVC2017配置OpenCV 版本参考： opencv msvc c对应版本 1.安装MSVC2017（vs2017） 打开Visual Studio Installer，点击修改 选择vs2017生成工…...
windows如何查看自己的ip地址
windows如何查看自己的ip地址 1.打开控制面板 2.进入网络和internet 3.进入网络共享中心 4.点击以太网进入网络详情页，或邮件已连接的网络，点击属性 5.查看ipv4地址就是当前机器ip...
Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）
目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目（父项目）主要用于依赖管理 一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例，模拟20个网页的爬取，每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程：允许程序同时执行多个任务，提高IO密集型任务（如网络请求）的效率…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
【论文阅读28】-CNN-BiLSTM-Attention-（2024）
本文把滑坡位移序列拆开、筛优质因子，再用 CNN-BiLSTM-Attention 来动态预测每个子序列，最后重构出总位移，预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵（S…...
laravel8+vue3.0+element-plus搭建方法
创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...
AI，如何重构理解、匹配与决策？
AI 时代，我们如何理解消费？ 作者｜王彬 封面｜Unplash 人们通过信息理解世界。 曾几何时，PC 与移动互联网重塑了人们的购物路径：信息变得唾手可得，商品决策变得高度依赖内容。 但 AI 时代的来…...
九天毕昇深度学习平台 | 如何安装库？
pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子： 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...
抽象类和接口（全）
一、抽象类 1.概念：如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象，这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法，包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中，⼀个类如果被 abs…...