Using scripts in submission form template

Form2Content Forum

Questions and answers for Form2Content, a Joomla CCK.

Resolved Using scripts in submission form template - Multiple step form

Question

Hey folks!

I'd like to create a submission form that consists of multiple steps. I tried to use jQuery Steps (http://www.jquery-steps.com/) for that and I've loaded the necessary JS and CSS files in my Joomla Template. However, jQuery Steps requires some code to initiate to be placed within the html's <body> (see http://www.jquery-steps.com/Documentation#init - its very easy in general).



        <script>

            $("#wizard").steps();

        </script>

When I put it at the beginning of my Smarty submission form override template (between {literal}-tags of course), the code is placed after the opening <form> tag in the generated webpage. I'm not sure whether that's the reason, but I haven't managed to get the script working.
What way do you recommend to use Javascript inside the submission form template override?

Thanks in advance!

Best regards,
Sebastian

Responses (6)

F2C webmaster

Accepted Answer Pending Moderation

Hi Sebastian,

This becomes a very technical question and am not sure I can answer it but I'll do my best. The question you didn't ask is is it possible ....

? My answer, maybe not, but matter of testing.

During render we have a check that all F2C fields are there. Your script will change html so can't guarantee that either F2C or the steps will still work.

As per documentation it looks like the position of the script with reference to the Form tag doesn't matter. The script does need to be outside a div tag which encloses all the parts you want to manipulate.

Maybe get it to work in a Joomla article first, next use that code in your submission template....

Regards,
Patrick

Please read the F2C documentation before asking questions! Thank you if you've done so

more than a month ago
F2C submission form templating
# 1

Sebastian Fischbach

Accepted Answer Pending Moderation

Hi Patrick,

well, your "is it possible" seems to be the relevant question here.

First of all: I got the script to work in a normal Joomla article. The key is, in Joomla you have to replace the $ with "jQuery", e.g.

<script>

    jQuery("#wizard").steps();

</script>

But unfortunately it doesn't work with F2C, the browser doesn't finish loading the page and shows nothing but a non-functioning "Browse" button of a file upload field. That's sad, as from a usability point of view it would be great to split a long form into manageable parts.
I tried a css-only solution, too. It worked "visually", but brought along new problems regarding validation (which was done at the end of the form instead of after every step, so the user had to click back to step one if there was an error in this step).

I'd be happy for suggestions if anyone here has ever tried to implement a multi-step submission form!

Best regards,
Sebastian

more than a month ago
F2C submission form templating
# 2

F2C webmaster

Accepted Answer Pending Moderation

Hi Sebastian,

I understand your wish but as you can probably imagine it's complicated and a lot of work to build in. Partly because we use the Joomla framework and the JAM itself doesn't have this feature. We have limited development time and with J4 around the corner we are putting a lot of energy into getting that to work (Joomla changes a lot).

Regards,
Patrick

Please read the F2C documentation before asking questions! Thank you if you've done so

more than a month ago
F2C submission form templating
# 3

Sebastian Fischbach

Accepted Answer Pending Moderation

Hey Patrick,

you misunderstood me. I don't expect you to develop this feature for F2C. On the contrary, I was very happy to see how much flexibility F2C offered in the article templates through Smarty templating. Before using F2C I had to do a lot of Joomla template overrides to implement what I wanted, it felt more like "hacking" instead of a clean solution.
Regarding front-end submission form templates: the "perceived freedom" and cleanliness is a little less here. I admire your goal to give the developer a lot of flexibility (which comes at the cost of not having a ready-made solution, but that's perfectly fine with me). With this in mind, however, I wonder why it's not the default to just place the labels and form fields with the Smarty variables but instead a whole lot of divs and tables. I noticed I can just copy the form field's html from the generated page (with the names/ids assigned by F2C), insert them in my template and still get a working version without the (no offense) "clutter" - why not make it the default for template overrides if the user wants to design their own form anyway? Furthermore, F2C places a script in the pages <head> (instead of in a separate file) and loads two hands full of separate scripts, seemingly one for every field type - I could think of a more concise solution, but on the other hand I'm quite a newbie to Javascript, so this is just my humble impression.

To conclude: Please don't waste your time programming multi-page submission forms - that's my job. But I welcome every piece of flexibility regarding the html/scripts around "your" form fields. And thanks for working on making F2C future-proof and J4-ready!

I'm going to invest a few more days trying to implement a multi-step solution that does not change the html (and thereby hopefully passes the F2C check). I'll let you know if I succeed.

Best regards,
Sebastian

more than a month ago
F2C submission form templating
# 4

F2C webmaster

Accepted Answer Pending Moderation

Hi Sebastian,

Thank you for your feedback. In Holland we have a saying, "there are many way to Rome". Having multiple scripts does not interfere with the performance and limits that what needs to be done per field. But of course there are other ways

Making a front-end template that works with all UI frameworks has been challenging. I agree that at some levels it could be simpler but at the same time it might not work again in all frameworks. From that point of view tables are easy.

In J4 there will be changes again (Bootstrap 4, hoping for CSS Grid) so we will look at the submission form template at some point to make it simpler and easy to override with less dependencies.

Regards,
Patrick

Please read the F2C documentation before asking questions! Thank you if you've done so

more than a month ago
F2C submission form templating
# 5

Sebastian Fischbach

Accepted Answer Pending Moderation

Hey Patrick,

In Holland we have a saying, "there are many way to Rome".

Seems to be universal - we have the same saying in Germany!

Having multiple scripts does not interfere with the performance and limits that what needs to be done per field.

Actually, I think it does, although other factors might be more important. See for example this explanation in the Mozilla MDN.

Best regards,
Sebastian

more than a month ago
F2C submission form templating
# 6

Page :
1

There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Please login to post a reply

You will need to be logged in to be able to post a reply. Login using the form on the right or register an account if you are new here. Register Here »

Forgot Password?