Material Design overrides select form element from CF7 preselected with JS

  • Resolved oliversaar

    (@oliversaar)


    3 years ago

    Hi, we are prefilling a Contact Form 7 form from local storage with javascript which works, but after using the Material Design shortcodes the selection is gone.

    I can see the right selection for a short time until MD is initialized.

    I tried
    $("myselect").find("option[value='test']").prop('selected', 'selected');
    and also
    $("myselect").val('test');
    but it seems selecting the form elements with JS in general does not work that way.

    What is the best way to preselect a CF7-formelement that it works with Material Design?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author GusRuss89

    (@gusruss89)

    3 years ago

    Hi @oliversaar

    The second option should work, you’ll just need to make sure it runs after material design initializes.

    The material design JS runs like this:

    jQuery(document).ready(function() {
	window.cf7mdInit();
});

    Unfortunately no global event is emitted to listen on, but you could make sure your js runs after this by doing something like this:

    jQuery(document).ready(function() {
    setTimeout(function() {
        // your js here
    }, 1);
});

    Thanks,
    Angus

    Thread Starter oliversaar

    (@oliversaar)

    3 years ago

    Okaaaay. Yes, this seems to work! Hopefully always on every browser also with low internet connection speed 🙂

    Thank you Angus!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Material Design overrides select form element from CF7 preselected with JS’ is closed to new replies.