我想在framework7应用程序上使用表单脚本。 我将表单放在route.js显示的页面上 我在route.js上执行了JavaScript操作
当我单击按钮时,警报会显示两次,我不知道为什么。
这是我的Route.js:
{
path: '/contact_catalogue/',
url: './pages_pro/contact_catalogue.html',
on: {
pageInit: function (e, page) {
$$('.convert-form-to-data').on('click', function(){
var formData = app.form.convertToData('#my-form');
alert(JSON.stringify(formData));
});
},
},
},
这是我的contact_catalogue.html:
<div class="page" data-name="contact_catalogue">
<form class="list form-store-data" id="my-form" name="my-form" autocomplete="off">
<ul>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Mr/Mme</div>
<div class="item-input-wrap">
<select name="gender">
<option value="male" selected>Mr</option>
<option value="female">Mme</option>
</select>
</div>
</div>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Nom</div>
<div class="item-input-wrap">
<input type="text" name="name" placeholder="Votre nom" autocomplete="off">
</div>
</div>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">E-mail</div>
<div class="item-input-wrap">
<input type="email" name="email" placeholder="E-mail" autocomplete="off">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Demande de catalogue</div>
<div class="item-after">
<label class="toggle">
<input type="checkbox" name="switch" value="yes" id="switch" selected><i class="toggle-icon"></i>
</label>
</div>
</div>
</div>
</li>
</ul>
</form>
<div class="block block-strong row no-margin">
<div class="col-25"></div>
<div class="col"><a class="button convert-form-to-data" id="test" href="#">Envoyer</a></div>
<div class="col-25"></div>
</div>
谢谢您的帮助,
答案 0 :(得分:0)
检查pageInit
是否由于某些原因两次触发
或尝试
pageInit: function (e, page) {
$(page.$el).on('click', '.convert-form-to-dat', function(){
// do stuff
})
},