Question

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>

Answer 1

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.