Google AMPで値を更新した後にフォームを送信

Question

ここでは選択ボックスをソートしています。選択ボックスを変更すると2つのイベントが実行され、最初に隠し値の状態と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>

これはあなたのユースケースに合わせていますか？それともあなたのフォームに必要なものがありましたか？