Отправить форму после обновления значения в Google AMP

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>

Подходит ли это для вашего варианта использования? Или в вашей форме было что-то еще, что вам не подходит?