I'm using framework7.io. I'm using their framework events and functioning but the onclick event is not bind with their page event pageInit.

I'm try to access form Data and convert it to json using formTOJSON as shown below.

JS part

//on page in it if page load via ajax 
$$(document).on('pageInit', function() {

    /*========query form=======*/

    var queryForm = app.formToJSON('#query-form');
    $$('#query-submit').on('click', function () {
       console.log(JSON.stringify(queryForm));
    });

});

HTML part

<form id="query-form">
                    <div class="color-error" id="formErrorField" style="display: none;"></div>
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-input">
                                        <textarea name="question" placeholder="Type Here!"></textarea>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <br/>
                    <a href="#" class="button button-fill" id="query-submit">Submit</a>
                </form>

The same code is working for a different page load (non-ajax).

I'm using framework7.io. I'm using their framework events and functioning but the onclick event is not bind with their page event pageInit.

I'm try to access form Data and convert it to json using formTOJSON as shown below.

JS part

//on page in it if page load via ajax 
$$(document).on('pageInit', function() {

    /*========query form=======*/

    var queryForm = app.formToJSON('#query-form');
    $$('#query-submit').on('click', function () {
       console.log(JSON.stringify(queryForm));
    });

});

HTML part

<form id="query-form">
                    <div class="color-error" id="formErrorField" style="display: none;"></div>
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-input">
                                        <textarea name="question" placeholder="Type Here!"></textarea>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <br/>
                    <a href="#" class="button button-fill" id="query-submit">Submit</a>
                </form>

The same code is working for a different page load (non-ajax).

• javascript
• jquery
• ios
• html-framework-7
• event-binding

Share Follow asked Jun 20, 2016 at 6:02 Anurag JainAnurag Jain 45322 gold badges88 silver badges2121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Actually binding seems fine in your code.
Keep formToJSON code inside click event handle block try this:

$$(document).on('pageInit', function() {
    var queryForm = null;
    $$('#query-submit').on('click', function () {
     queryForm = app.formToJSON('#query-form');
       console.log(JSON.stringify(queryForm));
    });
});

Because when PageInit is happening your queryForm variable is empty according to your code.After filling the form you want to get value.So keep inside the click event handler. Hope this helps.