Forums

Load JS and custom element

FloB 10 Jun, 2013
Hello!
First of all, I'm a newbie with Java script.
My need which is :
[list]I have different tickets (10€ to 50€)[/list]
[list]I have created a form where customer can choose the numbers of tickets they want[/list]
[list]I want the total of the order showing if the customer click on a button, so that he could change is mind before complete the order.[/list]
I have created my form as foolowing :
[list]I have a drop down with value from 0 to 10 for each ticket (id=dd_value of the ticket)[/list]
[list]I have a button id=btn_calc (it's a regular button not a submit button)[/list]
[list]I have succed in showing the total of the amount in a text box adapting this FAQ[/list]
I have a text box id=name=total_bons. Here is the code in the load JS action:
window.addEvent('domready', function() {
    $('btn_calc').addEvent('click', function() {
    var sum;
    sum = $('dd_10').value*10+$('dd_15').value*15+$('dd_20').value*20+$('dd_30').value*30+$('dd_50').value*50+$('dd_75').value*75+$('dd_100').value*100+$('dd_150').value*150;
   $('total_bons').value = sum;
  });
});

It's working perfectly.
However, I would like the amount of the order not to be editable.
I guess I should use a custom element, but I couldn't find how.
I have try to replace the text box by a custom element id=name=total_bons and
$('total_bons').value = sum;
by
$('total_bons').value = '<?php echo('+ sum +'); ?>';

I have also find that the faq is working with a hidden box (but not very friendly because I want the result to be shown).
I have also try to put the result in a variable $form->data['total_bons'] and use it in a custom element or a formatted text with {total_bons}, but it doesn't work.
Is anyone can give me a clue please?
Flo
GreyHead 11 Jun, 2013
Hi Flo,

The simplest answer is to set readonly='readonly' in the box where you display the result.

A 'prettier' version is so set the value twice: once in a formatted span or div and again in a hidden input.

In either case you should check any calculations using PHP after the form is submitted.

Bob
FloB 11 Jun, 2013
Hello Bob!
Ok it's working...
Before that, I never tried to change something in the code tab when you open your form from the form manager.
Always used the wizard edit.
But it was obvious when you give the attribute :

readonly='readonly'

.

I don't understand the 'prettier' version, but all I want is a result not editable and it's working.
Thank you!

PS : It would be more readable if there was a new line after each </div>.
Why don't we have the same thing with the actions? I know that the code certainly looks like something horrible for beginners, but they don't use this advanced method for editing forms.
As there isn't a copy-paste, it would be useful (I know that we can change the code directly in the data base, found this in another post)
GreyHead 11 Jun, 2013
Hi Flo,

There's a 'missing feature' in ChronoForms that the elements don't have an 'Attributes' box where you can add extra attributes like this.

Rather than use the Form Code box I'd probably either add it using JavaScript; or use a Custom Element element.

The JavaScript requires the input to have an id e.g. id='total' (you can set this in the form element). Then a Load JS action with code like this:
window.addEvent('domready', function() {
   $('total').readOnly = true;
});


Bob
FloB 12 Jun, 2013
Hello Bob!
I have try to set up readonly with Load JS but it doesn't work:
[list]I have created a second Load JS action to set the code you give me.[/list]
[list]If I put Field name = Field ID and $('field id').readonly = true; then the calculation is working but the text box is editable[/list]
[list]If I set a Field ID different to the Field name and $('field id').readonly = true; then the calculation is not working and the text box is editable...[/list]
Using the Form Code box is not a solution because the parameters you change in are rewrited if you change and save the element in the wizard edit...
Have an idea?
Else, could you tell me how to use a custom element as you suggested yesterday?

Thanks
Flo
GreyHead 12 Jun, 2013
Hi Flo,

My mistake it needs to be .readOnly = true; with a capital O.

I'll update my earlier post.

Bob
FloB 13 Jun, 2013
Hi!
With a capital O it's working perfectly!
Thanks
Flo
This topic is locked and no more replies can be posted.