How to get the input's data in Framework7?

Question

I am use Framework7 in cordova, my requirement is like this below:

[![enter image description here][1]][1]

As you see, I want to storage my inputs' value from the form:

In my my-app.js:

// Initialize your app
var myApp = new Framework7();

// Export selectors engine
var $$ = Dom7;

// Add views
var view1 = myApp.addView('#view-1');
var view2 = myApp.addView('#view-2', {
    // Because we use fixed-through navbar we can enable dynamic navbar
    dynamicNavbar: true
});
var view3 = myApp.addView('#view-3');
var view4 = myApp.addView('#view-4');


var ptrContent = $$('.pull-to-refresh-content');




$$('.save-storage-data').on('click', function() {
    var storedData = myApp.formStoreData('my-info-form', {
                                     'name': 'John', // this value should be the input's value, I just write for test here
                                     'address':'address',  // this value should be the input's value, I just write for test here
                                     'page':'page',  // this value should be the input's value, I just write for test here
                                     'tel':'139',  // this value should be the input's value, I just write for test here
                                     'email': '[email protected]',  // this value should be the input's value, I just write for test here
                                     'gender': 'female',  // this value should be the input's value, I just write for test here
                                     'isAcceptPushNotification': ['yes'],  // this value should be the input's value, I just write for test here
                                     'birthday': ''  // this value should be the input's value, I just write for test here
                                     });
    alert('success')
});

As you see the $$('.save-storage-data').on('click', function() function is what I want, I want to save the form information to my app.

Additionally, I should judge if all the inputs is filled with value, then save data.

Answer 1

Let's loop through all form input fields and check if all of them are filled before saving:

$$('.save-storage-data').on('click', function() {

    $$('.save-storage-data input').each(function(i, obj) {
        if (!$$(this).val()) {
           myApp.alert("Please fill all the required fields.");
           return false;
        }
    });

    var storedData = myApp.formStoreData('my-info-form', {
                                     'name': 'John', // this value should be the input's value, I just write for test here
                                     'address':'地址',  // this value should be the input's value, I just write for test here
                                     'page':'page',  // this value should be the input's value, I just write for test here
                                     'tel':'139',  // this value should be the input's value, I just write for test here
                                     'email': '[email protected]',  // this value should be the input's value, I just write for test here
                                     'gender': 'female',  // this value should be the input's value, I just write for test here
                                     'isAcceptPushNotification': ['yes'],  // this value should be the input's value, I just write for test here
                                     'birthday': ''  // this value should be the input's value, I just write for test here
                                     });
    alert('保存成功')
});