WP Customizer. How to set a value using javascript.

  • I am trying to find a way to send a value between 2 setting fields inside of the wordpress customizer.

    My further goal is to create a preset button. I click a button inside of the customizer, and it applies pre-created values to all the other fields.

    To make it easier, here is a basic example:

    I have 2 option fields inside of WP customizer.
    When I change the value of field 1, I would like that field 2, automatically updates to that value as well.

    theme-customizer.js

    // Field 1
    	wp.customize( 'field1', function( value ) {
    		value.bind( function( newval ) {
    				//no need to make any css changes with this field.
    		} );
    	} );	

	// Field 2
    	wp.customize( 'field2', function( value ) {
    		value.bind( function( newval ) {
    			$('.site-container').css('border-style', newval +'px' );
    		} );
    	} );

    Is there away that I could update the value of field2 when field1 is clicked?

    For example:

    
    // Field 1
    	wp.customize( 'field1', function( value ) {
    		value.bind( function( newval ) {
    				wp.customize.value( 'field2 )(newval);//Setting the new value.
    		} );
    	} );

    This does work on the live preview, but the new value of field2 is not being saved when I click save.
    It seems the value is not being put through to PHP when using

    wp.customize.value( 'field2 )(newval);

    • This topic was modified 8 years, 6 months ago by Liddika.
    • This topic was modified 8 years, 6 months ago by Liddika.
Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    I don’t have a lot of knowledge of the inner workings of the Customizer, but I believe the value.bind() method is strictly for affecting the preview, it does not affect the actual customizer fields. I think to affect other customizer fields you need to fall back to basic JavaScript and jQuery. In the wp.customize() callback function for ‘field1’, either before or after value.bind(), add something like this:
    $('#customize-control-field2 input').val( value.val());

    My example is probably wrong in many ways, the selector might be wrong, and value.val() is a wild guess, I’ve no idea what the structure of value is. The idea is to simply set the field2 input value to that of field1 using normal jQuery.

    You could even get farther removed from customizer JS if need be. Bind an onchange event handler to field1 that sets the same value to field2 using normal jQuery. Approach the problem as a normal HTML form where one value is reflected in another field. Forget that it’s a customizer form.

    • This reply was modified 8 years, 6 months ago by bcworkz.
Viewing 1 replies (of 1 total)
  • The topic ‘WP Customizer. How to set a value using javascript.’ is closed to new replies.