node.js - 在 Node 和 Express 中使用 post 获取 DOM 元素的类名或属性

Question

我有一个使用邮寄方式提交的表格。我可以检索输入值，但我还想检索表单中 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>

Node/ express :

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

Answer 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>