AMP AMP -mustache在提交前显示成功消息



我正在开发一个表单在AMP中,在这个表单中,有一个注册的学生。用户(家长)将能够在同一注册中添加两个以上的学生。但是,当我单击添加另一个学生,并填写所有必需的表格时,amp-moustache在单击提交按钮之前显示成功消息。当用户添加新学生时,也需要该表单。
对不起,我的英语不好。



<script src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<!-- required fields -->
<div class="form-group">
<label for="" class="label-forms">Name 1: *</label>
<input name="" type="text" class="" required>
</div>
<br/>
<button id="add-2" class="button" hidden on="tap:e2.hide,add-2.hide,remove-2.show, AMP.setState({customvalue: ''})">Remove Name 2...</button>
<button id="remove-2" class="button" on="tap:e2.show,remove-2.hide,add-2.show, AMP.setState({customvalue: 'true'})">Add Name 2...</button>
<div id="e2" hidden>                                            
<input name="" type="text" class="" [required]="customvalue">                       
<div id="div-edu2" class="form-group">
<select name="" class="input-default" [required]="customvalue">
<option value="1" selected>A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
</div>

<button id="add-3" class="button" hidden on="tap:e3.hide,add-3.hide,remove-3.show, AMP.setState({customvalue2: ''})">Remove Name 3...</button> 
<button id="remove-3" class="button" on="tap:e3.show,remove-3.hide,add-3.show, AMP.setState({customvalue2: 'true'})">Add Name 3...</button>
<div id="e3" hidden>
<input name="" type="text" class="" [required]="customvalue2">
<div id="div-edu3" class="form-group">
<label class="label-forms" for="">Select 3: *</label>
<select name="" class="input-default" [required]="customvalue2">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</div>
</div>
</div>
</div>
<!-- ... -->

<div class="col-10 mx-auto">
<input type="submit" value="Send">
</div>

<div submit-success>
<template type="amp-mustache">
<p class="text-center">Success!</p>
</template>
</div>
<div submit-error>
<template type="amp-mustache">
<p class="text-center">Fail.</p>
</template>
</div>

IMG 1 - FORM

IMG 2 - ON点击添加按钮

IMG 3 - AMP MESSAGE

我简单地通过将html标记从<button>更改为<a></a>来解决这个问题。已经解决了,但是我仍然没有找到按钮问题的原因。

最新更新