I have integrated a form within an iScroll4 scroller. The form is an ajax form created using the Gravity Forms plugin in WordPress.
After submitting the form, I noticed that the height of the iScroll remains the same as it was generated on page load. This causes an issue where if the form extends beyond the initial height, users are unable to scroll down completely.
Please find my code snippet below...
var myScroll,
myScrollSidebar;
function loaded() {
myScroll = new iScroll('wrapper');
myScrollSidebar = new iScroll('sidebar-wrapper');
}
var formInputs = [
document.getElementById('gform_submit_button_1'),
document.getElementById('input_1_1'),
document.getElementById('input_1_2'),
document.getElementById('input_1_3'),
document.getElementById('input_1_4'),
document.getElementById('input_input_1_5')
];
for(var i = 0; i < formInputs.length; i++) {
formInputs[i].addEventListener('touchstart' /*'mousedown'*/, function(e) {
e.stopPropagation();
}, false);
}
jQuery(document).bind('gform_page_loaded', function(){
var formInputs = [
document.getElementById('gform_submit_button_1'),
document.getElementById('input_1_1'),
document.getElementById('input_1_2'),
document.getElementById('input_1_3'),
document.getElementById('input_1_4'),
document.getElementById('input_input_1_5')
];
for(var i = 0; i < formInputs.length; i++) {
formInputs[i].addEventListener('touchstart' /*'mousedown'*/, function(e) {
e.stopPropagation();
}, false);
}
});
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
I am seeking assistance to rectify this issue whereby the height of iScroll can refresh upon form submission.
The jQuery binded is to ensure that the form inputs function properly after the form is submitted, as iScroll4 encounters difficulties with form elements.
Thank you in advance.
Josh