Question

这里我有排序选择框，我在更改选择框时执行了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>

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

这适合您的使用案例吗？或者你的表单中还有其他你不需要的东西吗？

在Google AMP中更新价值后提交表单

1 个答案: