0

The frontend to my add-on to the Gravity Forms plugin for WordPress works fine if I just have one instance of the page. If I add more than one instance on the page, the JavaScript code to make text change and to output data to the console does not work for other than the first instance.

The text that should be changing for all instances are the following that you can see in contect in the code below:

"<div class='results_{$field_id}'></div>"

and

"Ingen størrelse valgt"

Here is where the script file is included:

/**
 * Include my_script.js when the form contains a 'range' type field.
 *
 * @return array
 */
public function scripts() {
    $scripts = array(
        array(
            'handle'  => 'my_script_js',
            'src'     => $this->get_base_url() . '/js/my_script.js',
            'version' => $this->_version,
            'deps'    => array( 'jquery' ),
            'enqueue' => array(
                array( 'field_types' => array( 'range' ) ),
            ),
        ),

    );

    return array_merge( parent::scripts(), $scripts );
}

Here is where I get the php variable for the id and put it into the html:

public function get_field_input( $form, $value = '', $entry = null ) {
    $id              = absint( $this->id );
    $form_id         = absint( $form['id'] );
    $is_entry_detail = $this->is_entry_detail();
    $is_form_editor  = $this->is_form_editor();

    // Prepare the value of the input ID attribute.
    $field_id = $is_entry_detail || $is_form_editor || $form_id == 0 ? "input_$id" : 'input_' . $form_id . "_$id";

    $value = esc_attr( $value );

    // Get the value of the inputClass property for the current field.
    $inputClass = $this->inputClass;

    // Prepare the input classes.
    $size         = $this->size;
    $class_suffix = $is_entry_detail ? '_admin' : '';
    //$class        = $size . $class_suffix . ' ' . $inputClass;
    $class        = $this->type . ' ' .$field_id . $class_suffix;

    // (irrelevant code cut out)


    return sprintf( "<div class='ginput_container'>" . 
                        "<input name='input_%d' id='%s' type='range' {$step_attr} {$start_attr} {$min_attr} {$max_attr} {$data_value_visibility} ${connects_attr} value='%s' class='%s' data-min-relation='%s' data-max-relation='%s' data-value-format='%s' {$currency} {$tabindex} {$read_only} {$placeholder_attribute} %s/>" .
                        "<div id='gsfslider_%d' class='slider-display'></div>%s" .
                        "<div class='results_{$field_id}'></div>" .
                        "<div id='range_maxValue'>{$max}</div><div id='range_field_id'>{$field_id}</div>" .
                        "<div id='range_key1'>{$key1}</div><div id='range_val1'>{$val1}</div>" .
                        "<div id='range_key2'>{$key2}</div><div id='range_val2'>{$val2}</div>" .
                        "<div id='range_key3'>{$key3}</div><div id='range_val3'>{$val3}</div>" .
                        "<div id='range_key4'>{$key4}</div><div id='range_val4'>{$val4}</div>" .
                        "<div id='range_key5'>{$key5}</div><div id='range_val5'>{$val5}</div>" .
                        "<div id='range_key6'>{$key6}</div><div id='range_val6'>{$val6}</div>" .
                        "<div id='range_key7'>{$key7}</div><div id='range_val7'>{$val7}</div>" .
                        "<div id='range_key8'>{$key8}</div><div id='range_val8'>{$val8}</div>" .
                        "<div id='range_key9'>{$key9}</div><div id='range_val9'>{$val9}</div>" .
                        "<div id='range_key10'>{$key10}</div><div id='range_val10'>{$val10}</div>" .
                        "<span id='text_{$field_id}'>Ingen størrelse valgt</span>" .
                    "</div>", 
                    $id, 
                    $field_id, 
                    esc_attr( $value ), 
                    esc_attr( $class ),
                    esc_attr( $this->slider_min_value_relation ), 
                    esc_attr( $this->slider_max_value_relation ), 
                    esc_attr( $this->numberFormat ), 
                    $disabled_text, 
                    $id, 
                    $instruction );
}

The JavaScript:

src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js";

