Support » Plugin: Calculated Fields Form » Update calculatedField value without .change() and .keyup() fields, in real time

  • Resolved frunky

    (@frunky)


    Hi!
    I have 2 sliders inputs and 2 inputs with sliders value.

    If I change slider value inputs with sliders value changing ok, but total input doesn’t changed in real time. It’s need to change input with slider value with some keypress.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello,

    I don’t understand your form’s structure,

    You have two slider fields, but what do you mean with 2 input with sliders values? Are you talking about two calculated fields?

    If the slider fields are for example, fieldname1 and fieldname2, the equation associated to the calculated field for the total would be as simple as:

    fieldname1+fieldname2

    Could you send me the link to your webpage and indicate the name of the fields you are referring, please?

    Best regards.

    Thread Starter frunky

    (@frunky)

    This is the link

    I don’t understand how I can create slider with input field which I can change value manually, I only can create slider with div caption.

    And so I create html block with same structure

    <div class="slider-content">
    <label for="fieldname35_1">Вырезы под розетки</label>
    
    <div id="slider3"></div>
    <script>
    $(function() {
        $("#slider3").slider({
            range: "max",
            min: 0,
            max: 6,
            value: 2,
            slide: function(event, ui) {
                $("#fieldname35_1, #fieldname38_1").val(ui.value);
            }
        });
        $("#fieldname35_1, #fieldname38_1").val($("#slider3").slider("value"));
        $('#fieldname35_1, #fieldname38_1').bind('change paste keyup', function() {
            $("#slider3").slider("value", $(this).val());
            $("#fieldname35_1, #fieldname38_1").val($(this).val());
        });
    });
    </script>
    </div>
    • This reply was modified 4 years, 9 months ago by frunky.
    • This reply was modified 4 years, 9 months ago by frunky.
    • This reply was modified 4 years, 9 months ago by frunky.
    Thread Starter frunky

    (@frunky)

    Thanks for quick answer!

    This is the link

    I don’t understand how create slider with input which users can manually change input’s and slider’s value. I only can create slider with caption on <div>.

    So I create html blocks with js scripts which init .slider() and send value to inputs and back.

    Please look only js code in jsfiddle

    • This reply was modified 4 years, 9 months ago by frunky.
    Plugin Author codepeople

    (@codepeople)

    Hello,

    The solution is simpler, and part of the process you want implement is included in the section “Tips & Tricks” of the plugin’s documentation:

    http://cff.dwbooster.com/documentation#assign-slider-value-programmatically

    1. Assign a class name to the slider field, for example: my-slider-1 (through the “Add Css Layout Keywords” property)

    2. Insert the number field, I will call it: fieldname123 (you should use the corresponding field’s name in your form)

    3. Insert a “HTML Content” field in the form with the pice of code below:

    <SCRIPT>
    function setSliderValue( clss, value )
    {
    var id = fbuilderjQuery('.'+clss+' input').attr( 'id' );
    var fId = id.match(/_\d+$/);
    fbuilderjQuery.fbuilder.forms[fId].getItem(id).setVal(value);
    }
    fbuilderjQuery(document).on('change', '[id*="fieldname123_"]', function(){setSliderValue('my-slider-1', this.value);});
    fbuilderjQuery(document).on('change', '.my-slider-1 input', function(){jQuery('[id*="fieldname123_"]').val(this.value);});
    </SCRIPT>

    and that’s all.

    The piece of code:

    fbuilderjQuery(document).on('change', '[id*="fieldname123_"]', function(){setSliderValue('my-slider-1', this.value);});

    updates the slider if the input’s value changes. And the piece of code:

    fbuilderjQuery(document).on(‘change’, ‘.my-slider-1 input’, function(){jQuery(‘[id*=”fieldname123_”]’).val(this.value);});

    updates the input if the slider’s value changes.

    Best regards.

    Thread Starter frunky

    (@frunky)

    Thanks.

    I used your code, but I was get error “Uncaught TypeError: Cannot read property ‘addClass’ of undefined”.

    I was added ‘.’ to class name

    fbuilderjQuery(document).on(‘change’, ‘[id*=”fieldname123_”]’, function(){setSliderValue(‘.my-slider-1’, this.value);});

    Anyway I get “NaN” in inputs

    Plugin Author codepeople

    (@codepeople)

    Hello,

    You don’t need to include the dot, because it is added to the class name into the procedure:

    var id = fbuilderjQuery('.'+clss+' input').attr( 'id' );

    By the way, the relationship between the number field and the slider field in the row: “Высота” is incorrect, the other fields are working fine.

    About the sliders, they are not participating in the equations. Furthermore, if you there are calculated fields associated to the input fields and you want evaluate them when their values are modified programmatically, you should trigger an onchange event after assigning the value:

    fbuilderjQuery(document).on('change', '.my-slider-1 input', function(){jQuery('[id*="fieldname123_"]').val(this.value).change();});

    Best regards.

    Thread Starter frunky

    (@frunky)

    Thanks a lot!

    But one moment.

    If I press to slider I got this error “Uncaught TypeError: Cannot read property ‘addClass’ of undefined” in slider.min.js

    I’m trying to deregister all jquery scripts and enqueue scripts from cdn, but no luck.

    What we can do with that?

    Thanks! Have a nice day!

    Plugin Author codepeople

    (@codepeople)

    Hello,

    I’ve visited the link you sent me previously, and the form is not there. I’m using exactly the same piece of code in my local form, and it does not generate any uncaught error message.

    Could you sent me the link to the webpage where is the form, please?

    Best regards.

    Thread Starter frunky

    (@frunky)

    Hi!

    Sometimes block with calculator disappears.

    Link

    Could you please refresh the page one more time while calculator not showing?

    P.S: I used your code only to the first field.

    Thanks.

    Plugin Author codepeople

    (@codepeople)

    Hello,

    I think that the issue is not related directly with the code.

    Could you create a ticket in my private webpage, with the access to your WordPresss to edit the form by myself, please? (indicate the form you are editing)

    http://cff.dwbooster.com/contact-us

    Best regards.

    Thread Starter frunky

    (@frunky)

    Thanks a lot, @codepeople!

    I was submited access to my site.

    Thank you

    Thread Starter frunky

    (@frunky)

    You’re the best!

    Thanks for the solution

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Update calculatedField value without .change() and .keyup() fields, in real time’ is closed to new replies.