I have the following forms that are rendered by some PHP logic. The forms render fine; you can see the text inputs and submit button and all.
In IE the forms work as expected. The first form goes to 'index.php?subscribe=go' and the second to 'index.php?unsub=go', but in FF and Chrome, clicking the submit button reloads the page (does not go to form action). I have not checked other browsers.
I found in Firebug that the <form> tag doesn't even exist on the page in Firefox. This is very strange; check it out:
else
{
echo '<div class="subs_main">';
if (isset($_GET['subscribe']))
{
if ($_GET['subscribe'] != 'go')
{?>
Subscribe to <b>Bella Blog</b> for specials, sales, news and more!
<br />
<form action="index.php?subscribe=go" method="post" name="subscribe_form" onsubmit="return checkForm();">
Name: <input type="text" name="name" size="15" />
<br />
Email: <input type="email" name="email" size="20" />
<br />
<input type="submit" value="subscribe!" name="submit" />
</form>
<p class="unsub">You can <a href="index.php?unsub">unsubscribe</a> at any time</p>
<?php
}
else
{
// subscribe user
}
}
elseif (isset($_GET['unsub']))
{
if ($_GET['unsub'] != 'go')
{?>
Sorry to see you go! You can <a href="index.php?subscribe">re-subscribe</a> at any time!
<br />
<form onsubmit="return checkForm2()" name="unsub_form" method="post" action="index.php?unsub=go">
Email: <input type="email" name="email" size="20" />
<br />
<input type="submit" value="unsubscribe" name="submit" />
</form>
<?php
}
else
{
// process unsubscription HERE
}
}
echo '</div>';
}
This is the JS for form validation (negligible I think because it works in IE and I get the same result when commenting this script out):
<script type="text/javascript" language="javascript">
function checkForm()
{
var regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
var form = document.forms.subscribe_form;
var name = form.name.value;
var email = form.email.value;
if (name == '' || email == '')
{
alert('You must enter both your name and email address!');
return false;
}
else if (!email.match(regex))
{
alert('You must enter a valid email!');
return false;
}
return true;
}
function checkForm2()
{
var form = document.forms.unsub_form;
var email = form.email.value;
if (email == '')
{
alert('You must enter an email address!');
return false;
}
return true;
}
</script>
The <form> tag doesn't exist? Unless you have code that tailors the output to the USER_AGENT, any browser that passes a given set of GET/POST input to the page should receive identical output. It's possible, of course, that they'll render the page and respond to events in (potentially significantly) different ways, but the source code should be identical.
Post the page source and we can look and see what the issue might be.
If you use POST method into your forms all parameters should be passed through INPUT html elements (i.e. action="index.php?subscribe=go" and action="index.php?unsub=go" are wrong).
This was an outlandish WAMP issue. I had some other PHP code in the file that generated a WAMP error (but no error on the live site) that I've been ignoring because it is meaningless. 'Undefined index' is what it's called and the error appears when you call a PHP variable using $_POST[example] instead of $_POST['example']. Most ridiculous.
So WAMP spit out a bunch of HTML (error <table>s) that got mixed up with the other form on my page. IE can handle the messed up form being there and my form (shown in question) worked normally, while FF/Chrome cannot.
Hope this helps someone.