js 提交form表单时,action的动态修改方法

本文介绍如何使用JavaScript动态更改HTML表单的action属性,实现根据用户操作选择不同的表单处理页面。通过两个示例展示了如何根据按钮点击事件来决定表单提交的目标。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

用javaScript动态修改html组件form的action属性,可以在提交时再决定处理表单的页面。

Js代码
  1. <script>  
  2.   <!--  
  3.   function  chgAction(v){  
  4.    if (v==1){  
  5.     form1.action="./newworksheet" ;  
  6.    }else   if (v==2){  
  7.     form1.action="./worksheetupdate" ;  
  8.    }  
  9.    form1.submit();  
  10.   }  
  11.   -->  
  12. </script>  
<script>
  <!--
  function chgAction(v){
   if(v==1){
    form1.action="./newworksheet";
   }else if(v==2){
    form1.action="./worksheetupdate";
   }
   form1.submit();
  }
  -->
</script>

 

 

Html代码
  1. < form   method = "post"   name = "form1"   action = "" >   
  2. < input   name = "worker"   type = "text"   size = "50"   value = ""   />   
  3. < input   type = "submit"   value = "添加"   name = "add"   onclick = "chgAction(1);"   />   
  4. < input   type = "submit"   value = "修改"   name = "update"   onclick = "chgAction(2);"   />   
  5. </ form >   
<form method="post" name="form1" action="">
<input name="worker" type="text" size="50" value="" />
<input type="submit" value="添加" name="add" onclick="chgAction(1);" />
<input type="submit" value="修改" name="update" onclick="chgAction(2);" />
</form>

 


============================================================================

Js代码
  1. <script language= "JavaScript"  >   
  2. function  checkaction(v){   
  3. if (v==0){   
  4. document.dbform.action="index.php?admin_db-repair" ;   
  5. }else {   
  6. document.dbform.action="index.php?admin_db-optimize" ;   
  7. }   
  8. dbform.submit();   
  9. }   
  10.   
  11. </script>   
<script language="JavaScript" > 
function checkaction(v){ 
if(v==0){ 
document.dbform.action="index.php?admin_db-repair"; 
}else{ 
document.dbform.action="index.php?admin_db-optimize"; 
} 
dbform.submit(); 
} 

</script> 

 

Html代码
  1.    < form   action = ""   method = "post"   name = "dbform" >    
  2. < input   type = "submit"   class = "btn"   value = "{lang dbStartOptimize}"   name = "opsubmit"   onclick = "checkaction(1);"   />    
  3.  < input   type = "submit"   class = "btn"   value = "{lang dbStartFix}"   name = "resubmit"   onclick = "checkaction(0);"   />    
  4. </ form >   
