Beginner: Form doesn't show up

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 :slight_smile:

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);
});

Have you checked your console, perhaps something is not defined

1 Like

Yes,
register.f7.html:30 Uncaught ReferenceError: $$ is not defined
at eval (register.f7.html:30)
at Module…/src/pages/register.f7.html (app.js:4965)
at webpack_require (app.js:726)
at fn (app.js:101)
at eval (routes.js:11)
at Module…/src/js/routes.js (app.js:4845)
at webpack_require (app.js:726)
at fn (app.js:101)
at eval (app.js:11)
at Module…/src/js/app.js (app.js:4821)

but i have "import $$ from dom7; in the app.js

Look at your app.js carefully, the single quotes are not quite rendered correctly when you pasted the code. Your IDE should have reported it.

I just cleaned it up for you
here is the fix for you https://jsfiddle.net/kawisoft/gmw2b8p6/6/

2 Likes

Okay, i fixed it now, but i can’t click on the button somehow.

which button? if you test my fiddle you will see that you can click both form buttons. just copy the code and you should be fine

1 Like

Sorry, forgot something, thank you really much for your help :slight_smile: