XHTML button only works in IE 6/7/8

StackOverflow https://stackoverflow.com/questions/21767935

  •  11-10-2022
  •  | 
  •  

Question

I don't know a whole lot and I'm still learning HTML, so I am hoping someone can help me figure out why this code my predecessor wrote only works in IE 6,7, and 8.

It's a simple script that upon entry of a phone number is supposed to provide access to an online application written in PHP. Only, in every browser but IE 6/7/8 it just doesn't do anything once clicked.

The code is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Online Application</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<script type='text/javascript' src='dFilter.js'>
</script>
<style type="text/css">
/*<![CDATA[*/
 table.c3 {background-color: #CCCCCC}
 span.c2 {font-size: 120%}
 h3.c1 {color: white; font-family: Arial; font-style: italic; font-weight: bold; text-align: center}
/*]]>*/
</style>
</head>
<body>
<h3 class="c1">Company Name</h3>
<script language='Javascript' type="text/javascript">
//<![CDATA[
function getinfo(txt){
if ((document.enterid.HPhone.value == '') || (document.enterid.HPhone.value == "() -") || (document.enterid.HPhone.value == "(000) 000-0000") || (document.enterid.HPhone.value == "(111) 111-1111") || (document.enterid.HPhone.value == "(222) 222-2222") || (document.enterid.HPhone.value == "(333) 333-3333") || (document.enterid.HPhone.value == "(444) 444-4444") || (document.enterid.HPhone.value == "(555) 555-5555") || (document.enterid.HPhone.value == "(666) 666-6666") || (document.enterid.HPhone.value == "(777) 777-7777") || (document.enterid.HPhone.value == "(888) 888-8888") || (document.enterid.HPhone.value == "(999) 999-9999") || (document.enterid.HPhone.value == "(123) 456-7890")) {
                    alert('Please enter yourhome phone number');
                    document.enterid.HPhone.focus();
                    return;
                }
document.getElementById('myssn').value = document.enterid.HPhone.value
document.getElementById('enterid').submit()
}
//]]>
</script>
<form name="enterid" method="post" action="apply.php" id="enterid"><input type="hidden" name="myssn" value=""/>
<table class="c3" width="60%" border="1" align="center">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td></td>
</tr>
<tr>
<td align="center">Please enter your home phone number: <input type="text" name="HPhone" onkeydown="javascript:return dFilter (event.keyCode, this, '(###) ###-####');" value="" maxlength="14"/></td>
</tr>
<tr>
<td align="center"><input name="btnstart" type="button" value="Get Application" onclick="getinfo('Hello')"/></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="center"><a href="http://www.companyurl.com">Company link</a></td>
</tr>
<tr>
<td align="center"><em><strong><span class="c2">You must be using Internet Explorer version 6, 7 or 8 to apply online.</span></strong></em></td>
</tr>
<tr>
<td align="center">Please note the page does <strong>NOT</strong> work with Mozilla, Firefox, Safari, Chrome, etc.</td>
</tr>
<tr>
<td align="center">text</a>.</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
Was it helpful?

Solution

I'm going to assume that all the extra newlines in your getinfo() function are the result of copy/pasting the code.

For example, this:

 "(111) 
111-1111")

Should be on a single line.

Next up: You're using this to get the form value: document.enterid.HPhone.

However, this input isn't inside the form. I can't imagine this working in any browser, but I maybe IE does some special magic-foo and guesses the correct element anyway.

You didn't post the full page, but moving your closing </form> below the closing </table> should fix it, assuming this is the only form in that table

Edit after new code

My browser's error console gives me the following error when I try to submit your form:

Error thrown at line 1, column 12 in <anonymous function>(event) in file://localhost/home/martin/a.html:
    return dFilter(event.keyCode, this, '(###) ###-####');
Uncaught exception: TypeError: Cannot convert 'document.getElementById('myssn')' to object

document.getElementById('myssn')' apparently returns null?

Searching your document for myssn reveals:
<input type="hidden" name="myssn" value=""/>

This element has the name attribute set, but not the id; as the name implies, document.getElementById only gets element by the id attribute, so let's update this element:

<input type="hidden" name="myssn" value="" id="myssn" />

Now, I don't see any error, and get redirected to apply.php

P.S.
I lied a little bit. I also get another error because the function dFilter isn't defined, this is loaded through the external dFilter.js script. I created my own little version of it.

P.P.S.
You should really learn about the error console! All browsers have one, and it's an extremely useful tool! You can access with with F12 or CTRL+SHIFT+I, depending on your browser.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top