Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    document.getElementById has no properties Error

    Folks,

    It has been a while since I have coded in Javascript so if this error is obvious, I apologize. I am getting document.getElementById("Badd1") has no properties Error in line 71 of the following code. originally I anly had my form variables with a name tag but I have included ID tags on all fields as well. then I though the Javascript may not be loading until after the form so I included the windows.onload=advance; line but still to no avail.

    My code works in IE but not Firefox. I would appreciate any help as I have been staring at this for a week.

    <script type="text/javascript">
    function advance() {
    var fname = document.getElementById("FullName").value;
    var badd1 = document.getElementById("BAdd1").value;
    var bcity = document.getElementById("BCity").value;
    var bzip = document.getElementById("BZip").value;
    var email = document.getElementById("emailaddress").value;
    var sadd1 = document.getElementById("SAdd1").value;
    var scity = document.getElementById("SCity").value;
    var szip = document.getElementById("SZip").value;
    var to = document.getElementById("Age_Verify").checked;
    var ccname = document.getElementById("CC_Name").value;
    var cctype = document.getElementById("CCType").value;
    var ccnumber = document.getElementById("CC_Number").value;
    var Fest = document.getElementById("T_GF").value;
    var Dinner = document.getElementById("T_WMD").value;

    var error = "";
    if ((Fest == "0") && (Dinner== "0")) {
    error = error + "-No Tickets Were Ordered\n";
    }
    if (fname=="") {
    error = error + "-Full Name\n";
    }
    if (badd1=="") {
    error = error + "-Billing Address\n";
    }
    if (bcity=="") {
    error = error + "-Billing City\n";
    }
    if (bzip=="") {
    error = error + "-Billing Zip Code\n";
    }
    if (email=="") {
    error = error + "-Email\n";
    }
    if (sadd1=="") {
    error = error + "-Shipping Address\n";
    }
    if (scity=="") {
    error = error + "-Shipping City\n";
    }
    if (szip=="") {
    error = error + "-Shipping Zip Code\n";
    }
    if (ccname=="") {
    error = error + "-Credit Card Name\n";
    }
    if (cctype=="") {
    error = error + "-Credit Card Type\n";
    }
    if (ccnumber=="") {
    error = error + "-Credit Card Number\n";
    }
    if (error != "") {
    alert("The following fields are required:\n"+error)
    if (!to) {
    alert("You must verify that you are over 21 by clicking the checkbox.")
    }
    } else if (!to) {
    alert("You must verify that you are over 21 by clicking the checkbox.")
    } else {
    document.getElementById("form1").submit();
    }
    }
    window.onload=advance;
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <link href="/bawp2004.css" rel="stylesheet" type="text/css" />
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <title>Pinot Days Order Form</title>

    <link href="bawp2004.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    a:link {
    color: #660000;
    text-decoration: underline;
    }
    a:visited {
    text-decoration: underline;
    }
    a:hover {
    text-decoration: underline;
    }
    a:active {
    text-decoration: underline;
    }
    body {
    background-color: #33460C;
    }
    -->
    </style>
    <script type="text/javascript" src="../p7pm/p7popmenu.js"></script>
    <style type="text/css" media="screen">
    <!--
    @import url("../p7pm/p7pmh1.css");
    .style22 {color: #FFFFFF}
    -->
    </style>
    </head>
    <link href="/bawp2004.css" rel="stylesheet" type="text/css" />

    <body onload="P7_initPM(1,1,1,-20,10)">
    <table width="1026" height="604" align="center" cellpadding="0" cellspacing="0" bgcolor="#33460C">
    <tr>
    <td height="199" align="left" valign="top"> <table width="1031" border="0" align="center" cellpadding="0" cellspacing="0">

    <tr>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td width="1031"><div align="center"><span class="pinothdrsmallBOLD">Pinot Days Event Order Form </span></div></td>
    </tr>

    <tr>
    <td><table width="963" border="0" cellspacing="10" cellpadding="0">
    <tr>
    <td width="943" ><div class="pinothdrsmallBlack">
    </div></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td><form method="POST" name="form1" action="">
    <table width="964" align="center">
    <tr valign="baseline">
    <td width="155" align="right" nowrap>Full Name*:</td>
    <td width="386" align="left">
    <div><input name="FullName" id="FullName" type="text" class="inputfield_small" value="" size="40" maxlength="40"> </td>
    <td width="95" align="right">&nbsp;</td>
    <td width="308">&nbsp;</td>
    </tr>
    <tr valign="baseline">
    <td nowrap align="right">Address*:</td>
    <td align="left">
    <input name="Badd1" type="text" class="inputfield_small" id="Badd1" value="" size="60" maxlength="75"> </td>
    <td align="right">&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr valign="baseline">
    <td nowrap align="right"></td>
    <td align="left">
    <input name="BAdd2" type="text" class="inputfield_small" id="BAdd2" size="60" maxlength="75"> </td>
    <td align="right">&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr valign="baseline">
    <td nowrap align="right">City*:</td>
    <td align="left"><input name="BCity" type="text" class="inputfield_small" id="BCity" size="30" maxlength="30" /></td>
    <td align="right">&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr valign="baseline">
    <td align="right" nowrap="nowrap">State*:</td>
    <td align="left"><select name="BState" size="1" class="inputfield_small" id="BState">
    <option value=" ">-- Please Select a Billing State --</option>
    <%
    While (NOT statelist.EOF)
    %>
    <option value="<%=(statelist.Fields.Item("StateID").Value)%>"><%=(statelist.Fields.Item("StateID").Value)%></option>
    <%
    statelist.MoveNext()
    Wend
    %>
    </select></td>
    <td align="right">&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr valign="baseline">
    <td nowrap align="right">Zip Code*:</td>
    <td align="left"><input name="BZip" type="text" class="inputfield_small" id="BZip" size="15" maxlength="15" /></td>
    <td align="right">&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr valign="baseline">
    <td nowrap align="right">Email Address*: </td>
    <td align="left"><input name="emailaddress" type="text" class="inputfield" id="emailaddress" size="60" maxlength="60" /></td>
    <td align="right">&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr valign="baseline">
    <td nowrap align="right">Telephone:</td>
    <td align="left"><input name="telephone" type="text" class="inputfield" id="telephone" size="15" maxlength="20" /></td>
    <td align="right">&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr valign="baseline">
    <td colspan="4" align="right" nowrap><div align="left">
    <hr />
    </div></td>
    </tr>
    <tr valign="baseline">
    <td colspan="2" align="right" nowrap><div align="left"><span class="Header_1"><b>Shipping Information</b>&nbsp;&nbsp;&nbsp;</span></div></td>
    <td align="right">&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr valign="baseline">
    <td width="155" align="right" class="Standard_Text">Same as Billing:&nbsp;</td>
    <td width="386" align="left" class="Standard_Text"><input name="checkbox" type="checkbox" class="form_input_small" id="same" onclick="sUpdate()" value="same" /></td>
    <td align="right">&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr valign="baseline">
    <td height="28" align="right" class="Standard_Text">Address:&nbsp;</td>
    <td class="Standard_Text" align="left"><input name="SAdd1" type="text" class="inputfield_small" id="SAdd1" value="<%= SAdd1%>" size="60" maxlength="75" onchange="addUpdate('SAdd1')"/></td>
    <td align="right">&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr valign="baseline">
    <td height="28" align="right" class="Standard_Text"></td>
    <td class="Standard_Text" align="left"><input name="SAdd2" type="text" class="inputfield_small" id="SAdd2" value="<%= SAdd2%>" size="60" maxlength="75" onchange="addUpdate('SAdd2')"/></td>
    <td align="right">&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr valign="baseline">
    <td height="28" align="right" class="Standard_Text">City:&nbsp;</td>
    <td class="Standard_Text" align="left"><input name="SCity" type="text" class="inputfield_small" id="SCity" value="<%= SCity%>" size="35" maxlength="40" onchange="addUpdate('SCity')"/></td>
    <td align="right">&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr valign="baseline">
    <td height="28" align="right" class="Standard_Text">State:&nbsp;</td>
    <td align="left"><select name="SState" size="1" class="inputfield_small" id="SState">
    <option value=" ">-- Please Select a Shipping State --</option>
    <%
    statelist.movefirst
    While (NOT statelist.EOF)
    %>
    <option value="<%=(statelist.Fields.Item("StateID").Value)%>"><%=(statelist.Fields.Item("StateID").Value)%></option>
    <%
    statelist.MoveNext()
    Wend
    %>
    </select></td>
    <td align="right">&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr valign="baseline">
    <td height="36" align="right">Zip Code:</td>
    <td class="Standard_Text" align="left"><input type="text" name="SZip" id="SZip" class="inputfield_small" size="15" maxlength="15" value="<%= SZip%>" onchange="addUpdate('SZip')"/></td>
    <td align="right">&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr valign="baseline">
    <td height="12" colspan="4" align="right" nowrap><div align="left">
    <div align="left">
    <hr />
    </div>
    </div></td>
    </tr>
    <tr valign="baseline">
    <td colspan="2" align="right" nowrap><div align="left"><span class="Header_1"><b>Event Order Details</b>&nbsp;&nbsp;&nbsp;</span></div></td>
    <td align="right">&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr valign="baseline">


    .....


    </table>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    There's no element with the id value of BAdd1.
    Check yer case-sensitivity.
    Code:
    var badd1 = document.getElementById("BAdd1").value;
    …
    
    <input name="Badd1" type="text" class="inputfield_small" id="Badd1" value="" size="60" maxlength="75">
    IE is more forgiving of bad code than FF.
    FF is doing exactly what you're telling it to do and looking for exactly what you tell it to look for - and not finding it, because it's not there.
    Last edited by Bill Posters; 10-13-2008 at 10:19 PM.

  • Users who have thanked Bill Posters for this post:

    dariggy (10-14-2008)

  • #3
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Bill,

    Thank you for exposing my stupidity! I looked at those variables 100 times and never saw the letter case issue. Now my problem is solved and my form works beautifully. much appreciated.

    Regards,
    Steve


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •