Форма отправки перенаправить на новый URL с AMP-HTML - PullRequest
Новая
       11

Форма отправки перенаправить на новый URL с AMP-HTML

0 голосов
/ 29 августа 2018

У меня есть простая проблема, но ее невозможно решить в AMP !!

У меня есть простой form с input и submit button, например: 

<form id="myform">
     <input type="text" id="srchInput"/>
     <button type="submit">Submit</button>
</form>

Все, что я хочу, - это иметь возможность объединить статический URL-адрес со значением ввода и перенаправить страницу к результату при отправке формы.

Например, если пользователь вводит: "Hello" и отправляет форму, я бы хотел перенаправить его на страницу типа "MY/STATIC/URL/Hello".

Есть ли способ добиться этого в усилителе?

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

Самый простой способ сделать это с помощью действия GET: 

 <head>
  ...
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
 </head>
 <body>
 <form method="GET" action="MY/STATIC/URL" target="_top">
   <input type="text" id="srchInput" name="srcInput" value="test">
   <button type="submit">Submit</button>
 </form>
 </body>

Форма отправки перейдет к /MY/STATIC/URL?srcInput=test.

0 голосов
/ 30 августа 2018

Один из способов сделать это - установить заголовок AMP-Redirect-To в ответе ( См. AMP-form-redirection ). Отправьте пользовательский ввод при отправке формы, а затем сгенерируйте нужный URL-адрес из конечной точки API и установите заголовок AMP-Redirect-To в своем ответе на сгенерированный URL.

Еще один способ сделать это - использовать действие navigateTo(url=STRING) ( См. AMP Actions & Events ) для события отправки формы. В этом случае вы должны сохранить значение на входе в состояние, используя такие события, как input-throttled, а затем использовать подстановку URL-адреса в строке URL-адреса navigateTo для добавления значения amp-состояния.

Первый метод гарантированно работает. Второй метод должен работать теоретически, но я не смог понять, как получить значение AMP-STATE путем замены URL. Код для того же должен быть что-то вроде: 

<form id="myform" on="submit:AMP.navigateTo(url="MY/STATIC/URL/AMP_STATE(endValue)>")">

     <input type="text" id="srchInput" on="input-throttled:AMP.setState({ endValue : event.value })" />

     <button type="submit"> Submit </button>

</form>

Если вы можете выяснить, как заменить значение amp-state на URL, это должно сработать. Дайте мне знать, если это помогло.

...