<think>我们正在讨论HTML form表单action属性。根据用户的问题,我们需要详细解释action属性的规则和用法。 参考引用内容: 引用[1]提到:form表单提交actionaction是指“表单提交处理对应的后台路径。 引用[2]:action规定向何处提交表单的地址(URL)(提交页面)。它可以是一个URL地址(提交给程式)或一个电子邮件地址。 引用[3]:<form action="/getinfo" method="get">,action是指表单提交处理对应的后台路径。 因此,我们可以总结如下: 1. action属性定义表单数据提交的地址(URL)。 2. 这个URL可以是绝对路径或相对路径,也可以是一个电子邮件地址(使用mailto:协议)。 3. 如果省略action属性,则表单数据将提交到当前页面(即表单所在的同一个页面)。 此外,我们还需要结合表单的method属性(GET或POST)来理解数据如何被发送。 详细解释: 1. **基本语法**: ```html <form action="URL" method="get|post"> <!-- 表单元素 --> </form> ``` 2. **URL值**: - 绝对URL:指向另一个网站(或同一网站的不同域名)的完整地址。 例如:`action="http://www.example.com/process-form.php"` - 相对URL:指向同一网站内的资源。可以是相对于当前页面的路径,也可以是相对于网站根目录的路径。 例如:`action="/submit-form"`(根目录下的submit-form资源) `action="submit-form.php"`(当前目录下的submit-form.php文件) `action="../process/form.php"`(上一级目录的process目录下的form.php) 3. **使用电子邮件地址**: 通过设置`action="mailto:email@example.com"`,可以将表单数据发送到指定的电子邮件地址。但是,这种方式依赖于用户计算机上安装的邮件客户端,并且有安全性和可靠性问题(如用户可能没有配置邮件客户端,或数据被截获)。同,这种方式提交的数据是经过URL编码的,并且只能使用GET方法(即使指定method="post",浏览器也会使用GET)。因此,不推荐在生产环境中使用。 示例: ```html <form action="mailto:someone@example.com" method="get" enctype="text/plain"> ``` 4. **省略action属性**: 如果省略action属性,则表单数据将提交到当前页面的URL。这通常用于表单处理脚本与表单页面是同一个文件的情况。例如,在PHP中,我们常常将表单和处理逻辑放在同一个文件中,通过判断请求方法来处理。 5. **与method属性配合**: - 当使用`method="get"`表单数据会附加在action URL的后面,以查询字符串的形式发送(例如:`/submit?name=value&...`)。因为URL有长度限制(大约2047个字符),所以GET方法适合提交少量数据。 - 当使用`method="post"`表单数据会放在HTTP请求的主体中发送,不会显示在URL中。适合提交大量数据(如文件上传)或敏感数据(如密码)。 6. **enctype属性**: 当表单使用POST方法,enctype属性指定数据在发送到服务器之前如何编码。其值可以是: - `application/x-www-form-urlencoded`:默认值,所有字符在发送前都会进行编码(空格转换为"+"号,特殊符号转换为ASCII HEX值)。 - `multipart/form-data`:当表单包含文件上传控件(`<input type="file">`),必须使用此值。它不对字符编码,而是将表单数据分成多个部分,每部分对应一个表单控件。 - `text/plain`:空格转换为加号,但不对特殊字符编码。此编码方式很少使用。 7. **target属性**: target属性规定在何处打开action URL。其值可以是: - `_self`:默认值,在同一个框架或窗口中打开。 - `_blank`:在新的窗口或标签页中打开。 - `_parent`:在父框架中打开。 - `_top`:在整个窗口中打开(如果表单在框架内,则跳出框架)。 - 框架名称:在指定的框架中打开(框架的name属性值)。 8. **表单提交后的处理**: 当用户提交表单后,浏览器会向action属性指定的URL发送请求(根据method指定的方法)。服务器接收到请求后,处理表单数据,然后返回响应(通常是HTML页面)。如果action指向的URL是一个服务器端脚本(如PHP、Python、Node.js等),该脚本负责处理数据(如验证、存储到数据库等)并生成响应。 9. **示例**: 一个简单的登录表单,将数据提交到当前目录下的login.php文件,使用POST方法: ```html <form action="login.php" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username"> <label for="password">密码:</label> <input type="password" id="password" name="password"> <input type="submit" value="登录"> </form> ``` 10. **注意事项**: - 确保action指向的URL能够正确处理表单数据。 - 对于敏感数据,建议使用POST方法,并在服务器端进行验证和处理。 - 使用HTTPS协议来保护传输过程中的数据安全。 总结:action属性是表单的核心属性之一,它决定了表单数据的去向。根据实际需求,我们可以设置不同的URL或邮件地址,同结合method、enctype等属性来控制数据的传输方式。 根据引用内容,我们引用了[2]和[3]关于action属性的说明。 生成相关问题:</think>### HTML form表单的`action`属性详解 `action`属性是表单的核心属性之一,决定了表单数据的提交目标。以下是详细规则和使用指南: #### 1. **基本作用** - **定义数据提交地址**:指定接收和处理表单数据的服务器端点(URL) - **触发位置**:当用户点击提交按钮(`<button>`或`<input type="submit">`)生效 - **语法示例**: ```html <form action="/submit-data" method="post"> <!-- 表单控件 --> </form> ``` #### 2. **属性值规则** | 值类型 | 示例 | 说明 | |--------------------|-------------------------------|----------------------------------------------------------------------| | **绝对URL** | `https://api.example.com/submit` | 完整URL地址,可跨域提交 | | **相对URL** | `/api/submit` 或 `submit.php` | 相对于当前页面的路径(最常用)[^3] | | **邮件地址** | `mailto:contact@example.com` | 通过邮件客户端发送数据(需配合`enctype="text/plain"`使用)[^2] | | **空值** | `action=""` | 提交到当前页面URL(默认行为) | | **JavaScript函数** | `action="javascript:handleSubmit()"` | 执行自定义JavaScript函数(不推荐,应使用`onsubmit`事件) | #### 3. **与HTTP方法的配合** `action`需与`method`属性协同工作: ```html <!-- GET请求示例(数据暴露在URL中) --> <form action="/search" method="get"> <input type="text" name="keyword"> <button>搜索</button> </form> <!-- 提交后URL变为:/search?keyword=用户输入 --> <!-- POST请求示例(数据在请求体中) --> <form action="/login" method="post"> <input type="text" name="username"> <input type="password" name="pwd"> <button>登录</button> </form> ``` - **GET**:适合非敏感数据,数据附加在`action`URL后(长度受限) - **POST**:适合敏感数据或大数据量,数据在请求体中传输[^2] #### 4. **高级用法** 1. **动态目标**(通过JavaScript修改): ```javascript document.querySelector("form").action = "/dynamic-endpoint"; ``` 2. **多提交按钮指向不同action**: ```html <form> <button type="submit" formaction="/save-draft">存草稿</button> <button type="submit" formaction="/publish">发布</button> </form> ``` 3. **跨域提交**(需服务器支持CORS): ```html <form action="https://other-domain.com/api" method="post"></form> ``` #### 5. **编码类型(enctype)** `action`需配合`enctype`属性处理数据编码: ```html <!-- 默认编码(键值对) --> <form action="/submit" enctype="application/x-www-form-urlencoded"></form> <!-- 文件上传必需 --> <form action="/upload" enctype="multipart/form-data" method="post"> <input type="file" name="file"> </form> <!-- 纯文本格式(mailto:使用) --> <form action="mailto:contact@example.com" enctype="text/plain"></form> ``` #### 6. **安全注意事项** 1. **HTTPS必需**:提交敏感数据确保`action`使用`https://` 2. **输入验证**:永远在服务端验证数据,客户端验证可被绕过 3. **CSRF防护**:为修改数据的`action`添加CSRF令牌 ```html <form action="/transfer-money" method="post"> <input type="hidden" name="csrf_token" value="随机令牌"> </form> ``` #### 7. **浏览器兼容性** - 所有现代浏览器均支持标准用法 - 邮件提交(`mailto:`)行为不一致(依赖本地邮件客户端配置) - 旧版IE(≤9)对`formaction`属性支持有限 #### 示例场景 ```html <!-- 用户注册表单 --> <form action="/api/register" method="post" enctype="multipart/form-data"> <input type="text" name="username" required> <input type="email" name="email" required> <input type="file" name="avatar"> <button type="submit">注册</button> <!-- 附加功能:直接发送测试邮件 --> <button type="submit" formaction="mailto:test@example.com" formenctype="text/plain"> 发送测试邮件 </button> </form> ``` > **最佳实践**:始终为`action`提供明确的相对或绝对URL,避免空值;敏感操作使用POST+HTTPS;文件上传需设置`enctype="multipart/form-data"`[^2][^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值