Hi there,
I would like to use form script on framework7 app.
I have my form on a page displayed by route.js
I have my javascript action on route.js
When I click on button, the alert is displayed two times, I don’t know why.
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>