簡體   English   中英

指向快速路線的動態表格動作

[英]Dynamic form action pointing to Express route

我一直試圖在我的nodejs應用程序中創建一個HTML表單,該表單在提交時會定向到適當的快遞路線。 這個答案 ,我得到了下面的解決方案:

<script>
$('#controlPanel').submit(function(event) {
  var view = document.getElementsByName('selectView').value;
  var date = document.getElementsByName('selectDate')
    .value
    .toISOString()
    .slice(0, 10);
  var action = "/".concat(view).concat("/").concat(date);
  $(this).attr('action', action);
});
</script>

但是,問題是,無論我使用哪種構成要素的方法和函數,生成的動作字符串都是錯誤的。

而不是類似“ http://example.page/month/2018-01-01
我得到類似“ http://example.page/?selectView=month&selectDate=2018-01-01 ”的內容

我該怎么做才能確保動態動作符合前面的示例?

編輯:所使用的HTML(也將周圍的腳本html標簽附加到上面的代碼中):

<form id="#controlPanel">
  View:<select name="selectView">
    <option value="year">Year</option>
    <option value="month">Month</option>
    <option value="week">Week</option>
    <option value="day">Day</option>
  </select><br/>
  Date: <input type="date" name="selectDate" min="2007-01-01"><br/>
  <input type="submit" value="Submit">
</form>

發現了一些嘗試解決此問題的方法:
由於未知原因,使用attr()無效。
嘗試將方法設置為POST會導致異常(是的,即使我對路由器進行了更改以使路由使用POST)。
使用GET仍然會使GET參數帶有? 分隔符在最后,但是盡管如此,路由仍按預期運行。

對於其他嘗試做類似事情的人,我最終得到了解決方案:

<script>
 document.addEventListener("DOMContentLoaded", function () {
   document.getElementById("#controlPanel").addEventListener("submit", function(event) {
     event.preventDefault();
     var view = document.getElementsByName('selectView')[0].value;
     var date = document.getElementsByName('selectDate')[0].value !== "" ? document.getElementsByName('selectDate')[0].value.slice(0, 10) : "";
     var action = "/".concat(view).concat("/").concat(date);
     document.getElementById("#controlPanel").action = action;
     document.getElementById("#controlPanel").submit();
   });
 });
</script>

HTML的唯一相關位:

<form id="#controlPanel" method="get" action="">

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM