Form dead in Firefox

Question

Helianthus 12 Junior Poster in Training

14 Years Ago

Hi all,

I have a new form that is not responding in the Firefox browser and I can not figure out why. The code is:

        <form action="http://www.hostmonster.com/monstermail" enctype="multipart/form-data" method="post">

                <fieldset id="contact">
                    <label for="fName">First name</label>
                        <input name="fName" id="fName" required="required" />            

                    <label for="lName">Last name</label>
                        <input name="lName" id="lName" required="required" />

                    <label for="biz">Company name</label>
                        <input name="biz" id="biz" />

                    <label for="phone">Phone</label>
                        <input name="phone" id="phone" type="text" />

                    <label for="email">Contact Email</label>
                        <input name="email" id="email" type="email" required="required" />

                    <label for="message">Message</label>
                        <textarea name="notes" id="message" required="required" >
                        </textarea>  
                </fieldset>

                <p>
                    <input type="hidden" name="sendtoemail" value="mobile@badgarden.com" />
                    <input type="submit" value="Send" />
                    <input type="hidden" name="redirect" value="" />
                </p>

            </form>

html-css web-browser

3 Contributors
8 Replies
206 Views
16 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by Helianthus

Dani AI

Generated 7 Months Ago

When form controls ignore clicks in one browser the cause is almost always something sitting on top of the inputs or a global script swallowing pointer events. suggestion to add an alert to the first textbox was exactly the right quick test, and confirmation that removing spam/protect scripts fixed the problem proves it was JavaScript intercepting clicks (often code that disables right-click or attaches capture-phase handlers).

Quick reproducible tests to run now:

Temporarily remove or comment out external scripts (protect.js, spam.js) and retest.
Add a small click listener to an input to confirm whether clicks reach the control. For example, run this in the console (or add it to a test script):
```
document.getElementById('fName').addEventListener('click', function(){ alert('clicked'); }, false);
```

In the console, log the element under the pointer while clicking to see what actually receives events:

window.addEventListener('click', function(e){
  console.log(document.elementFromPoint(e.clientX, e.clientY));
}, true);

If tests show an unexpected element getting the clicks, look for:

Transparent overlays or positioned elements with a higher z-index. Temporarily set suspected overlays to pointer-events: none to test.
Global event handlers bound to document or window that call preventDefault() or return false for mouse events (especially handlers intended to disable contextmenu). Narrow those handlers or check event.button/event.type so left-clicks are not blocked.
CSS problems like pointer-events: none on the form itself or accidental absolute positioning.

A final note on doctypes: use a consistent doctype and content type. If you are not serving XHTML as application/xhtml+xml, drop the XML prolog and use a standard HTML doctype to avoid odd parsing differences. The practical fix here is what worked: remove or correct the protective scripts so they no longer intercept normal clicks.

All 8 Replies

Djmann1013 0 Mr. Parker

14 Years Ago

It seems to be working. I have the latest Firefox. It is obviously your version of firefox. Get the latest version and tell me if it works.

hericles 289 Master Poster

14 Years Ago

To make it clearer for us you could have mentioned that the problem is that the textboxes don't get focus so you can't type in them. Tabbing also works to get into the textbox by the way but it still isn't very user friendly.
The code works fine if I paste it into a test page of my own. Is there anything else on the page that would be intercepting the click events of the textboxes? Does adding tabindex="1" to the first textbox help?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Helianthus 12 Junior Poster in Training · Answer 1 · 2012-07-30T19:54:34+00:00

I have the most current version of Firefox. The only way it is working is by first clicking on the send button, which is not very user intuitive...

Helianthus 12 Junior Poster in Training · Answer 2 · 2012-07-31T01:43:28+00:00

Tab indexing.. it has been so long since I had built a site that I forgot about that. I do have some javascript protection scripts in place to protect content. Could they be interferring? Also, I have gotten confused by the different requirements for doctypes for HTML5 vs XHTML. Maybe poorly written code there is causing the problem?

Here is the page code in its entirety:

<?xml version="1.0" encoding="UTF-8" ?>

