• After updating WordPress to 5.7, forms stopped submitting. Error in index.js
    console—>
    index.js?ver=5.4:1 TypeError: Cannot read property ‘querySelector’ of null
    at a (index.js?ver=5.4:1)
    at Array.forEach (<anonymous>)
    at index.js?ver=5.4:1
    (anonymous) @ index.js?ver=5.4:1
    Promise.catch (async)
    f @ index.js?ver=5.4:1
    (anonymous) @ index.js?ver=5.4:1

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 18 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    What other plugins and theme do you use on the site?

    Thread Starter buildozzer

    (@buildozzer)

    Advanced AJAX Product Filters for WooCommerce
    Advanced Custom Fields
    Art WooCommerce Order One Click
    Checkout Manager for WooCommerce
    Classic Editor
    Contact Form 7
    WooCommerce
    WP File Manager
    Плагин для слабовидящих

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    Which one is the theme?

    Thread Starter buildozzer

    (@buildozzer)

    theme is custom, but it’s worked before update.

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    See Editing form template

    What content do you have in the Form tab panel?

    Thread Starter buildozzer

    (@buildozzer)

    [text* text-460 id:wpcf7-f92-o1 placeholder “ФИО”]
    [tel* tel-699 placeholder “Телефон”]
    [email* email-686 placeholder “Email”]
    [submit “Подобрать курс”]
    <span>Нажимая кнопку, я соглашаюсь на обработку персональных данных</span>

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    Try switching to the default theme and deactivating all plugins excluding Contact Form 7, Classic Editor, and WooCommerce.

    Why you are advised to deactivate plugins and switch to the default theme.

    Hi,
    I Have the same issue on contact form updated site.
    I have been using custom theme . Contact form works good on 5.3. but now it’s showing eeror when there is validation error. But validation message ‘one or more field have error’ is not showing now.But sucess message is showing correctly.When seaching many user have problem with latest update. can you tell me what will be cause error message not showing on form submit.

    Carl Rozema

    (@carlrozemaaxcintnl)

    Hi,

    I have the same problem. Even after deactivating all plugins except CF7 and switching to the default theme twentytwentyone still no response output. and the console error:

    TypeError: Cannot read property ‘querySelector’ of null
    at a (index.js?ver=5.4:1)
    at Array.forEach (<anonymous>)
    at index.js?ver=5.4:1

    It’s definitely an error in the latest update, i had to rollback to version 5.3.2.
    In my website the error happend after trying to submit an empty form.

    Reading the comments this issue does not look resolved. As I’m running into this issue aswell and I’m confused to find this marked as resolved.

    The only resolution I see here is to downgrade WordPress. Which is only a temporary fix.

    @contactform7
    Are you guys still working on this?

    Thread Starter buildozzer

    (@buildozzer)

    not resolved!

    I have the same error and also on submit if it is successful it is redirecting me to 404 page but the email is going to the right place.

    I am using a custom theme too.

    @edonbajrami have you some custom script for cf7 in your template? can we take a look @ your website?

    the errors mentioned above are fired by custom js, in the last week i’ve seen a lot of error like your and all comes from old themes… “Cannot read property ‘querySelector’ of null” means the javascript is looking for a dom element that is never been on the page (most of the time), removed (with js), pointing nothing.

    @buildozzer take a look at your javascript for example /wp-content/themes/farm/js/main.js?ver=1.0.0 line 137-153 + 180-194

    //// 11. Open Modal Thanks Form Submit
    const wpcf7Elm = document.querySelector('.wpcf7');
    
    wpcf7Elm.addEventListener(<code>wpcf7mailsent</code>, function (e) {
    .....
    //// 13. Validator Form CF7
    const inputName = jQuery('form input[type="text"]')
    
    inputName.change(function (e) {
        let colInput = this.value.length,
            idEl = this.id,
            $el = <code>#${idEl}</code>
    
        if (colInput < 20) {
            jQuery(<code>${$el} form input[type=&quot;submit&quot;]</code>).prop("disabled", true)
            jQuery(<code>${$el} form .wpcf7-response-output</code>).text('Введите корректное ФИО')
            jQuery(<code>${$el} form .wpcf7-response-output</code>).css({ 'display': 'block' })
        } else {
            jQuery(<code>${$el} form input[type=&quot;submit&quot;]</code>).prop("disabled", false)
            jQuery(<code>${$el} form .wpcf7-response-output</code>).text('')
            jQuery(<code>${$el} form .wpcf7-response-output</code>).css({ 'display': 'none' })
        }
    })

    We have tested this matter further and we can conform that this issue is resolved when using the latest version of WordPress (5.7.2) and Contactform 7 (5.4.1).

    For use the issue happened because we are using the Bootstrap for Contactform 7 plugin. If you are using this as well look at the pull requests on GitHub (https://github.com/felixarntz/bootstrap-for-contact-form-7/pull/62). The solution is there but the maintainer of the plugin is inactive so you have to patch manually.

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Issue after update’ is closed to new replies.