- This topic is empty.
May 7, 2014 at 10:43 am #169451
I previously posted a question at https://css-tricks.com/forums/topic/how-to-dynamically-hide-or-reveal-tables-rows-as-needed/ as it is not yielding any useful answers i am thinking of trying a different approach.
I have 13 subjects and have standalone topic specific webforms for 11 of those 13 subjects and can easily create standalone forms for the final 2 subjects.
So if I was to create a appropriately labeled button for each of the 13 subjects and place them in my contact us page and then on the contact us page place an iframe on the page how can i set the iframe to load the html page containing the desired form based on the button they click.
So if they click Website Design Enquiry Button it changes the src value of the iframe on the contact us page to http://www.admiralsystems.co.uk/Website Design Form.html and so on.
i know that this will make the page look somewhat unprofessional even with the best graphics in the world you can’t make such a setup look good but right now i have no other choice.
so any help will be greatly appreciated.May 8, 2014 at 12:22 am #169523dyrParticipant
Here’s a simple example: http://codepen.io/shawkdsn/pen/HCfxi
Instead of buttons I opted for a
<select>element and (in this simplified example) two
<option>elements. Each option elements’ value is the URL you want to load into the
switchIframeSrcsimply sets the
srcattribute of the iframe to the selected option’s value (the URL.)
I read through your other thread and I believe there’s a better solution to your problem, but I would need more information to determine exactly what that is. Forms can be tricky.May 8, 2014 at 12:31 am #169524
okay that certainly sounds like a good possibility
regarding my other thread what additional information do you need to assist me with that approach?
i am also looking at making my boss pay $10 a month subscription to wufoo in order to resolve this issue which i know he will not be too happy about but if i can’t figure out the coding side of things then i may well have to insist on it.
so any help you can provide would be greatly appreciated.May 8, 2014 at 5:52 am #169546
i btried to implement your code but it didnt work the dropdown is there but it doesnt change the page
i have no idea why this wouldnt work
here is the link to my codepen for this project
it should work but doesn’t any ideas why it isn’t working?May 8, 2014 at 9:38 am #169559benjaminmisellParticipant
Check that the websites dont have x-frame-options is not set to “sameorigin” or “deny” otherwise it wont workMay 8, 2014 at 9:57 am #169560
where is this x frame thingy then as i tested my html in codepen with your js and it worked but when i do it on my website it will not function.May 8, 2014 at 10:22 pm #169592benjaminmisellParticipant
It’s in the headers and it might be that you’r hosting provider does not allow iframes.May 9, 2014 at 2:42 am #169599
none of the code on any of my sites pages mention x frame in any way shape or form.
the page to be displayed in the iframe is on the same site as the contact us page itself even in the same folder i have total access to the domain.
i am hosting with heart internet but they do support iframes as if you go to http://www.admiralsystems.co.uk which is the site i am having this issue on note the social icons at the top of each page they are on a page called social media.html in the root of the site and displayed in the top of every page using an iframe and that iframe gives me no trouble
Read more at MDN about Iframe Same-Origin policies. This is a server configuration.
Notice in my example the URLs I’ve linked in the
<select>are CodePEN URLs which of course have no problem being shown in an Iframe on CodePEN. Could you try something like what I showed but on your site? As long as the page the Iframe is on and the URL you load into it are on the same domain you won’t have that problem.