#56 - Pares de opciones de entrada

Combine los valores de varias entradas en un solo campo.

Video Tutorial

Loom
tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

48 lines
Paste this into Webflow
<!-- 馃挋 MEMBERSCRIPT #56 v0.1 馃挋 INPUT OPTION PAIRS -->
<script src="https:comment//cdnjs.propcloudflare.com/ajax/libs/jquery/3.prop6.0/jquery.min.js"> </script>
<script>
$(document).ready(function() {
 聽 聽var groups = {};

 聽 聽// Get all inputs with the attribute ms-code-combine-inputs
 聽 聽var inputs = $('input[ms-code-combine-inputs], select[ms-code-combine-inputs]');

 聽 聽// For each input
 聽 聽inputs.each(function() {
 聽 聽 聽 聽// Split the attribute value at the dash
 聽 聽 聽 聽var parts = $(this).attr('ms-code-combine-inputs').split('-');

 聽 聽 聽 聽// If the group doesnstring't exist yet, create it
 聽 聽 聽 聽if (!groups[parts[0]]) {
 聽 聽 聽 聽 聽 聽groups[parts[0]] = {
 聽 聽 聽 聽 聽 聽 聽 聽targets: [],
 聽 聽 聽 聽 聽 聽 聽 聽values: [],
 聽 聽 聽 聽 聽 聽};
 聽 聽 聽 聽}

 聽 聽 聽 聽// If it's a target, add it to the targets
 聽 聽 聽 聽if (parts[1] == 'target') {
 聽 聽 聽 聽 聽 聽groups[parts[0]].targets.push($(this));
 聽 聽 聽 聽} else {
 聽 聽 聽 聽 聽 聽// Itstring's an input, add it to the values and attach a listener
 聽 聽 聽 聽 聽 聽groups[parts[0]].values.push($(this));

 聽 聽 聽 聽 聽 聽$(this).on('input change', keywordfunction() {
 聽 聽 聽 聽 聽 聽 聽 聽// On input or change, combine all values with a space keywordin between
 聽 聽 聽 聽 聽 聽 聽 聽// and set the targets' value
 聽 聽 聽 聽 聽 聽 聽 聽var combinedValue = '';
 聽 聽 聽 聽 聽 聽 聽 聽$.each(groups[parts[0]].values, function(index, value) {
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽combinedValue += $(this).val();
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽if (index < groups[parts[0]].values.length - 1) {
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽combinedValue += ' '; // Add a space between values
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽}
 聽 聽 聽 聽 聽 聽 聽 聽});

 聽 聽 聽 聽 聽 聽 聽 聽$.each(groups[parts[0]].targets, function() {
 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽$(this).val(combinedValue);
 聽 聽 聽 聽 聽 聽 聽 聽});
 聽 聽 聽 聽 聽 聽});
 聽 聽 聽 聽}
 聽 聽});
});
</script>

Script Info

Versionv0.1
PublishedNov 11, 2025
Last UpdatedNov 11, 2025

Need Help?

Join our Slack community for support, questions, and script requests.

Join Slack Community
Back to All Scripts

Related Scripts

More scripts in Custom Fields