在Node和Express中使用帖子獲取DOM元素的類名或屬性

我有一個表單，我正在使用post進行提交。我可以檢索輸入值，但是我也想檢索窗體內的div的類名或屬性。在Node和Express中使用帖子獲取DOM元素的類名或屬性

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.??? }); 
});

來源

2016-08-24 Ron I

您需要截取表格的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>

來源

2016-08-24 23:14:44

DOM是客戶端，當你發佈表單隻字段的值都貼，沒什麼其他。要實現你正在嘗試做的事情，你可以創建一個隱藏字段來存儲你的類的值。

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

然後這將發送到表單發佈。

來源

2016-08-24 22:42:40 RedJandal

在Node和Express中使用帖子獲取DOM元素的類名或屬性

回答

相關問題