Hi,
like documentation said i’m usign convertToData function in order to convert form into a JSON object and then use that object as parameter of storeFormData function.
But everytime i’ve JSON object from convertToData empty. why?
That’s my JS :
import qrcode from './QrCode.js';
import $$ from 'dom7';
import Framework7 from 'framework7/framework7.esm.bundle.js';
// Import F7 Styles
import 'framework7/css/framework7.bundle.css';
// Import Icons and App Custom Styles
import '../css/icons.css';
import '../css/app.css';
// Import Cordova APIs
import cordovaApp from './cordova-app.js';
// Import Routes
import routes from './routes.js';
var app = new Framework7({
root: '#app', // App root element
id: 'com.app.levita.biglietto', // App bundle ID
name: 'Biglietto Da Visita', // App name
theme: 'auto', // Automatic theme detection
// App routes
routes: routes,
// Input settings
input: {
scrollIntoViewOnFocus: Framework7.device.cordova && !Framework7.device.electron,
scrollIntoViewCentered: Framework7.device.cordova && !Framework7.device.electron,
},
// Cordova Statusbar settings
statusbar: {
overlay: Framework7.device.cordova && Framework7.device.ios || 'auto',
iosOverlaysWebView: true,
androidOverlaysWebView: false,
},
on: {
init: function () {
var f7 = this;
if (f7.device.cordova) {
// Init cordova APIs (see cordova-app.js)
cordovaApp.init(f7);
}
},
},
});
$$(document).on('click', '#salvaContatto', function () {
var nome = $$('#nome').val();
var cognome = $$('#cognome').val();
var email = $$('#email').val();
var url = $$('#url').val();
var fisso = $$('#fisso').val();
var cellulare = $$('#cellulare').val();
var contatto = {
firstName: nome,
lastName: cognome,
email: email,
url: url,
workPhone: fisso,
cellPhone: cellulare
}
document.getElementById('qr_vcard').innerHTML = qrcode.createVCardQr(contatto, {
typeNumber: 15,
cellSize: 2
});
});
and that’s HTML :
<template>
<div class="page" data-name="home">
<!-- Top Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="title sliding">Biglietto Da Visita</div>
<div class="title-large">
<div class="title-large-text" style="text-align: center;">Biglietto Da Visita</div>
</div>
</div>
</div>
<!-- Scrollable page content-->
<div class="page-content">
<pre style="float: center;text-align: center;" id="qr_vcard"></pre>
<br>
<form class="list form-store-data no-hairlines-md" id="form1">
<ul>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Nome</div>
<div class="item-input-wrap">
<input id="nome" type="text" placeholder="Il tuo nome" />
</div>
</div>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Cognome</div>
<div class="item-input-wrap">
<input id="cognome" type="text" placeholder="Il tuo Cognome" />
</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 id="email" type="email" placeholder="E-mail" />
</div>
</div>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">URL</div>
<div class="item-input-wrap">
<input id="url" type="url" placeholder="URL" />
</div>
</div>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Numero Fisso</div>
<div class="item-input-wrap">
<input id="fisso" type="tel" placeholder="Numero Fisso" />
</div>
</div>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Cellulare</div>
<div class="item-input-wrap">
<input id="cellulare" type="tel" placeholder="Cellulare" />
</div>
</div>
</div>
</li>
</ul>
<a class="col button button-fill button-round stocazzo" id="salvaContatto">Crea QR Code</a>
</form>
</div>
</div>
</template>
<script>
export default {}
</script>