Submit Form after value update in Google AMP

Question

Here i have sorting select box and i performed 2 events on change of select box, first set state of hidden value and second submit form.

I need to submit form with updated hidden value of sorting but, everytime i changed select box form can be submitted early then update hidden value.

So, I need delay on submit form or submit form after hidden value update.

Can you guide me how can i do this?

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

Is there a particular reason why you can't simply put the select into the form instead of using amp-bind? — Sebastian Benz, Aug 04 '17 at 12:22
I understand that - but selecting a new value will submit the form. If you put the select inside the form, the selected value will also be send to the server. — Sebastian Benz, Aug 04 '17 at 13:24
We can't because both scenario are different, form is concern with the searching functionality also. — GuRu, Aug 04 '17 at 13:28
`$('#search #search_order_type').val('asc'); $('#search #search_order_by').val('year'); $('#search_submit').click();` In Jquery works because that execute one by one in order So, there is way in amp to process in order? — GuRu, Aug 04 '17 at 13:37

score 1 · Answer 1 · answered Aug 07 '17 at 21:49

Instead of managing this state on the client side, it might be easier to send the <select> value to the server, then use the server code to extract the type and order from the <select> value.

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

Does this fit your use case? Or was there something else you need in your form that this doesn't do?

Submit Form after value update in Google AMP

1 Answers1