AMP: скрытая часть формы не имеет инициализированных или связанных значений
У меня есть страница AMP с формой, где некоторые элементы скрыты при загрузке страницы. Тем не менее, input type="text" значение "что-то" не сохраняется, когда отображается скрытая часть.
ТАКЖЕ, скрытые элементы формы должны быть дополнены AMP-BIND из показанных верхних элементов. Но когда скрытая часть видна, значения остаются пустыми.
Опция select... выбранные значения сохраняются, но не вводятся текстовые данные.
Я устал скрывать элементы с шириной CSS: 0px; высота: 0px; непрозрачность: 0; или показать: никому не повезло.
Есть ли способ сохранить ценность скрытых элементов формы?
Смотрите здесь https://codepen.io/iamalta/pen/bKYVpV
<!doctype html>
<html ⚡="" lang="en">
<head>
<meta charset="utf-8">
<title>Commerce</title>
<link rel="canonical" href="https://www.ampstart.com/templates/e-commerce/landing.amp">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" async></script>
<style amp-boilerplate="">body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate="">body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom="">
div, input {font-size:120%;margin-top:.5rem}
.ampstart-input {max-width: 100%;width: 100%;font-size: 1rem;line-height: 1.5rem}
.ampstart-input [disabled], .ampstart-input [disabled]+label {opacity: .5}
.ampstart-input [disabled]:focus {outline: 0}
.ampstart-input>input, .ampstart-input>select, .ampstart-input>textarea {width: 100%;margin-top: 1rem;line-height: 1.5rem;border: 0;border-radius: 0;border-bottom: 1px solid #4a4a4a;background: none;color: #000;outline: 0}
.ampstart-input>label {color: #000;pointer-events: none;text-align: left;font-size: 1.125rem;line-height: 1rem;opacity: 1;-webkit-animation: .2s;animation: .2s;-webkit-animation-timing-function: cubic-bezier(.4, 0, .2, 1);animation-timing-function: cubic-bezier(.4, 0, .2, 1);-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards}
.ampstart-input>input:focus, .ampstart-input>select:focus, .ampstart-input>textarea:focus {outline: 0}
.ampstart-input>input:focus::-webkit-input-placeholder, .ampstart-input>select:focus::-webkit-input-placeholder, .ampstart-input>textarea:focus::-webkit-input-placeholder {color:transparent}
.ampstart-input>input:focus::-moz-placeholder, .ampstart-input>select:focus::-moz-placeholder, .ampstart-input>textarea:focus::-moz-placeholder {color:transparent}
.ampstart-input>input:focus:-ms-input-placeholder, .ampstart-input>select:focus:-ms-input-placeholder, .ampstart-input>textarea:focus:-ms-input-placeholder {color:transparent}
</style>
</head>
<body>
<form method=post target="_top" action-xhr="https://example.com/thankyou.amp.html" custom-validation-reporting="show-all-on-submit" >
<h3>Billing Information</h3>
<div>
<label for="firstname" aria-hidden="true">First name</label>
<input
type="text"
value=""
name="firstname"
id="firstname"
placeholder="Billing First Name"
autocomplete="given-name"
required
on="input-debounced:AMP.setState({dfn: event.value})"
/>
</div>
<div>
<label for="lastname" aria-hidden="true">Last name</label>
<input
type="text"
value=""
name="lastname"
id="lastname"
placeholder="Billing Last name"
autocomplete="family-name"
required on="input-debounced:AMP.setState({dln: event.value})"
/>
</div>
<div class="relative mt1 p0 mb3 bold center">
<input type="checkbox" value="1"
name="billNEdest"
id="billNEdest"
class="borderlt"
on="change:AMP.setState({seb:event.checked})"
/>
<label for="billNEdest">Check to Ship to a Different Address</label>
</div>
<div hidden [hidden]="seb == true ? false : true ">
<h3>Destination Information</h3>
<div>
<label for="destfirstname" aria-hidden="true">First name</label>
<input
type="text"
value="Destiny"
name="destfirstname"
id="destfirstname"
placeholder="Destination First name"
autocomplete="given-name"
required
[value]="thisdfn != null ? thisdfn : dfn != null ? dfn : ''"
on="input-debounced:AMP.setState({thisdfn: event.value})"
/>
</div>
<div>
<label for="destlastname" aria-hidden="true">Last name</label>
<input
type="text"
value=""
name="destlastname"
id="destlastname"
placeholder="Destination Last name"
autocomplete="family-name"
required
[value]="thisdln != null ? thisdln : dln!=null ? dln : ''"
on="input-debounced:AMP.setState({thisdln: event.value})"
/>
</div>
</div>
<input type="submit" value="Submit" class="ampstart-btn">
</form>
</body></html>