Forums

Good day,
I need to type in the form based on the selected checkboxes.
For example, check option one and the text "you selected option one" will appear.
I suppose it can only be done by javascript, but I'm not sure how to do it. I think I even saw how to do it in the forum, but I'm not sure about it and I can't find it.

thank you for answer

You could just have a piece of text, and use the field events of the checkbox to hide or show it.

Unfortunately, probably not. I need to display the sum of the checkboxes. See https://jmp.sh/QJlwFIr

Javascript block.
​

function myFunction() {
   // Sum the values
   jQuery('#div_id').text('$' + summed_value);
}

Set the on change field event to "function" and in the value (not the identifier) put myFunction

I'm sorry, but I can't finish it.
What does myFunction call?
I need her to call after every checkbox entry.

Can you please give me an example?

Now I have it like this:

Your jQuery code is wrong, that would replace the text inside ALL 'p' elements with what you've written. Obviously no good.
​
In the field's Events tab, do triggering event "change", triggered action "function", affected elements "myFunction"
​
Change the text for change to

<div id="change_div">text for change</div>

Change the javascript code to
​

function myFunction(trigger) {
   jQuery('#change_div').text("value selected was " + triggered.val());
}

Thank you for the instructions, but it still doesn't work for me.
Perhaps I did everything you wrote, but it seems to me that javascript function will not be called
see

Why did you tick the DOM Ready box? Untick that.
​
And I can't ssee if you've written the function name in the event properly screen shot just that

I canceled DOM Ready, but it still doesn't work

Any errors in console? Want to add a console.log('run', triggered); to the code too and see if it's being called?

index.php?option=com_chronoforms6&cont=manager&chronoform=platba:48 Uncaught ReferenceError: triggered is not defined
at myFunction (index.php?option=com_chronoforms6&cont=manager&chronoform=platba:48)
at String.<anonymous> (g2.forms.js:342)
at Function.each (jquery.min.js?2917fefbad69e07d4908b3748e702580:2)
at String.<anonymous> (g2.forms.js:340)
at Function.each (jquery.min.js?2917fefbad69e07d4908b3748e702580:2)
at Object.<anonymous> (g2.forms.js:236)
at Function.each (jquery.min.js?2917fefbad69e07d4908b3748e702580:2)
at HTMLInputElement.<anonymous> (g2.forms.js:128)
at HTMLFormElement.dispatch (jquery.min.js?2917fefbad69e07d4908b3748e702580:2)
at HTMLFormElement.v.handle (jquery.min.js?2917fefbad69e07d4908b3748e702580:2)

when I put the consolelog () function, nothing is written

if I shorten it to:
function myFunction {trigger} {
jQuery ('# change_div'). text ("value selected was");
}
, hence without triggered, so it works.

How do I get form field values in javascript?

sorry trigger and triggered should obviously match. Call them both the same thing.

code works correctly:
function myFunction {trigger} {
jQuery ('# change_div'). text ("value selected was" + trigger.val ());
}
But I need to display the sum of the checked boxes, how do I get these values in javascript?

Try
​
​
let total;
jQuery ('input[name="thenameyoucalledthecheckboxeswithoutthebrackets"]:checked).each(function() { total +=parseInt(this).val());});
​
Beyond that, try Google

there is some syntax error and I can't determine it
Braces do not match and there is only one apostrophe.
I don't know where to end it
​
"thenameyoucalledthecheckboxeswithoutthebrackets" is "voucher"

I modified it to not report syntax error, but it returns an object instead of a value:
​
console.log(jQuery ('input[name="voucher"]:checked').each(function() { total +=parseInt(this).val()}));
​
console log is:

1. a.fn.init [selector: "input[name="voucher"]:checked", prevObject: d.fn.init(1), context: document]
2. selector: "input[name="voucher"]:checked"
3. length: 0
4. prevObject: d.fn.init [document, context: document, selector: ""]
5. context: document
6. __proto__: Object(0)

parseInt(this).val() should be parseInt(this.val()) , assuming of course that you're only using integers for your field values and not doubles / floats.

I have: console.log(jQuery ('input[name="voucher"]:checked').each(function() { total +=parseInt(this.val())}));
but the result doesn't write it to the console, just the object:

1. a.fn.init [selector: "input[name="voucher"]:checked", prevObject: d.fn.init(1), context: document]
2. selector: "input[name="voucher"]:checked"
3. length: 0
4. prevObject: d.fn.init [document, context: document, selector: ""]
5. context: document
6. __proto__: Object(0)

I can't handle it without you

Don't log the whole function, put a log INSIDE the function.
​
I can't do everything for you buddy

I understand you can't do it for me, but I just can't get it working.

let total;
jQuery('input[name="voucher"]:checked').each(function() { 
   total += parseInt(this.val());
   console.log('Run!', this.val());
}));

console.log('Finished running');

jQuery('#theIDofthedivwhateveritwasyoucalledit').text('$' + total);

Do that inside the function and if it doesn't work have a look at the console and let me know.

I'm unhappy, it still doesn't work for me.
I found you had an extra bracket there, but that wasn't it.
the code is:

function myFunction(trigger) {
  let total;
 jQuery('input[name="voucher"]:checked').each(function() { 
   total += parseInt(this.val());
   console.log('Run!', this.val());
});

console.log('Finished running');

jQuery('#total').text('$' + total);
}

but this part does not run (it is not written to the log)

   total += parseInt(this.val());
   console.log('Run!', this.val());

it doesn't write any error in console, it writes only "Finished running"

[pre]function myFunction(trigger) {
console.log('Start');
total = 0;[br] jQuery('input[name^="voucher"]:checked').each(function() {[br] let currentVal = jQuery(this).val();[br] total += parseInt(currentVal);[br] });[br] console.log('Total: ' + total);[br] console.log('End');[br] jQuery('#div_id_goes_here_with_hash_symbol_in_front').text('$' + total);[br]}[/pre]
That code there works for me, if displaying a numerical total is what you're trying to do. [br][br]If you're trying to literally just display text saying what you've selected (which.... why?) then you change the total += line to something like
​

total += currentVal + "<br>";

Which will put each selection on a different line.
​
If you want anything more complicated, like IF (selected option A, C, D) THEN (display this message) ELSE (display some other message) then you'll either have to pay me or learn javascript. It's not super complicated, plenty of free basic learn to code things on google.

Alternatively, you can follow these steps

1) On Select, "Add To", leave value box blank, "total_calc"
2) On unSelect, "Subtract from", leave value box blank, "total_calc"
3) Add a hidden input named "total_calc" with id "total_calc"
4) Add a custom HTML section, with <div id="total_calc_display"></div>
5) Use a "calculator" widget. Use "total_calc" for the calculation field ids, and "total_calc_display" for the display div id (pretty simple)
​
And that should do it, no code. It will have it negative at the moment because there appears to be an error. You can swap subtract/add for now, but when Max updates it you'll have to change it back.

Thank you very much, this is already working OK.
I can make other necessary changes in javascript myself.
Unfortunately javascript is not my friend.