Javascript HTML表单：将div设为提交按钮

我使用–

html/php/js/mysql

创建了一个包含文件夹结构层次结构的网页

因此，我创造了一个设计。它只是一个父div，包含

文件夹的
类
，在所有文件夹中都以
作为名称列出。通过
PHP
我将文件夹ID设置为每个文件夹div上的自定义属性：

<div class="folders">
   <div data-id="12452">
      <h2>Folder 1</h2>
   </div
   <div data-id="12453">
      <h2>Folder 2</h2>
   </div
   <div data-id="12454">
      <h2>Folder 3</h2>
   </div
</div>


文件夹1
您可以这样做，在父对象上添加一个单击处理程序，跟踪单击的子对象，并获取其
数据id

例如，您可以从那里将该url分配给
表单
，并使用
表单
的
提交（）方法发布该url

堆栈片段


document.querySelector（“.folders”）.addEventListener（'click'，函数（e）{
if（例如target.nexist（'div'）.dataset.id）{
var url=“mywebpage.com/index.php？folder=“+e.target.closest（'div'）.dataset.id；
console.log（url）；
//例如。
/*
var form=document.querySelector（'form'）；
form.action=url；
form.hidden_field.value=“某些值”；
表单提交（）；
*/
}
})

文件夹1
文件夹2
文件夹3
由于您使用的是jQuery，您可以附加一个简单的单击，如下面的代码片段所示

注意：如果您希望从
h2
到看起来像一个可点击的元素，那么在CSS规则中将光标更改为
指针
，如：

.folders h2 {
    cursor: pointer;
}


$（'.folders h2'）。单击（函数（）{
var folder_id=$（this.parent（）.data（'id'）；
//这一行只是为了记录而添加的
console.log（'？folder='+folder_id）；
//取消对以下行的注释，该行将以文件夹“id”作为参数重定向您
//location.href='？folder='+folder_id；
})
.h2文件夹{
光标：指针；
}

文件夹1
文件夹2
文件夹3
一个要考虑的事情是，如果有人编辑隐藏的表单并提交它，看看它们是否破坏了什么，或者更糟。这肯定可以处理一些聪明的PHP编码，但不会添加URL，它会设置它，对吗？