JSON Formbuilder with popup window "I agree to the terms & conditions" in the chunk

24 Posts

petrunkov Reply #1, 12 years, 6 months ago

Hell everyone,

I haven't find answer on this forum, so new topic. I'm trying to solve out how to wrap some text "I agree to the terms & conditions" in the form to the popup windows with whole Agreement text, I mean, when visitor will click on the link, he will be able to read some Agreement before checking box that he just did/read.
The problem is I use JSON Formbuilder via chunk: [[!JsonFormBuilder-fromJSON? &jsonTpl=`JsonFromBuilder-formBasic`]]
In the template I've got this checkbox:

{"element":"checkbox", "id":"agree_terms", "label":"[b]I agree to the terms & conditions[/b]", "value":"Agree", "uncheckedValue":"Disagree", "checked":false, "rules":[
            {"type":"required","validationMessage":"You must agree to the terms and conditions"}
]},

I tried to replace text "I agree to the terms & conditions" with another chunk [[$agreement]] - but everything (for example javascript:

<span class="link101" onclick="create101Modal();return false;">

) written to this chunk will end with error.
Do I have to use somehow TV template or any snippet? Frankly, I'm helpless....

Thank you for reading this!

Peter.

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 12 years, 6 months ago

You'll need to use Javascript to show/hide the dialog. You either need to have the dialog generated like any other field, or use AJAX to load and insert it.

Once the page is generated and sent to the server, MODX no longer has anything to do with it (AJAX is actually a totally separate request to the server).

I would be inclined to put this whole business at the end of the form, and use Javascript to hide it and display it when needed. Then the form would be processed as usual.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

24 Posts

petrunkov Reply #3, 12 years, 6 months ago

Hi Susan,

So javascript it is. I used primitive one:

<div class="agree_terms">
<script type="text/javascript">// <![CDATA[
function popup(url) 
{
var width = 400;
var height = 250;
var left = (screen.width - width)/2;
var top = (screen.height - height)/2;
var params = 'width='+width+', height='+height;
params += ', top='+top+', left='+left;
params += ', directories=no';
params += ', location=no';
params += ', menubar=no';
params += ', resizable=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', toolbar=no';
newwin=window.open(url,'windowname5', params);
if (window.focus) {newwin.focus()}
return false;
}
// ]]></script>
<a onclick="popup('[[~18]]')" href="javascript: void(0)">Agree terms</a>
</div>

I had to insert this javascript at the end of the content page, after the form code, and then used top: -XXpx. As I said, primitive, but works for me. I will be more sophistic next time, I promise.

There is still hope with this forum.

Thank to you, Susan.

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 12 years, 6 months ago

To quote Commander Chekhov in one of my favorite Star Trek novels, "primitive does not mean stupid" ("Uhura's Song"). If it works, then it's great.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

1,154 Posts

nuan88 Reply #5, 8 years, 3 months ago

This is still a winner, using it right now. Brilliant!