在 Node 和 Express 中使用 post 获取 DOM 元素的类名或属性答案

【问题标题】：Getting a classname or attribute of a DOM element using post in Node and Express在 Node 和 Express 中使用 post 获取 DOM 元素的类名或属性
【发布时间】：2016-08-24 22:38:37
【问题描述】：

我有一个使用 post 提交的表单。我可以检索输入值，但我也想检索表单中 div 的类名或属性。

html:

<form method='post' action='/formResult'>
  <input type='text' name='someInput' />
  <div class="stateAlpha" customAttr="alpha"></div> <!-- want 'alpha' -->
  <button type="submit" class="btn btn-default">Submit</button>
</form>

节点/快递：

router.post('/formResult', function(req, res, next){
  res.render('formResult', { someInput: req.body.someInput, someState: req.body.??? });
});

【问题讨论】：

标签： node.js express

【解决方案1】：

您需要拦截表单的submit 事件，并将类信息放入隐藏字段。在纯 JavaScript 中：

<form method='post' class='myForm' action='/formResult'>
  <input type='text' name='someInput'>
  <input type='hidden' name='state'>
  <div class="stateAlpha" customAttr="alpha"></div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
<script>
  document.querySelector('.myForm').addEventListener('submit', function(evt) {
    var alpha = evt.target.querySelector('[customAttr="alpha"]');
    var hiddenState = evt.target.querySelector('[name="state"]');
    hiddenState.value = alpha.classList.join(' ');
  });
</script>

请注意，我在表单中添加了一个类，并使用它来选择表单；那是因为您可能在页面上有多个表单，并且您想要选择正确的一个。另请注意，在submit 侦听器中，我不使用document 作为我选择的基础，而是使用evt.target；那是因为您的文档中的其他地方可能有带有 customAttr='alpha' 的元素。

一旦我有了你想要识别的类的div，我得到隐藏的input元素，并将它的value属性设置为div的类列表（记住任何元素都可以有更多比一个类，所以classList 是一个数组，我只是使用空格加入）。

如果你使用 jQuery，它会变得更短：

<form method='post' class='myForm' action='/formResult'>
  <input type='text' name='someInput'>
  <input type='hidden' name='state'>
  <div class="stateAlpha" customAttr="alpha"></div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
<script>
  $(document).ready(function() {
    $('.myForm').on('submit', function() {
      var $alpha = $(this).find('[customAttr="alpha"]');
      $(this).find('[name="state"]')
        .val($alpha.get(0).classList.join(' '));
    });
  });
</script>

【讨论】：

【解决方案2】：

DOM 是客户端的，当您发布表单时，只会发布字段的值，没有其他内容。为了实现你想要做的事情，你可以创建一个隐藏字段来存储你的类的值，就像这样。

<input type="hidden" value="stateAlpha" name="myFieldName" />

然后这将在表单中发送。

【讨论】：