Form submission w/IE6

[jamiller]

Okay so I'm building a very simple one textfield form. Once the input type=submit is pressed it calls some php script to run. The problem is with IE6 and the "enter" key. In IE7 and Firefox this works great when the user presses the Enter key rather than mouse clicking the Submit button. Mouse clicking the Submit button works without flaw on all browsers.

So to fix this I turned to JavaScript. Now the JavaScript works and fires just as it should but for some reason doesn't really "submit" the form meaning the PHP line: isset($_POST['do_send']) doesn't get set to true when the JavaScript code submit() fires. Here is my code:

EDIT: I should mention that the PHP form code is on the same page as the Form itself, hence the reason action="" is set this way. I did this so I can "easily" use the JavaScripts alert function for user feedback.

PHP:


<?php

//Newsletter submit code

$em = $_POST['em'];
$msg="";
//checks if submit button was pressed
if(isset($_POST['do_send'])) {
//email validation: checks for "@" and "."
if(!stristr($em, "@") OR !stristr($em, ".")) {
$msg = "Invalid email address. Please try again.";
echo "<script type='text/javascript'>alert('" . $msg . "')</script>";
//if valid email
} else {
$query = ("INSERT INTO newsletter (email) VALUES ('$em')");
$result = mysql_query($query);
//if there was an error. we're particularly interested in error 1062: duplicate entries
if(!$result) {
//if duplicate email entry
if(mysql_errno() == 1062) {
$msg = "We\'re sorry but this email already exists in our database. Please try again.";
echo "<script type='text/javascript'>alert('" . $msg . "')</script>";
}
//if email isn't already in the database enter it now
} else {
$msg = "Thank you for subscribing to the IHS newsletter. You can unsubscribe at any time by clicking a link in the email.";
echo "<script type='text/javascript'>alert('" . $msg . "')</script>";
}
}
} else {
//For debugging
$msg = "Form didn\'t submit.";
echo "<script type='text/javascript'>alert('" . $msg . "')</script>";
}

?>


Now the Form itself:


<form id="form1" method="post" action="" onsubmit="sendForm(event)">
Newsletter
<input type="text" value="Enter your email address" name="em" /><input id="newsbtn" name="do_send" type="submit" value="" style="background:transparent url(images/arrow_go.gif) no-repeat; border:none; width:33px; margin:1px 0 0 3px; cursor:hand; cursor:pointer" />
</form>


And finally the JavaScript:


function sendForm(event) {
if(event.keyCode == 13) {
submitForm();
}
}

function submitForm() {
document.getElementById('form1').submit();
}


I've searched all over to find a solution to my problem and haven't had any luck so any and all help will be greatly appreciated!

-Jeff

[jamiller]

Anybody? Anything?

[boogyman]

<form id="form1" method="post" action="" onsubmit="sendForm(event)">
Newsletter
<input type="text" value="Enter your email address" name="em" /><input id="newsbtn" name="do_send" type="submit" value="" style="background:transparent url(images/arrow_go.gif) no-repeat; border:none; width:33px; margin:1px 0 0 3px; cursor:hand; cursor:pointer" />
</form>

I would suggest that you get rid of the javascript.
whatever php script you would like to run when it's submitted it should be put into the action="" of the form. You might have just taken it out for purposes of privacy here?



<form action="/path/to/php_script" method="post">
<input type="text" name="em" value="Enter your email address">
<input type="submit" name="do_send" value="1">
</form>


What you also could do is assign the submit tag a value... to catch in your php script.

Using Javascript for a critical action is very risky because many people have it disabled. Javascript should just be an enhancement of your page, not something that is essential for it to function

[jamiller]

In my post I stated that the PHP script is in the same page as the form hence the reason action is equal to nothing although I suppose I could just take that out at this point. I built it this way because I wanted to use JavaScript's alert function to provide the user with feedback.

I'll take a look at the value option though, don't see how that would work but I've got nothing to lose!

Any other ideas?

Anybody?!

Oh, and I'm not using JavaScript as a "critical" action. It's only there to enhance the form for users of IE6, so they can use the Enter key on their keyboard rather than solely relying on the form to work by mouse-clicking the submit button.

[jscheuer1]

<input type="text" value="Enter your email address" name="em"
onkeydown="if(event.keyCode==13){this.form.submit();return false;};" />

That by itself should submit the form in any modern browser including IE 6 when hitting enter on that text field, and should override a twin submission in browsers that support the enter key in that field as a submit action by default.

Untested.

[jamiller]

Yeah, you would think that would work. It may be that I have to have php file in a different location (action="phpcode.php") to make it work (?). But the JavaScript is definitely firing but my php line: if(isset($_POST['do_send'])) isn't getting set to true when using the JavaScript submit.

Thanks for all the help though!

[jscheuer1]