jQuery(document).ready(function($){

var maxValue = document.getElementById('range_maxValue').innerHTML; 
var rangeslider_id = document.getElementById('range_field_id').innerHTML;

var key1 = document.getElementById('range_key1').innerHTML;
var val1 = document.getElementById('range_val1').innerHTML;
var key2 = document.getElementById('range_key2').innerHTML;
var val2 = document.getElementById('range_val2').innerHTML;
var key3 = document.getElementById('range_key3').innerHTML;
var val3 = document.getElementById('range_val3').innerHTML;
var key4 = document.getElementById('range_key4').innerHTML;
var val4 = document.getElementById('range_val4').innerHTML;
var key5 = document.getElementById('range_key5').innerHTML;
var val5 = document.getElementById('range_val5').innerHTML;
var key6 = document.getElementById('range_key6').innerHTML;
var val6 = document.getElementById('range_val6').innerHTML;
var key7 = document.getElementById('range_key7').innerHTML;
var val7 = document.getElementById('range_val7').innerHTML;
var key8 = document.getElementById('range_key8').innerHTML;
var val8 = document.getElementById('range_val8').innerHTML;
var key9 = document.getElementById('range_key9').innerHTML;
var val9 = document.getElementById('range_val9').innerHTML;
var key10 = document.getElementById('range_key10').innerHTML;
var val10 = document.getElementById('range_val10').innerHTML;

$('.results_' + rangeslider_id).html('max = ' + maxValue + ", id = " + rangeslider_id);

console.log('key: '+ key1 + " , value: " + val1);

// set input values
var input_1 = {key: key1, value: val1};
var input_2 = {key: key2, value: val2};
var input_3 = {key: key3, value: val3};
var input_4 = {key: key4, value: val4};
var input_5 = {key: key5, value: val5};
var input_6 = {key: key6, value: val6};
var input_7 = {key: key7, value: val7};
var input_8 = {key: key8, value: val8};
var input_9 = {key: key9, value: val9};
var input_10 = {key: key10, value: val10};

console.log(input_1);

var defaultInput = {key: "Ingen størrelse valgt", value: 0};

// check maxValue and put input values in literal objects based on the maxValue
if(maxValue == 0) { 
    var values = {0: defaultInput};
} else if(maxValue == 1) {
    var values = {0: defaultInput, 1: input_1};
} else if(maxValue == 2) {
    var values = {0: defaultInput, 1: input_1, 2: input_2};
} else if(maxValue == 3) {
    var values = {0: defaultInput, 1: input_1, 2: input_2, 3: input_3};
} else if(maxValue == 4) {
    var values = {0: defaultInput, 1: input_1, 2: input_2, 3: input_3, 4: input_4};
} else if(maxValue == 5) {
    var values = {0: defaultInput, 1: input_1, 2: input_2, 3: input_3, 4: input_4, 5: input_5};
} else if(maxValue == 6) {
    var values = {0: defaultInput, 1: input_1, 2: input_2, 3: input_3, 4: input_4, 5: input_5, 6: input_6};
} else if(maxValue == 7) {
    var values = {0: defaultInput, 1: input_1, 2: input_2, 3: input_3, 4: input_4, 5: input_5, 6: input_6, 7: input_7};
} else if(maxValue == 8) {
    var values = {0: defaultInput, 1: input_1, 2: input_2, 3: input_3, 4: input_4, 5: input_5, 6: input_6, 7: input_7, 8: input_8};
} else if(maxValue == 9) {
    var values = {0: defaultInput, 1: input_1, 2: input_2, 3: input_3, 4: input_4, 5: input_5, 6: input_6, 7: input_7, 8: input_8, 9: input_9};
} else if(maxValue == 10) {
    var values = {0: defaultInput, 1: input_1, 2: input_2, 3: input_3, 4: input_4, 5: input_5, 6: input_6, 7: input_7, 8: input_8, 9: input_9, 10: input_10};
} else {
    var values = '';
    console.log('error: the literal objebt named -values- needs a minimum of 0 as maxValue and cannot exceed 10 as maxValue')
}

console.log(values);


var inp = document.getElementById(rangeslider_id); 

var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
console.log(isMobile);
if (isMobile) {
    inp.addEventListener("touchmove", function () { 
        document.getElementById('text_' + rangeslider_id).innerHTML = values[this.value].key  + " - " + values[this.value].value; 
    });
} else {
    inp.addEventListener("mousemove", function () { 
        document.getElementById('text_' + rangeslider_id).innerHTML = values[this.value].key + " - " + values[this.value].value; 
    });
}

$('#'+rangeslider_id).change(function() {
    sizeResult = [values[this.value].key, values[this.value].value];
    console.log(sizeResult);
});

})

Mirrave
  • 51
  • 5

1 Answers1

0

your code works on ids. you should wrap execution in function like:

function init(id){
var maxValue = document.getElementById(id).innerHTML; 
}

and then init it for each of the fields:

init('someid');
init('someotherid');

ids are always unique. They cannot be more than one element with this same id. Because of that often when you want to add some js reusable code it's better to use classes and then scope everything in functions that is triggered for each of the class elements.

There's quite a few other things you could improve about your code. One would be definitely to use arrays. instead of key1 key2 etc. you can just do key[0], key[1]

Another thing is sniffing for devices. You should just check if touch supported. What's the best way to detect a 'touch screen' device using JavaScript?

Maciej Paprocki
  • 1,230
  • 20
  • 29