form action执行js

form元素的action属性通常用于指定表单提交时数据发送到的URL。当你在action属性中指定一个JavaScript函数时，这个函数会在表单提交之前被调用。这种做法允许你在表单数据实际发送到服务器之前对其进行验证或修改。

基础概念

Form Action: HTML表单的action属性定义了表单提交时数据将发送到的URL。
JavaScript Execution: 在action属性中使用JavaScript函数可以在表单提交前执行客户端脚本。

类型

内联JavaScript: 直接在action属性中写入JavaScript代码。
函数调用: 调用已经定义好的JavaScript函数。

应用场景

表单验证: 在提交前检查必填字段是否填写，格式是否正确等。
动态修改数据: 在提交前根据用户输入或其他条件修改表单数据。
条件提交: 根据某些条件决定是否提交表单。

示例代码

以下是一个简单的例子，展示了如何在表单提交前使用JavaScript进行验证：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form with JavaScript Action</title>
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="javascript:validateForm();" method="post">
    Name: <input type="text" name="fname">
    <input type="submit" value="Submit">
</form>

</body>
</html>

在这个例子中，如果用户尝试提交一个空的姓名字段，将会弹出一个警告框，并且表单不会被提交。

遇到的问题及解决方法

问题: 使用action="javascript:..."可能会导致安全问题，因为它容易受到跨站脚本攻击（XSS）。

解决方法:

避免内联脚本: 将JavaScript代码移至外部文件，并通过<script src="..."></script>引入。
事件监听: 使用事件监听器来处理表单提交事件，而不是在action属性中执行JavaScript。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form with Event Listener</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var form = document.querySelector('form');
    form.addEventListener('submit', function(event) {
        if (!validateForm()) {
            event.preventDefault(); // 阻止表单提交
        }
    });
});

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
    return true;
}
</script>
</head>
<body>

<form name="myForm" method="post">
    Name: <input type="text" name="fname">
    <input type="submit" value="Submit">
</form>

</body>
</html>

在这个改进的例子中，我们使用了事件监听器来处理表单的提交事件，并在验证失败时阻止表单提交，这样做更加安全且易于维护。

页面内容是否对你有帮助？

有帮助

没帮助

将js变量传递给form action

、、

我在js中有一个动态变量。我必须在我的表单操作中获得这个变量。AutoPath = $(this).attr('automationpath'); } <input name="AutoRun&q

浏览 0提问于2016-10-17得票数 0

2回答

在提交表单中使用JS和JSP函数

、、

我有这个JS函数function access(){ return ("/outstanding-appeals-nonstop16/" + insert2 + "/"); 在我的表格里我有 <form:

浏览 0提问于2015-04-01得票数 0

1回答

通过ajax提交表单；如果禁用了javascript，则使用回退方法？

、、

If (Javascript is Enabled) { automatically

浏览 3提问于2013-02-12得票数 4

2回答

如何通过Codeigniter form_open()函数使用parsley.js？

、、

实际上，我想将data-parsley-validate作为参数传递给form_open()函数。像<form action="http://recruit.com/controller/add_jobs" accept-charset="utf-8" data-parsley-validate>一样

浏览 3提问于2015-07-26得票数 0

1回答

如何在操作为空的表单html中发布数据？

、

代码如下：整排看起来是这样的： <form name="form_upload&qu

浏览 4提问于2013-10-19得票数 0

1回答

VisualComposer/WPBakery页面编辑器:在显示版本弹出后是否触发了任何JS事件？

、

我看到一个AJAX查询被发送，请求admin-ajax.php，然后是edit-form.min.js。我也可以找PHP挂钩和过滤器，你知道的。

浏览 0提问于2019-06-07得票数 0

1回答

带Back Button Checker的条件Javascript重定向

、、、、

代码：<input type="hidden" id="page_is_dirty" name="page_is_dirty" value="0" /></form> var dirty

浏览 0提问于2013-05-09得票数 0

4回答

<form* action="#">和<form method="post“action="#">做什么？*

因为我正在尝试理解示例代码的要点，尽管我搜索了以下内容，但仍然找不到form action="#"的解释在谷歌上，在SO上，在www.w3schools.com

浏览 1提问于2011-12-06得票数 74

回答已采纳

1回答

form action="“和form action=".”有什么区别？

、、

<form action=""><form action=".">

浏览 2提问于2009-02-03得票数 11

回答已采纳

2回答

为什么不打印到控制台

、、、

您好，我有一个包含一些数据的表单，我想要的是，当我单击一个按钮时，一个jQuery函数会执行，并在控制台中打印所有这些数据，所以这是我的表单代码： <div class="row"> <div class="form-group"> <labelfor="fe

浏览 2提问于2016-06-10得票数 0

2回答

ListView与表单，如何重定向回表单页面？

、、、

(dataform) if request.method == "POST": form.save()

浏览 0提问于2020-09-10得票数 0

回答已采纳

3回答

如何运行窗体操作并同时单击按钮单击事件

、、

我有这样的表格<input type="text" /> 我需要一个点击事件下载按钮。例如：如果我单击“下载”，它应该以

浏览 0提问于2019-04-10得票数 1

回答已采纳

1回答

Html <form* action=./>*

、

/‘，代码如下：我真的不知道“./”是什么意思，我希望你能回答我这个问题。

浏览 0提问于2016-05-09得票数 0

3回答

具有单击事件和新操作的jQuery提交表单

、、、

我有一张这样的表格<input type="text" /> <input type="submit"

浏览 0提问于2013-08-31得票数 10

回答已采纳

1回答

在magento布局中将JS和CSS包括到所选页面

、

1.6.1.js</script></action> <action method="addJs"><script>myrevi

浏览 2提问于2011-06-29得票数 3

回答已采纳

4回答

使用相同函数的多个表单Submit

、、

我有一个表单，它使用的函数如下 $("#form1").submit(function() { $("#form1").submit(function(), $("#form

浏览 0提问于2019-01-29得票数 1

回答已采纳

1回答

如果表单_POST[]- class="contact- form“，则无法获得$class=值。

、、、

几个小时后，我把它整理出来，我得出结论，那是因为我的form有一个class of "contact-form"<form id="main-contact-form" name="contact-form" method="post" action="sendemail.php" role="form">

浏览 3提问于2015-12-10得票数 0

2回答

使用脚本‘dataType’引用调用jQuery.ajax()中的DOM元素

、、、

假设我有以下场景： $('form').submit(function(e) { url: this.action,

浏览 0提问于2010-01-29得票数 2

回答已采纳

3回答

按下“提交”按钮时，根据选定选项更改HTML表单操作

、、

HTML <option data-action="/test1">Test1</option> <option da

浏览 0提问于2018-03-19得票数 0

回答已采纳

1回答

如何使用全局延迟js文件和单独的独立javascript文件

、、

好的，我推迟了一个js文件(名为combination.js)，它包含了我的网站需要的所有“全局”/通用js --使用以下方法：function= $(this).attr('action'); $('.submit', this).attr('disabled', 'd

浏览 3提问于2015-04-16得票数 0

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

form action执行js

基础概念

相关优势

类型

应用场景

示例代码

遇到的问题及解决方法

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