Welcome to WebmasterWorld Guest from 18.232.53.231

Forum Moderators: open

Message Too Old, No Replies

<form>, <iframe>, <object>--AND--XHTML !

     
6:01 pm on Mar 3, 2016 (gmt 0)

New User

5+ Year Member

joined:Mar 14, 2014
posts:29
votes: 0


Background

On my "Google drive" I set up a contact form to use on my Web sites. However, in order to customize it, I did not use the embedding code on a Web site page, but copied and pasted the entire <form>...</form> section of the code into my page in order to create a contact form. This eliminated unnecessary links in Google's code, and also allowed me to customize the form with my own CSS.

Then I found some Javascript code online to validate the email address input and also some Javascript code (not php code!) for a captcha. I also installed code that brings up my own "thank you" page (not the standard Google thank-you page) once the form is successfully submitted.

Everything works perfectly!

Problem

BUT, I always put all my pages through the W3C validator for XHTML 1.0 Strict. I even have their little success logo at the bottom of every page on all my Web sites. When I proudly put my new contact form page through the validator, to quote Capt. Renault, I was "Shocked! Shocked!" :o Quite few Items in the code are not supported in XHTML Strict. I did some Goggling and went to many Web sites to find ways to bring the code I had in this contact form up to XHTML Strict standards. After a whole day of fiddling, I have not succeeded. So here's a call for help. I would certainly appreciate any suggestions any of you might have.

Current Non-XHTML Code

The following code is just before the <form> tag; the <form> tag itself is also displayed here, and the <input> submit tag later in the code is shown as well--


<script type="text/javascript">
//<![CDATA[
<script type="text/javascript">
var submitted=false;
//]]>
</script>

<iframe name="hidden_iframe"
id="hidden_iframe"
style="display:none;"
onload="if(submitted){window.location='ThankYouNew.html';}">
</iframe>

<form action="https://docs.google.com/forms/d/1omcsxmunEkwUscUHp2i2CM3eQlX4PsMXAHcC9fh_J-o/formResponse" method="post" id="ss-form" target="hidden_iframe" onsubmit="return checkform(this)">
.
.
.
<input type="submit" name="submit" value="Submit" id="ss-submit" class="jfk-button jfk-button-action "/>


The function checkform(this) contains all the Javascript code to check the entered email address and for the captcha.

As you probably know, and as I just found out, XHTML Strict does not support iframe. It also doesn't support the "target" attribute in the <form> tag.

My Attempts to Fix

I tried using <object> instead of <iframe>. Couldn't get it to work.

I tried writing a Javascript function that would execute the Javascript code currently in the <iframe>--


if(submitted){window.location='ThankYouNew.html';}


Nothing I tried either in the <form> tag or the <input> submit tag would execute the function.

So...any ideas on how I can bring this code up to XHTML Strict standards?

Thanks so much.

Ken
2:49 pm on Mar 4, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


One question you may want to ask yourself is this: Are you REALLY using XHTML? If you are serving your document as type "text/html", then no, you really are not (and as such, you should probably not be writing XHTML). The good news is that you can just use HTML5, which allows XML-like syntax in the same places that XHTML does. My suggestion would be to upgrade to HTML5.
3:17 pm on Mar 4, 2016 (gmt 0)

New User

5+ Year Member

joined:Mar 14, 2014
posts:29
votes: 0


Thanks so much for getting back to me, Fotiman.

I believe I am writing XHTML 1.0 Strict code. Here's my DOCTYPE:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">


When I submit finished pages to the w3 validator, it always says, "This document was successfully checked as XHTML 1.0 Strict!" I made the commitment years ago and would like to stick to it.

The goal is to make the contact form code load MY "thank you" page (replacing the contact form page in the same tab), instead of the standard Google form "thank you" page. The non-xhtml code in my first post does this perfectly. So...the question is: how can I modify that code to make it xhtml strict?

One thing I failed to mention in my first post: after two days of fiddling with the code myself, I believe it is the "target" attribute that somehow suppresses the Google form "thank you" page.

Thanks again. I look forward to your suggestions.

Ken
3:46 pm on Mar 4, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


Yes, you are WRITING XHTML. But, are you SERVING XHTML or are you serving text/html? If the latter, then you should read this:
[hixie.ch...]
5:27 pm on Mar 4, 2016 (gmt 0)

New User

5+ Year Member

joined:Mar 14, 2014
posts:29
votes: 0


I looked at the article and printed it off. But I was aware of some of that already. I knew I was using:
content="text/html; charset=utf-8"
instead of:
application/xhtml+xml
I know I would also need to name the files .xhtml rather than .html to get the browsers to interpret them as xhtml code. I'll look into it again, but that's for another day. The question still remains as to how to modify the code in this contact form to make it xhtml strict while still accomplishing the goal I mentioned in the previous post. Any suggestions on how to do thatt?
6:38 pm on Mar 4, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


There is no good way to achieve it. One option would be to inject an iframe into your DOM using JavaScript (as opposed to having the iframe within the markup). Then it would validate. But this is really complicating an issue that is not even worth the effort.

XHTML is dead. You can still write XML-valid HTML5 and achieve the best of both worlds. I would highly encourage you to switch to the HTML5 doctype:
<!DOCTYPE html>

It's much easier and more efficient than trying to shoehorn invalid XHTML into an XHTML document (that's not REALLY XHTML anyway since it's being served at HTML). If you're serving HTML, then treat your document as such and give it an appropriate DOCTYPE.

My 2 cents.
12:21 am on Mar 5, 2016 (gmt 0)

New User

5+ Year Member

joined:Mar 14, 2014
posts:29
votes: 0


For THIS Web page, and to save me what sounded like a lot of work, I changed to the html5 doctype. After cleaning up some bad code that was in the original Google form that I downloaded, it now passes the validator as html5--with iframe and target still in the code!

But I'll have to do some more research and thinking about abandoning xhtml. Hopefully, if I have any questions, you'll still give me your "2 cents." :)

Thanks again for all your help.

Ken
2:10 am on Mar 5, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


Cautious investigation is always a wise approach. :) Glad to help.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members