Hello, i wanted to make a register page as a form. I used this example https://framework7.io/docs/form.html#form-data-example.
When I insert these two functions in my app.js nothings shows up, i can only see my colored blackground nothing else. What did I do wrong? Thanks for your help
My Page:
<template>
<div class="page" data-name="register">
<div class="page no-navbar no-toolbar no-swipeback">
<div class="page-content login-screen-content">
<form class="list" id="my-form">
<ul>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Name</div>
<div class="item-input-wrap">
<input type="text" name="name" placeholder="Your name">
</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">
</div>
</div>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Gender</div>
<div class="item-input-wrap">
<select name="gender">
<option value="male" selected>Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Toggle</div>
<div class="item-after">
<label class="toggle toggle-init">
<input type="checkbox" name="toggle" value="yes"><i class="toggle-icon"></i>
</label>
</div>
</div>
</div>
</li>
</ul>
</form>
<div class="block block-strong row">
<div class="col"><a class="button convert-form-to-data" href="#">Get Data</a></div>
<div class="col"><a class="button fill-form-from-data" href="#">Fill Form</a></div>
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
and added this on app.js at the bottom:
$$(’.convert-form-to-data’).on(‘click’, function(){
var formData = app.form.convertToData(’#my-form’);
alert(JSON.stringify(formData));
});
$$(’.fill-form-from-data’).on(‘click’, function(){
var formData = {
‘name’: ‘John’,
‘email’: ‘[email protected]’,
‘gender’: ‘female’,
‘toggle’: [‘yes’],
}
app.form.fillFromData(’#my-form’, formData);
});