clear dropdown select2 fields after post submission

  • Resolved philipbutlerfreelance

    (@philipbutlerfreelance)


    2 years, 11 months ago

    Hi,
    I’ve come across one slight problem that I’m hoping you can help me out with. The form is working brilliantly, the only thing is that the dropdown fields (being populated by Map form fields to post taxonomy) using Select2 are not cleared after the form is submitted.
    I’ve tried

    document.addEventListener( 'wpcf7submit', function( event ) {
	$( 'form.wpcf7-form' )[0].reset();
}, false );

    which triggers (tested by adding an alert) but does not clear the dropdown select2 fields.

    Any suggestions?

    Cheers,
    Philip

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Aurovrata Venet

    (@aurovrata)

    jQuery reset() will work on HTML form fields value attributes and the select2 dropdown actually value will be cleared. However, dropdown displayed <option> element in the field select may still persist due to page caching on the browser, hit ctrl + f5 to clear the cache and you should see your fields cleared.

    If you need to clear the fields clean post submission (so that a user can immediately submit another set of values) then you will want to use the select2 clearing controls to achieve this.

    Thread Starter philipbutlerfreelance

    (@philipbutlerfreelance)

    [EDIT}
    Ha! Thanks for that, I’ve been looking at the select2 docs all morning and managed to figure it out.

    	document.addEventListener( 'wpcf7submit', function( event ) {
		$('.wpcf7-select').val(' ').trigger("change");

	}, false );

    I was having problems initially with
    $('.wpcf7-select').val(null).trigger("change");
    as it would clear the field and replace it with the select2 default value of ‘—‘

    Adding the space in the val(‘ ‘) fixed the problem

    Plugin Author Aurovrata Venet

    (@aurovrata)

    great. marking this as resolved then.

    Thread Starter philipbutlerfreelance

    (@philipbutlerfreelance)

    Just to clarify, I was using the cf7 DOM event ‘wpcf7submit’ for testing as this fires whether the form is complete or not. for production you should use ‘wpcf7mailsent’ 

    document.addEventListener( 'wpcf7mailsent', function( event ) {
		console.log ('form submitted');
		$('.wpcf7-select').val(' ').trigger("change");

	}, false );
    Plugin Author Aurovrata Venet

    (@aurovrata)

    indeed, good point to clarify for other users ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘clear dropdown select2 fields after post submission’ is closed to new replies.