0

在这里，我对选择框进行了排序，并在选择框的更改、第一次设置隐藏值状态和第二次提交表单时执行了 2 个事件。

我需要提交具有更新的隐藏排序值的表单，但是，每次我更改选择框表单时都可以提前提交，然后更新隐藏值。

所以，我需要延迟提交表单或在隐藏值更新后提交表单。

你能指导我怎么做吗？

<amp-state id="sorting">
    <script type="application/json">
    { 
       "date_desc" : { "text" : "Most Recent", "type" : "desc", "by" : "date" },
       "year_asc" : { "text" : "Year Ascending", "type" : "asc", "by" : "year" },
       "year_desc" : { "text" : "Year Descending", "type" : "desc", "by" : "year" },
    }
    </script>
</amp-state>

<form target="_top" action="/amp/search" id="search" novalidate="" class="i-amphtml-form">
     <input value="desc" type="hidden" name="search[order_type]" [value]="sorting[sort || ''].type" id="search_order_type">
     <input value="top" type="hidden" name="search[order_by]" [value]="sorting[sort || ''].by" id="search_order_by">
</form

<select id="listing" name="listing" on="change:AMP.setState({sort:event.value}),search.submit">
    <option value="date_desc">Most Recent</option>
    <option value="year_asc">Year Ascending</option>
    <option value="year_desc">Year Descending</option>
</select>
4

1 回答 1

1

与在客户端管理此状态不同，将<select>值发送到服务器可能更容易，然后使用服务器代码从<select>值中提取类型和顺序。

// This is an express sample, but you could apply
// the concept to any server technology.

app.post('/amp/search', (req, res) => {
  /* ... */

  let type, by;
  if (req.body.listing === 'date_desc') {
    by = 'date';
    type = 'desc';
  } else if (req.body.listing === 'year_asc') {
    by = 'year';
    type = 'asc';
  } else if (req.body.listing === 'year_desc') {
    by = 'year';
    type = 'desc';
  } else {
    // error
  }
  
  /* render the sorted table response */
});
<form target="_top" action="/amp/search" id="search" novalidate="">
     <select id="listing" name="listing" on="change:search.submit">
         <option value="date_desc">Most Recent</option>
         <option value="year_asc">Year Ascending</option>
         <option value="year_desc">Year Descending</option>
     </select>
</form>

这适合您的用例吗？或者您的表格中是否还有其他需要而这不做的东西？

于 2017-08-07T21:49:01.700 回答