• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

Update HTML table's values using slider and AJAX?

JackGoa

Member
Hi, I'm busy with a solar website. I want to do a very basic calculation and display what a user would pay back monthly and what their savings will be based on two fields.

One would be their monthly electricity bill, and the other field would be radio buttons with 5 or 6 different packages to choose from, but then I discovered the slider control element!

So, user puts in his monthly bill, selects the package he wants, and a couple of fields in the table right below it updates the values. The maths isn't complicated, but I'm just wondering if it's possible to do this at all?

The screenshot attached shows what the table should look like. The big question probably is, can I display an HTML table below a form and update certain values based on user input using AJAX? And where would I start?

*edit: another way I could do it is, instead of AJAX, hit calculate and redirect to an article with placeholders? I would need arrays for that though, right? How do you return an array of results from a fabrik calc element?
 

Attachments

  • a_screenshot_299.jpg
    a_screenshot_299.jpg
    74.9 KB · Views: 60
You could just return the formatted HTML from a calc element. We just render whatever the calc returns in a span.

-- hugh
 
Where would this HTML be written then? After the calculation in the Calculation field? PHP echo?
 
If you do it in a calc element, it'll just show inside the span that any calc results are displayed in.

-- hugh
 
I'm confused! Not sure how this works at all. But I'll give it a bash and get back to this thread once I've got my sleeves rolled up and bashing it out.
 
Ok, I have managed to get to a point where I have an input field for monthly elec bill and a dropdown with the different package options. Just to get myself going, I'm just multiplying the two by each other for now to understand how the calc field works.

So I'm getting my result, in a textarea. What was that span you spoke off? I'd like to return my results in an HTML table. Not in the textarea. Is there something I'm missing? Using Ajax BTW.
 
Did you set a width/height on the calc? I seem to recall (for reasons I can't remember) if those are non-zero, we use a textarea. So just set those to 0 (or leave them empty) and it'll use a span.

-- hugh
 
Hey Mr Hugh. I don't suppose there is a way to have fields to also capture the person's name and email address before the table updates with the results? Keep in mind, I have no submit button on this form, it's all Ajax.
 
If you are using a calc element with AJAX, then all the form's data is submitted, and available in the $data array. So you could grab $data['yourtable___email'] (or whatever) and do what you want with it.

Of course, if what you want to do is store it in the database, and if this is a new form (so no row exists in the underlying table for it yet, as it hasn't been submitted), then you can't store it in this form's table. You'd have to upsert another table by hand.

-- hugh
 
Ok I think I understand the first part, but not so sure about the second part. There are only two rows in the table which I created during the testing phase. So if I understand properly, seeing as these do exist, I can add an email and name field, but then in my calc field, I need to create a mysql insert statement? So every time someone tries a new result with the form, it will add their results to the database?

This table could grow very big over a short period of time? And what if Mr Spambot discovered it and decided to make a couple of thousand entries in an hour?
 
Ok, besides my previous post, I have a templating question here.

It's not possible to separate that calc field into a separate form, right?

That calculator seems to be the most attractive lead magnet in our marketing efforts so far. I'd like to make that page a bit more attractive, but it's tricky. For instance, it would be cool if I could have writing on the left, the input fields on the right, and then the table of results below, stretching full width of course.

But I can't figure out how to get that done. If I make a display element for my text and put the two input fields with the display element in a group, and the calc element in it's own group, it still does not work, as I have no control over which elements display in the left column, and which on the right.
 
Ok I think I understand the first part, but not so sure about the second part. There are only two rows in the table which I created during the testing phase. So if I understand properly, seeing as these do exist, I can add an email and name field, but then in my calc field, I need to create a mysql insert statement? So every time someone tries a new result with the form, it will add their results to the database?

This table could grow very big over a short period of time? And what if Mr Spambot discovered it and decided to make a couple of thousand entries in an hour?

The problem is simply that if you are trying to update the same table which the form resides on, and you aren't editing an existing row ... there is no row in the table for you to update. The row isn't created on a 'new' form until the form is submitted.

If you never actually submit the form, that may not be a problem. You could simply do an upsert into the table based on the email (so check to see if the email you get from the form exists in the table, if so update it, if not, insert. But doing that in a calc, you'd need to make sure you set "Calc on save only" to Yes, so (hopefully) the only time it gets run is during AJAX calc.

The spam problem is going to be there, regardless.

-- hugh
 
The problem is simply that if you are trying to update the same table which the form resides on, and you aren't editing an existing row ... there is no row in the table for you to update. The row isn't created on a 'new' form until the form is submitted.

If you never actually submit the form, that may not be a problem. You could simply do an upsert into the table based on the email (so check to see if the email you get from the form exists in the table, if so update it, if not, insert. But doing that in a calc, you'd need to make sure you set "Calc on save only" to Yes, so (hopefully) the only time it gets run is during AJAX calc.

The spam problem is going to be there, regardless.

-- hugh
Thanks for clearing that up Hugh. What are your thoughts on my layout ideas though?

from tapatalk
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top