Script Works in Explorer but Not in Firefox

Discussion in 'Javascript' started by goober, May 23, 2006.

  1. goober

    goober Guest

    Ladies & Gentlemen:

    I have built a form that client-side validates and posts data to a CRM
    beautifully in Internet Explorer (IE) 6. The problem comes in FireFox
    (FF) 1.5 when everything works except the validation. In FF it posts
    fine to my CRM but with no validation!

    Here are snippets of my code together after taking out as much as I can
    for brevity sake.

    This form, when working, should be able to be filled out, client-side
    validated, and then the data posts to SalesForce (our corporate CRM).
    This whole process works fine in IE, just not in FF.

    Please also note that I am not a programmer by trade, just a web
    schmuck trying to get a form to work.

    Thanks for any help you can provide.

    Ken

    <script Language="JavaScript" Type="text/javascript">

    function My_Validator()
    {

    //Validation for Last Name Content
    if (TheForm.first_name.value == "")
    {
    alert("Please enter a value for the \"first_name\" field.");
    TheForm.first_name.focus();
    return (false);
    }

    //AND MANY OTHER FIELD VALIDATIONS OMITTED HERE FOR BREVITY

    return (true);
    }
    </SCRIPT>

    <form
    action="http://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8"
    method="POST" onsubmit="return My_Validator();" language="JavaScript"
    name="TheForm">

    <input type="hidden" name="lead_source" value="Web Form" />
    <input type="hidden" name="Campaign_ID" value="701300000000zjq" />
    <input type="hidden" name="oid" value="00D300000000FEp" />
    <input type="hidden" name="retURL"
    value="http://www.knowitall.com/forms/cd/response.html" />

    <table border="0" cellpadding="2" style="border-collapse: collapse"
    width="842" id="table2">
    <tbody>

    <tr>
    <td width="196">First Name: </td>
    <td colspan="2">&nbsp;<input name="first_name" id="first_name"
    type="text" size="50" maxlength="40" /><sup>*</sup></td>
    </tr>

    //AND MANY OTHER FIELDS OMITTED HERE FOR BREVITY

    <input type="submit" name="submit" style="font-family: verdana;
    font-size: 9pt" value="Send Form Now" /> </p>

    </form>
    goober, May 23, 2006
    #1
    1. Advertising

  2. goober

    Matt Kruse Guest

    goober wrote:
    > In FF it posts fine to my CRM but with no validation!


    Hopefully this is an annoyance rather than a problem, as server-side
    validation should exist also :)

    > if (TheForm.first_name.value == "")


    You are using TheForm to refer to your form object. This is an IE trick
    which makes the name TheForm available as a global variable.
    Instead, you should reference the form properly.
    See the instructions here for how to reference a form and its elements:
    http://www.javascripttoolbox.com/bestpractices/

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
    http://www.AjaxToolbox.com
    Matt Kruse, May 23, 2006
    #2
    1. Advertising

  3. goober

    goober Guest

    Unfortuneately, there is no server-side validation currently. There
    should be some probably but honestly, I do not know how to do that.
    Can anyone help out with that given the code above? --Ken
    goober, May 23, 2006
    #3
  4. goober

    Matt Kruse Guest

    goober wrote:
    > Unfortuneately, there is no server-side validation currently. There
    > should be some probably but honestly, I do not know how to do that.
    > Can anyone help out with that given the code above? --Ken


    First, you should quote what you are replying to. "Above" doesn't mean
    anything to most people using non-web-based news readers.

    Creating server-side validation depends entirely on the technology on the
    server, which would make it appropriate in a different group.

    The problem with your client-side validation was pointed out in the original
    reply.

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
    http://www.AjaxToolbox.com
    Matt Kruse, May 23, 2006
    #4
  5. goober

    RobG Guest

    goober wrote:
    > Ladies & Gentlemen:
    >
    > I have built a form that client-side validates and posts data to a CRM
    > beautifully in Internet Explorer (IE) 6. The problem comes in FireFox
    > (FF) 1.5 when everything works except the validation. In FF it posts
    > fine to my CRM but with no validation!
    >
    > Here are snippets of my code together after taking out as much as I can
    > for brevity sake.
    >
    > This form, when working, should be able to be filled out, client-side
    > validated, and then the data posts to SalesForce (our corporate CRM).
    > This whole process works fine in IE, just not in FF.
    >
    > Please also note that I am not a programmer by trade, just a web
    > schmuck trying to get a form to work.
    >
    > Thanks for any help you can provide.


    Matt has already pointed out your main issues - the use of a form name
    as a global variable and not having server-side validation also. A few
    extra comments:


    > <script Language="JavaScript" Type="text/javascript">


    Drop the language attribute, it's been deprecated for years.


    > function My_Validator()


    It is common practice to use capital letters for function names where
    the function is used as a constructor. Otherwise, use a lower case
    letter. It also helps to make the name more meaningful, say:

    function salesForceValidator()


    > {
    >
    > //Validation for Last Name Content


    For maintenance sake, the input named 'first_name' should probably be
    for a person's first name, not their last :)


    > if (TheForm.first_name.value == "")


    If you are going to use an object property more than once, it is good to
    keep a reference to it and use that subsequently - it is more efficient
    and (usually) saves typing. If it is a persons name, you may want to
    test that one or more letters were added, rather than just anything:

    var form = document.TheForm;
    var fName = form.first_name;
    if (! /\w/.test(fName.value)) // False if at least one letter entered


    > {
    > alert("Please enter a value for the \"first_name\" field.");


    You can nest double quotes inside single quotes (and vice versa). A
    common practice is to use single quotes in JavaScript and double in
    HTML. Also, prompt the user with the field name that they see on the
    face of the form, not what you are using in the program, with language
    that makes sense to them:

    alert('Please enter a name in the "First Name" field.');


    > TheForm.first_name.focus();



    It's good to test methods before using them:

    if (fName.focus) fName.focus();


    > return (false);


    There's no need for the parenthesis around 'false', it does nothing useful:

    return false;


    > }
    >
    > //AND MANY OTHER FIELD VALIDATIONS OMITTED HERE FOR BREVITY
    >
    > return (true);


    return true;

    Usually that isn't necessary - if false isn't returned, the form will
    submit.


    > }
    > </SCRIPT>
    >
    > <form
    > action="http://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8"
    > method="POST" onsubmit="return My_Validator();" language="JavaScript"


    There is no 'language' attribute for a form. There is a 'lang'
    attribute, but that is intended to specify "the base language of an
    element's attribute values and text content."

    The value "JavaScript" is unlikely to be useful. ;-)

    <URL:http://www.w3.org/TR/html4/struct/dirlang.html#adef-lang>


    > name="TheForm">
    >
    > <input type="hidden" name="lead_source" value="Web Form" />
    > <input type="hidden" name="Campaign_ID" value="701300000000zjq" />
    > <input type="hidden" name="oid" value="00D300000000FEp" />
    > <input type="hidden" name="retURL"
    > value="http://www.knowitall.com/forms/cd/response.html" />


    Unless this is XHMTL (and your attribute names make me think it isn't),
    don't use ' />' for empty elements, use correct HTML: '>'


    > <table border="0" cellpadding="2" style="border-collapse: collapse"
    > width="842" id="table2">
    > <tbody>
    >
    > <tr>
    > <td width="196">First Name: </td>
    > <td colspan="2">&nbsp;<input name="first_name" id="first_name"
    > type="text" size="50" maxlength="40" /><sup>*</sup></td>
    > </tr>
    >
    > //AND MANY OTHER FIELDS OMITTED HERE FOR BREVITY
    >
    > <input type="submit" name="submit"


    Don't ever name a submit button 'submit', it will mask the form's submit
    method so that you can't call it. It may not matter here, but it is bad
    practice and will cause you a problem eventually.

    You should only give an element a name if it needs it. There are two
    main reasons to give a submit button a name:

    1. You have multiple submit buttons and want to know which
    one was used

    2. You want to use the name to access the button

    Neither case seems to apply here, so probably just remove the button's
    name attribute.

    [...]


    --
    Rob
    Group FAQ: <URL:http://www.jibbering.com/faq/>
    RobG, May 24, 2006
    #5
  6. goober

    goober Guest

    Matt & Rob:

    With your help I was able to get the form working properly in FireFox.
    I also appreciate the "over and beyond" effort you have given Rob in
    helping me as a non-programmer. In the upcoming months I intend to get
    some basic JS classes/tutorails/books so that I can at least have a
    foundation to be able to start to begin to understand how this all
    works. Do you either of you have suggestions on where one would want
    to start learning JS. I would like something that is relatively
    hands-on instead of just readinig it all out of a book.

    Again, I really appreciate your time and help, thanks!

    Ken
    goober, May 24, 2006
    #6
  7. goober wrote :
    > Ladies & Gentlemen:
    >
    > I have built a form that client-side validates and posts data to a CRM
    > beautifully in Internet Explorer (IE) 6. The problem comes in FireFox
    > (FF) 1.5 when everything works except the validation. In FF it posts
    > fine to my CRM but with no validation!
    >
    > Here are snippets of my code together after taking out as much as I can
    > for brevity sake.
    >
    > This form, when working, should be able to be filled out, client-side
    > validated, and then the data posts to SalesForce (our corporate CRM).
    > This whole process works fine in IE, just not in FF.
    >
    > Please also note that I am not a programmer by trade, just a web
    > schmuck trying to get a form to work.
    >
    > Thanks for any help you can provide.
    >
    > Ken
    >
    > <script Language="JavaScript" Type="text/javascript">
    >


    Language is deprecated; type is both backward and forward-compatible.
    Use only type.

    > function My_Validator()
    > {
    >
    > //Validation for Last Name Content
    > if (TheForm.first_name.value == "")


    I'm not going to repeat everything which was said but I am going to tell
    you to rely on DOM 2 HTML attributes and methods which are well
    supported by modern browsers (including MSIE 6 and MSIE 7):

    http://www.w3.org/TR/DOM-Level-2-HTML/html.html

    and also to read

    Using Web Standards in Your Web Pages
    Accessing Elements with the W3C DOM
    http://www.mozilla.org/docs/web-developer/upgrade_2.html#dom_access

    which contains all one needs to look for in order to fix this sort of
    issues.

    Gérard
    --
    remove blah to email me
    Gérard Talbot, May 27, 2006
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ed Hauptman
    Replies:
    7
    Views:
    1,013
    Ed Hauptman
    Aug 7, 2009
  2. Rollie72

    Script works in Firefox but not IE

    Rollie72, Feb 21, 2007, in forum: Javascript
    Replies:
    1
    Views:
    120
  3. gray_slp
    Replies:
    3
    Views:
    125
    Geoffrey Summerhayes
    Jun 27, 2007
  4. garey
    Replies:
    1
    Views:
    120
    Thomas 'PointedEars' Lahn
    Apr 30, 2009
  5. garey
    Replies:
    19
    Views:
    230
    David Mark
    May 7, 2009
Loading...

Share This Page