<!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>

   <!--
      Final Project
      badGarden website
      Author:   Carol Bernard
      Date: July 25, 2012
      Filename: contact.htm


   -->
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="keywords" content="badGarden, bad garden, graphic art, music, Peter Bernard, Carol Bernard, websites,logos, artist" />

    <title>Contact badGarden</title>
        <script src="modernizr-1.5.js" type="text/javascript"></script>
        <script src="protect.js" type="text/javascript"></script>
    <link href="bg_styles.css" type="text/css" rel="stylesheet" />
        <link href="contact.css" rel="stylesheet" type="text/css" />

    <script src="spam.js" type="text/javascript"></script>


    <script type="text/javascript">
        function stringReverse(textString) 
        {
            if (!textString) return '';
            var revString='';
            for (i = textString.length-1; i>=0; i--)
                revString+=textString.charAt(i)
            return revString;
        }

        function showEm(userName, emServer) 
        {
            userName = stringReverse(userName);
            emServer = stringReverse(emServer); 

            var emLink = userName + "@" + emServer;  
            document.write("<a href='mailto:" + emLink + "'>"); 
            document.write(emLink); 
            document.write("</a>"); 
        }       
    </script>


   </head>

   <body>
    <section id="main">

<!-- header -->
    <header>
        <section class="logo">
            <a href="index.htm">
                <img src="_images/logo.png" alt="badGarden" />
            </a>
        </section>
        <nav class="prNav">
            <ul>
                <li><a href="about.htm">about</a></li>
                <li><a href="music.htm">music</a></li>
                <li><a href="imagery.htm">imagery</a></li>              
                <li><a href="contact.htm">contact</a></li>
            </ul>
        </nav>
    </header>


<!-- content -->

    <section id="content">
        <section class="aside1">
            <h1>Contact Information</h1>
            <h2>badGarden</h2>
            <p>11 Manley Street</p>
            <p>Augusta, ME 04330</p>
            <p>E: <a>
            <script type="text/javascript">
                showEm("elibom","moc.nedragdab");
            </script></a></p>

            <p>T: 207-402-4621</p>
        </section>


        <section class="aside2">
            <h1>Contact badGarden</h1>
            <form action="http://www.hostmonster.com/monstermail" enctype="multipart/form-data" method="post">

                <fieldset id="contact">
                    <label for="fName">First name</label>
                        <input name="fName" id="fName" required="required" />            

                    <label for="lName">Last name</label>
                        <input name="lName" id="lName" required="required" />

                    <label for="biz">Company name</label>
                        <input name="biz" id="biz" />

                    <label for="phone">Phone</label>
                        <input name="phone" id="phone" type="text" />

                    <label for="email">Contact Email</label>
                        <input name="email" id="email" type="email" required="required" />

                    <label for="message">Message</label>
                        <textarea name="notes" id="message" required="required" >
                        </textarea>  
                </fieldset>

                <p>
                    <input type="hidden" name="sendtoemail" value="mobile@badgarden.com" />
                    <input type="submit" value="Send" />
                    <input type="hidden" name="redirect" value="" />
                </p>

            </form>
        </section>

    </section>

<!-- footer -->
    <footer>
        <p>&#169; Copyright 2012 badGarden All Rights Reserved</p>
    </footer>

  </body>

</html>

Djmann1013 0 Mr. Parker · Answer 3 · 2012-07-31T02:09:44+00:00

Djmann1013 0 Mr. Parker

14 Years Ago

It's working for me. It must be your end.

Helianthus 12 Junior Poster in Training · Answer 4 · 2012-07-31T10:38:38+00:00

It is not "my end". The form has been tested on multiple independent computers and is still not functioning properly.

hericles 289 Master Poster Featured Poster · Answer 5 · 2012-07-31T10:50:00+00:00

Try a simple test: add a javascript function to the first textbox so it prompts an alert when clicked. If that alert doesn't come up when you try and click on it then you have something intercepting the clicks on the form.
What does spam.js do?

Helianthus 12 Junior Poster in Training · Answer 6 · 2012-07-31T11:36:31+00:00

spam.js shouldn't have been there. I put the function in my head and forgot to remove the link to the external file... Thanks for catching it. It is a text reverse function for the email address on the page.

I removed another one as well and that made the difference. The form didn't like the scripts that deactivated right clicking.

Form dead in Firefox

Dani AI

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers