如果在web表单中,存在多个提交按钮,当点击其中的一个之后,怎么在js中获取到你所点击的那个按钮
时间: 2024-03-18 14:39:52 浏览: 17
你可以使用`event.target`来获取到你所点击的按钮元素。当点击其中一个按钮时,会触发一个事件,事件对象会作为参数传递给事件处理函数。在事件处理函数中,可以使用`event.target`来获取到触发事件的元素,从而获取到你所点击的按钮。以下是一个示例代码:
```javascript
document.querySelectorAll('button[type=submit]').forEach(function(btn) {
btn.addEventListener('click', function(event) {
console.log(event.target); // 输出你所点击的按钮元素
});
});
```
这个代码会选择所有类型为`submit`的按钮,并为它们添加一个点击事件处理函数。当点击其中一个按钮时,事件处理函数会输出你所点击的按钮元素。
相关问题
创建一个ASP.Net Core 6.0 Web App with Razor Page,包含两个表单按钮,点击按钮后,分别打开Page1和Page2
好的,我理解你的要求了。基于ASP.Net Core 6.0 Razor Pages,我们可以简单地创建一个包含两个表单按钮且能够跳转到不同页面的Web应用程序。下面是具体的步骤:
首先,打开Visual Studio 2022或更高版本,创建一个新的ASP.Net Core Web应用程序项目并选择Razor Pages模板。在创建项目时,需要选择.NET 6.0作为目标框架。在创建完毕后,打开Pages目录下的Index.cshtml文件,添加以下代码:
```html
<form method="post">
<button name="page" value="page1">打开Page1</button>
<button name="page" value="page2">打开Page2</button>
</form>
```
上面的代码创建了两个表单按钮,并为它们分别设置了名称和值。当用户点击其中一个按钮时,它们将以POST方式提交表单,并且会在请求正文中包含一个名为“page”的参数,该参数的值为用户选择的页面名称(page1或page2)。
接下来,在Index.cshtml.cs文件中添加以下代码:
```csharp
public IActionResult OnPost(string page)
{
if (page == "page1")
{
return RedirectToPage("Page1");
}
else if (page == "page2")
{
return RedirectToPage("Page2");
}
else
{
return Page();
}
}
```
这段代码处理了POST请求,并根据用户选择的页面名称重定向到相应的页面。如果用户没有选择任何页面或选择的页面名称不正确,则仍然呈现当前页面。
最后,在Pages目录下创建两个新的Razor Page:Page1.cshtml和Page2.cshtml。这些页面可以使用Razor语法和HTML/CSS/JavaScript来自定义。例如,在Page1.cshtml文件中添加以下代码:
```html
<h1>Page 1</h1>
<p>欢迎来到Page 1!</p>
```
在Page2.cshtml文件中添加以下代码:
```html
<h1>Page 2</h1>
<p>欢迎来到Page 2!</p>
```
现在,我们已经创建了一个包含两个表单按钮的ASP.Net Core 6.0 Razor Pages Web应用程序,并且可以在用户点击按钮后分别打开Page1和Page2。当然,你可以根据自己的需求自定义更多的页面和功能。
按钮点击返回按钮上面的值
这个问题比较抽象,需要更多的信息来确定具体的解决方案。以下是一些可能的解决方案:
1. 如果您是在编写一个表单或交互式应用程序,您可以在每个按钮上添加一个唯一的值或ID,并在点击按钮时将该值或ID保存到变量中。当用户点击返回按钮时,您可以使用该变量来确定上一次点击的按钮是哪个。
2. 如果您正在编写一个Web应用程序,您可以使用JavaScript的history API来跟踪历史记录,并在返回按钮点击时获取上一个页面的URL或状态。
3. 如果您正在编写一个移动应用程序,您可以使用框架或库提供的导航机制来跟踪页面历史记录,并在返回按钮点击时获取上一个页面的状态或数据。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)