show/hide on check box ticked

Just a quick one,

following a few tutorials but can’t get this one.

I have a form and I was hoping to have a number of fields hidden until a specific check box is ticked and then rebidden if it is untucked…

Thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There’s nothing in Freeway alone that can do this, but it’s very simple to do with some JavaScript. Post an example page with the entire form laid out, and mark the items you want to hide (maybe change the background color on that part of the page, perhaps) so we can see what you want to do.

Walter

On Nov 14, 2014, at 3:52 AM, Alex Lyons email@hidden wrote:

Just a quick one,

following a few tutorials but can’t get this one.

I have a form and I was hoping to have a number of fields hidden until a specific check box is ticked and then rebidden if it is untucked…

Thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks a million.

See the below link. The fields with the value “hide” should be hidden unless the check box immediately to the left of them is checked. Individual for each line.

If the box is checked, all three fields should show.

The same for all rows

https://db.tt/Vwh9oQ22


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You’re going to have a lot of trouble starting with this layout. It looks to me as though you have the Table Layout feature turned on in Freeway, and then you drew the form elements on the page and aligned them how you wanted them to appear. While this works from the standpoint that the form is going to submit to the server (although your form fields are not named in any logical manner at all – just item57 and so forth), the fields are not organized in a way that a script could recognize.

The way to get Freeway to give you a solid and unbreakable form layout while maintaining a sense of order to the generated code is to draw a table with the table tool, then set its borders to 0 (so they don’t show on screen). The benefit to this is that you will have a single <tr> tag wrapped around all of the form fields in one row, so you can do something simple like say “if this checkbox is checked, all of the remaining text fields in this row are visible”. That English is remarkably similar to the code you would write. Here’s a “fiddle” showing what I mean.

http://jsfiddle.net/2xjr7x0m/1/

Look in the bottom-right block for a working example, and the bottom-left block for the code you’d need to write. (I used Prototype.js to make the code less dense.)

This only works if all of your checkboxes and all of your text inputs are arranged in the manner of my example. Again, if you just draw things on the page, you don’t get to control this at all. Draw a table, insert your elements within it, and style the table to be hidden. Your code will be simpler, and your script will be able to manipulate it without explicit references to each element by name.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,

Thanks for the response. I haven’t had a chance to look at this but what you say makes perfect sense in that I understand why you say to do these things.

Making it happen on my end however, is a different thing and I’ll try it shortly and get back to you!

Thanks a million


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

just trying this now, in the process of creating the table with proper names on the items etc.

Where can I enter that test code to get certain boxes to hide?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

heres a link to the page in question.

Completely new to this so is there any tutorial to show exactly how to go about this?

https://dl.dropboxusercontent.com/u/433431/Test/tablecheck.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

sorry meant to say that I would like all fields after the on call check box hidden unless the on call check box is checked… Specific for each row


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Your dropbox page wouldn’t load for me!! So I am not sure exactly what is there.

Try adding the following in Page>html Markup in the before section.

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/prototype/1.7.1/prototype.js'></script>
<script type='text/javascript'>//<![CDATA[ 
document.observe("dom:loaded", function(){
    document.on('click', 'input[type="checkbox"]', function (evt, elm) {
        var td = elm.up('td');
        td.nextSiblings().map(function (el) {
            if (elm.checked) {
                el.down().show();
            } else {
                el.down().hide();
            }
        });
    });
});//]]>  
</script>

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

thanks for the reply. Ill try that. Do I need to specify the names of the checkboxes in the code etc?

funny about the link… works for me on numerous devices that have never seen my dropbox account…

try this new drop box link or a secondary test host

https://db.tt/njUVlUm2

http://testttttttttt.comuv.com/tablecheck.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

also the link in that code brings up a 404?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oooohh it works :slight_smile: well almost.

David, the code you gave does the trick, except the fields default to being seen. If I check the box they stay there, but then uncheck it the disappear… so close.

I would love the titles of each column to be hidden unless one check box is check… I’ll try a work around as I reckon it might be a bit awkward


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oooohh it works - well almost.

The problem is that Walters fiddle is based on a hand coded example so the javascript is not quite correct when applied to a FW created Table.

To get Walters JS to work on a stock FW Table you will need to add some tweaks.

1 - Apply the Remove Paragraph Tags Action to each cell that contains a field you wish to be hidden FreewayActions.com | Beta Box

2 - Select each text field that you wish to hide and use Item>Extended, under the Input Tab create a new Name/Value pair of style and display:none ie

Give that a go and see if you get this http://deltadesign.co/FW7Test/table-test.html

Unfortunately this will not hide the headers too.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Dave,

unfortunately that didn’t work as planned… I followed your steps and it results in the fields now being hidden regardless of what happens with the checkbox…

https://db.tt/njUVlUm2


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I followed your steps and it results in the fields now being hidden regardless of what happens with the checkbox…

I am not seeing the Remove Paragragh Tag action on the cells containing the input fields.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I only did it on the first monday, and only on the fields after the second checkbox.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

View >Action Names and it should look like this

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

https://dl.dropboxusercontent.com/u/433431/rpt.tiff


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Well it is not being reflected in the code being output by FW.

Hold down the Ctrl Key and choose File>Publish Everything and re-upload

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

And you are adding the action to the Cell and NOT the input field?

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options