Come pre-popolare i campi nello stesso modulo

Siete interessati a pre-popolare i campi del vostro modulo con i valori di altri campi all'interno dello stesso modulo? Con JavaScript è possibile farlo. In questa guida vi guideremo attraverso il processo di creazione del vostro modulo e di incorporazione di uno snippet che estrarrà il campo Nome dalla prima pagina del modulo e popolerà automaticamente il campo Nome nella seconda pagina dello stesso modulo.

Creazione del modulo

Per questa esercitazione, creeremo un modulo a più pagine che avrà un campo Nome in entrambe le pagine del modulo.

Se avete bisogno di assistenza per creare un modulo a più pagine, consultate questa documentazione.

Pre-popolazione dei campi

Per pre-popolare i campi nello stesso modulo, dobbiamo aggiungere questo snippet al nostro sito.

Se avete bisogno di assistenza su come e dove aggiungere gli snippet al vostro sito, consultate questo tutorial.

/**
 * Populate fields in the same form
 *
 * @link https://wpforms.com/developers/how-to-pre-populate-fields-in-the-same-form/
 */

function wpf_dev_name_change() {
    ?>
    <script>
        jQuery(function($){

			// Define form and field IDs
			var formID = 1386;
            var nameField1 = 0; // ID of the field to grab name from
            var nameField2 = 13; // ID of the field to pass value to

			// Check if form and fields exist before manipulating
			if ($('#wpforms-' + formID).length && $('#wpforms-' + formID + '-field_' + nameField1).length && $('#wpforms-' + formID + '-field_' + nameField2).length) {
				// Update value for nameField2 when nameField1 changes
				$('#wpforms-' + formID + '-field_' + nameField1).on('change', function() {
					$('#wpforms-' + formID + '-field_' + nameField2).val($(this).val());
				});
			} else {
				console.error('Form or field does not exist.');
			}

        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_name_change', 10 );

Lo snippet di cui sopra verrà eseguito solo sul modulo ID 1072 e prenderà il valore immesso nel primo campo Nome, che è l'ID del campo 1, e pre-popolerà il secondo campo Nome nella seconda pagina del modulo, che è l'ID del modulo 16.

È necessario aggiornare questi ID in modo che corrispondano agli ID del modulo e dei campi. Se avete bisogno di aiuto per trovare questi ID, consultate questo tutorial.

E questo è tutto ciò di cui avete bisogno! Volete saperne di più sull'uso delle stringhe di query per ottenere questo risultato? Consultate il nostro tutorial su Come usare le stringhe di query per pre-popolare i campi di un modulo da un altro modulo.

Azione di riferimento

wpforms_wp_footer_end

FAQ

D: Posso aggiungere più campi in una sola funzione?

R: È possibile aggiungere tutti i campi che si desidera all'interno di questa funzione. Ad esempio, è possibile pre-popolare i campi Nome, Email e Telefono.

/**
 * Populate fields in the same form
 *
 * @link https://wpforms.com/developers/how-to-pre-populate-fields-in-the-same-form/
 */

function wpf_dev_name_change() {
    ?>
    <script>
        jQuery(function($){

			// Define form and field IDs
			var formID = 1072;
            var nameField1 = 1; // ID of the name field on page 1
            var nameField2 = 16; // ID of the name field on page 2
            var emailField1 = 2; // ID of the email field on page 1
            var emailField2 = 19; // ID of the email field on page 2
            var phoneField1 = 5; // ID of the phone field on page 1
            var phoneField2 = 29; // ID of the phone field on page 2
			
			// Function to set the value of a field on page 2 based on the value of a field on page 1
			function setFieldValue(field1, field2) {
				$( `#wpforms-${formID}-field_${field1}` ).on('change', function() {
					$( `#wpforms-${formID}-field_${field2}` ).val($(this).val());
				});
			}
			
			// Check if form and fields exist before manipulating
			if ($('#wpforms-' + formID).length) {
				// Set the name field from page 1 to page 2
				setFieldValue(nameField1, nameField2);
				
				// Set the email field from page 1 to page 2
				setFieldValue(emailField1, emailField2);
				
				// Set the phone field from page 1 to page 2
				setFieldValue(phoneField1, phoneField2);
			} else {
				console.error('Form does not exist.');
			}

        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_name_change', 10 );