代码之家 › 专栏 › 技术社区 › josias

html表单:将div设为submit按钮

forms html jquery php javascript

-1

josias · 技术社区 · 6 年前

我已经创建了一个包含文件夹结构层次结构的网页,使用了 html/php/js/mysql 是的。

因此,我创造了一个设计。只不过是一个 class 属于 folders 在所有文件夹中都列出了 <h2> 作为名字。通过 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>

现在,我想当有人点击 folder one ,应在 url 是的。

所以基本上就是网址:

mywebpage.com/index.php ->'clicks folder' -> mywebpage.com/index.php?folder=12452

我有一些想法可以实现这一点,比如创建一个隐藏的表单,在单击文件夹div时用javascript提交,但我不太确定哪种方式是最好和最干净的。

我很感激你的帮助。

2 回复 | 直到 6 年前

Asons Oliver Joseph Ash 6 年前

您可以这样做,在父对象上添加一个click处理程序,跟踪单击的子对象,并获取其 data-id

从那里你可以指定网址给一个 form 然后用 形式 的 submit() 方法

堆栈段

document.querySelector('.folders').addEventListener('click', function(e) {
  if (e.target.closest('div').dataset.id) {
     var url = "mywebpage.com/index.php?folder=" + e.target.closest('div').dataset.id;
     
     console.log(url);
     
     // e.g.
     /*
       var form = document.querySelector('form');
       form.action = url;
       form.hidden_field.value = "some value";
       form.submit();     
     */
  }
})

<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>
<form id="the_form">
  <input type="hidden" name="hidden_field" value="">
</form>

Zakaria Acharki 6 年前

因为您使用的是jquery,所以可以附加一个简单的单击,如下面的代码片段所示。

注: 如果你想从 h2 若要使光标看起来像可单击的元素,请将光标更改为 pointer 在css规则中,例如:

.folders h2 {
    cursor: pointer;
}

$('.folders h2').click(function() {
  var folder_id = $(this).parent().data('id');

  //This line was added just for log purpose
  console.log('?folder=' + folder_id);

  //Uncomment the following line that will redirect you with folder "id" as parameter
  //location.href = '?folder=' + folder_id;
})

.folders h2 {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>