Hmm, that should work. Perhaps something else you are doing is messing it up. It is so much easier to diagnose something like this when we can see the page, or at least an example page that demonstrates the problem:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[jamiller]

<?php include_once("includes/connection.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="favicon.ico" />
<meta name="keywords" content="Integrated Healthcare, Healthcare Solutions, IHS, InteliIChart, Interoperability, NextGen, NextGen EMR, NextGen EHR, NextGen EPM, Data Center, Security, Benchmark IQ, Revenue Cycle, Revenue Cycle Solutions, RCM Suite, Solution, Total Solution, Healthcare Total Solution, Single-Source, Clinical Data-Sharing, Data Share, Data Center Services, Healthcare Services">
<meta name="description" content="Consistently creating value for physician groups by becoming the single-source for fully integrated (EHR, EPM, Interoperability/Clinical Data-Sharing, Data Center Services) healthcare informatics and technology solutions">
<title>Integrated Healthcare Solutions - Innovation at the point of care</title>
<meta http-equiv="Content-Language" content="EN">
<meta name="revisit-after" content="14 days">
<meta name="robots" content="all">
<meta name="Copyright" content="Copyright 2007 Integrated Healthcare Solutions">
<!-- Consistently creating value for physician groups by becoming the single-source for fully integrated (EHR, EPM, Interoperability/Clinical Data-Sharing, Data Center Services) healthcare informatics and technology solutions -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/nav.css" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie6.css" />
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css" />
<![endif]-->

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="src/scriptaculous.js"></script>

</head>
<?php

//Newsletter submit code

$em = $_POST['em'];
$msg="";
//checks if submit button was pressed
if(isset($_POST['do_send'])) {
//email validation: checks for "@" and "."
if(!stristr($em, "@") OR !stristr($em, ".")) {
$msg = "Invalid email address. Please try again.";
echo "<script type='text/javascript'>alert('" . $msg . "')</script>";
//if valid email
} else {
$query = ("INSERT INTO newsletter (email) VALUES ('$em')");
$result = mysql_query($query);
//if there was an error. we're particularly interested in error 1062: duplicate entries
if(!$result) {
//if duplicate email entry
if(mysql_errno() == 1062) {
$msg = "We\'re sorry but this email already exists in our database. Please try again.";
echo "<script type='text/javascript'>alert('" . $msg . "')</script>";
}
//if email isn't already in the database enter it now
} else {
$msg = "Thank you for subscribing to the IHS newsletter. You can unsubscribe at any time by clicking a link in the email.";
echo "<script type='text/javascript'>alert('" . $msg . "')</script>";
}
}
} /*else {
//Debugging
$msg = "Form didn\'t submit.";
echo "<script type='text/javascript'>alert('" . $msg . "')</script>";
}*/

?>
<body>
<div id="shadow">
<div id="holder">
<div id="head">
<div id="headbg">
<div id="logo"><a href="index.php"><img src="images/logo.png" alt="Integrated Healthcare Solutions" /></a></div>
<div class="newslet" onmouseover="newsLetterOver(this);" onmouseout="newsLetterOut(this);">
<form id="form1" method="post">
Newsletter
<input type="text" value="Enter your email address" name="em" /><input id="newsbtn" name="do_send" type="submit" value="" style="background:transparent url(images/arrow_go.gif) no-repeat; border:none; width:33px; margin:1px 0 0 3px; cursor:hand; cursor:pointer" />
</form>
</div>
<div id="headlinks">
<span>Call us at 704.347.0661</span>
<span><a href="requestDemo.php">Request a Demo</a></span>
<span><a href="contact.php">Contact Us</a></span>
</div>
</div>
</div>


Well here it is. Have away!

I should mention that this is my header.php file which is an include in many other files.

[jscheuer1]

I would much rather have the link I requested. There are resources, scripts, styles, at least one include there that I don't have and/or can't be certain of the versions/modifications to, even for those I do. I wouldn't want to have to set it up on a server just to see the served code, which is what I really need to see, even if I had all of that. It looks like you are serving quirks mode to all IE browsers though, with that initial include falling before the DOCTYPE declaration, this may, or probably not have anything to do with the trouble, but would probably affect rendering in certain cases if not dealt with using alternate styles.

What I'd like is a link to a page that uses this include (the entire one from your post) that also demonstrates the problem.

[jamiller]

http://ja-miller.com/ihsolutions/

[jscheuer1]

OK, I see no hard coded events on the form in any browser, but I will just say IE 6, as that is what we are concerned with. The red parts aren't there:


<form id="form1" method="post" action="" onsubmit="sendForm(event)">

So, unless the event is assigned via script, it won't happen. Further, the form does submit on enter hit in the text field in IE 6, like in this simple unscripted demo:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<form method="post">
<input type="text" name="em"><input type="submit" value="go">
</form>
</body>
</html>

In short, without events assigned to the form, I cannot see what you expect to happen other than a default submission.