Ajax field or editable calc field

[joki94]

Hello again,

In my form I have a field user_points___anzahl_naechte where the user should write a number.
In the field below user_points_points I want to calcuate the points by using the number in user_points___anzahl_naechte * 100

If I set the user_points___points as a calc field it works perfect but the user should have the possibility to change the value. So I decided to use instead of calc a normal field and calculate the value with the default.

But than I cant use ajax and my value will not be changed/updated if another number is entered in user_points___anzahl_naechte.

So I looked at the forum and found out than I can use User Ajax.

I put the following code in the user_ajax.php file in components/fabrik/js

class userAjax {
function getData(){
$db =& JFactory::getDBO();
$retStr = '';
$identifyElement = JRequest::getVar('identify', '');
$query = "SELECT anzahl_naechte from user_points WHERE points = '$identifyElement' LIMIT 1";
$db->setQuery($query);
$results = $db->loadResult();
echo $results;
}
}

I also created a form_21.js file with the following code:

function getInfo(){
var url='index.php?option=com_fabrik&format=raw&controller=plugin&c=plugin&task=userAjax';
var identify = $('user_points___anzahl_naechte').getValue(); //field to set JS event on
var update = $('user_points___points'); //field to update
new Ajax(url,{
data:{method:'getData', //enter the function name as you have it in the user_ajax.php
'identify':identify},

onComplete:function(r){
update.value = r; //there are many ways to display the results depending on what you are doing. I am going to return the value to a field.
}
}).request();
};

and in my element user_points___points I set a javascript on change to getInfo();

Unfortunately this dindt work.

Can someone help me what I did wrong?

Thanks and kind Regards,

joki94

 

[Sophist]

This seems way more complicated than it needs to be. You have two choices:

1. Go back to the Calc field, and set Ajax on in the calc settings. Every time the user changes the input field, an ajax calc will run to update the Points element.

2. Make the Points element a "field", set it read-only. Then on the anzahl_naechte field, set a Javascript on-change event with a tiny amount of javascript to insert the calculated value into the Points input element; something like:

document.getElementByName('bonus_points_points').value = this.element.value;

(Note: This was just off the top of my head and not tested - so may not be quite right and you may need to experiment a little to get it working.)

Hope this helps.

 

[joki94]

Hello Sophist,

thank you for your answer but unfortunately I need a field which is editable. Because of that the calc field is not working.

Hope you have another idea.

Kind Regards, joki94

 

[Sophist]

Yes - option 2 but don't set it read-only. When user changes the anzahl_naechte element, the Points element will be updated but the user can still type something else in there to override the calculation.

 

[joki94]

Hi Sophist,

I tried option2 as well, but nothing is written in points.

Points is a field with the following code for default, eval = yes:
$myCalc = (int)'{user_points___anzahl_naechte}' * 100;
return $myCalc;

anzahl_naechte is a field with an javascript event on change:
document.getElementByName('user_points___points').value = this.element.value;

For your info I found out that my tablename user_points was wrong in my code, there I used bonus_points. I changed it in my first post and of course also in my complete code, but no changes.

Hope you can help me.

Kind Regards, joki94

 

[Sophist]

I am not sure you can do Option 2 when the Points element is a Calc. And in any case you said that you needed the user to be able to type into the Points field.

As I said, leave the anzahl_naechte element as a "field" with read-only=No. Make the "Points" field also a "field" type, and set it to read-only=Yes. Then add the Javascript on-change to the anzahl_naechte element.

 

[joki94]

That was exactly what I tried.

But nothing will be written into points.

 

[Sophist]

Well I did say I hadn't tested it. And I now see that I didn't multiply by 100 in the javascript anyway. If you wait a bit I will try it myself and get back to you.

 

[Sophist]

Three typos. Try:

document.getElementById('bonus_points___points').value = this.element.value * 100;

 

[joki94]

Thank you so much. Work like a charm.

Thank you.