Web Design and Web Development Forum

  1. #1
    Join Date
    Jan 2012
    Posts
    2
    Rep Power
    0
  2. sandip is on a distinguished road
  3. document.getElementById is returning null

    hi,
    Am using the followng code. first time the page loads, and i click on continue button {<a href="javascript: OnUserInput(1)" onclick="return OnUserInput(1)" class="xclient-button xclient-continue-button" title="$$continue$$"></a>} without entering anything in the text box, i do get the error msg defined in '$$nameoncard.mandate$$'.

    The next time i click the continue button, i always get "document.getElementById("nameoncard") is NULL".
    What is causing this issue, and how do i solve it.

    Please ignore the $$ variables as they will be populated automatically by the server.

    Here is the HTML:-

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="cache-control" content="no cache" />
    <meta http-equiv="pragma" content="no cache" />
    <meta http-equiv="expires" content="0" />
    <title>xclient</title>
    <link id="css-default" rel="stylesheet" href="$$LOCALE_FOLDER$$css/xclient.css" type="text/css" media="screen" /><!--[if IE 7]><link id="css-ie7" rel="stylesheet" href="$$LOCALE_FOLDER$$css/xclient-ie7.css" type="text/css" media="screen" /><![endif]-->

    <script src="$$LOCALE_FOLDER$$javascript/xclient-util.js" type="text/javascript"></script>
    <script src="$$LOCALE_FOLDER$$javascript/x-out.js" type="text/javascript"></script>
    <script src="Riskfort\rfutil.js" type="text/javascript"></script>
    <script src="$$LOCALE_FOLDER$$javascript/pwdbase.js" type="text/javascript"></script>


    </head>

    <body onload="OnPageInit()" onfocus="onFocusHandler();">

    <form id="optInForm" method="post" action="cap.cgi">

    <div id="xclient-pagesize">

    <!-- logo contents -->
    <div id="xclient-logo-holder">
    <img id="xclient-logo" src="$$LOCALE_FOLDER$$images/xclient_logo_medium.gif" alt="$$bankname$$" title="$$bankname$$" />
    <img id="brand-logo" src="$$LOCALE_FOLDER$$images/visa_logo_medium.gif" alt="$$brandname$$" title="$$brandname$$" />
    </div>

    <!-- Body-->
    <div id="xclient-content">
    <div id="xclient-content-container-body">

    <div class="xclient-text-firstline">$$nameoncard.line1$$</div>
    <div class="xclient-text">$$nameoncard.line2$$</div>

    <div class="xclient-text-bold">$$nameoncard.header1$$</div>
    <div class="xclient-text">$$nameoncard.header1.desc$$</div>

    <div class="xclient-text-bold">$$nameoncard.header2$$</div>
    <div class="xclient-text">$$nameoncard.header2.desc$$</div>

    <div class="xclient-text">$$nameoncard.start$$</div>

    <!-- input box -->
    <div class="xclient-input-box-container">
    <label for="nameoncard" class="nameoncardlabel">$$nameoncard.label$$</label>
    <div class="xclient-input-box-position" id="nameoncardbox">
    <input class="xclient-input-box-specs xclient-text-box-width-nameOnCard" type="text" name="nameoncard" id="nameoncard" alt="$$nameoncard.label$$" title="$$nameoncard.label$$" />
    </div>
    <div class="xclient-hint-text">$$nameoncard.label.desc$$</div>

    </div>
    <!-- end of xclient-input-box-container -->

    <span id="xclient-error-container"></span>

    </div> <!--end of xclient-content-container-body-->



    <!-- links, buttons -->

    <a href="#" class="xclient-link" title="$$cancel$$">$$cancel$$</a>
    <a href="javascript: OnUserInput(1)" onclick="return OnUserInput(1)" class="xclient-button xclient-continue-button" title="$$continue$$"></a>
    <!--<input type="submit" onclick="return OnUserInput(1); return false;" value="" class="xclient-button-new xclient-continue-button" title="$$continue$$" />-->

    </div> <!--end of xclient-content -->

    <div class="xclient-text-footer">$$footer$$</div>

    </div> <!--end of xclient-pagesize-->

    <div>
    <input type="hidden" name="optIn" id="optIn" value="-1">
    <input type="hidden" name="pin" id="pin" SIZE="14" MAXLENGTH="30" CLASS="monospace">
    </div>

    </form>

    <script type="text/javascript">

    var refreshing = false;
    var closing = true;

    function OnPageInit()
    {

    closing=true;
    window.history.go(1);

    document.getElementById("nameoncard").focus();

    if ("$$CALLOUT_MSG$$" != ""){
    document.getElementById("nameoncardbox").innerHTML ='<input class="xclient-input-box-error-specs xclient-text-box-width-nameOnCard" type="text" name="name" id="name" value=""/>';
    document.getElementById("xclient-error-container").innerHTML='<div class="xclient-text-error">$$CALLOUT_MSG$$</div>';
    }
    }

    function onBeforeUnloadHandler(object)
    {
    if ( !refreshing && closing )
    {
    event.returnValue = "$$ie.close.window$$";
    }
    }

    function onFocusHandler()
    {
    closing = true;
    }


    function OnUserInput(userInput)
    {
    closing = false;


    if(document.getElementById("nameoncard").value == ""){
    document.getElementById("nameoncardbox").innerHTML ='<input class="xclient-input-box-error-specs xclient-text-box-width-nameOnCard" type="text" name="name" id="name"/>';
    document.getElementById("xclient-error-container").innerHTML='<div class="xclient-text-error">$$nameoncard.mandate$$</div>';
    return false;
    }

    document.getElementById("pin").value = document.getElementById("nameoncard").value;



    document.getElementById("optIn").value = "1";
    document.forms['optInForm'].submit();
    return false;
    }
    </script>

    <!-- End of centering table -->

    </body>
    </html>
    Reply With Quote Reply With Quote
  4. #2
    Join Date
    Jan 2012
    Posts
    2
    Rep Power
    0
  5. sandip is on a distinguished road
  6. Re: document.getElementById is returning null

    oops my bad.
    was using a different id in the inner html in the javascript.
    Reply With Quote Reply With Quote

Similar Threads

  1. Odd JavaScript issue with document.getElementById
    By bfsog in forum JavaScript Coding
    Replies: 5
    Last Post: 05-11-2009, 05:24 PM
  2. Null character
    By Gabriel in forum C and C++ Programming
    Replies: 5
    Last Post: 11-16-2008, 04:37 AM
  3. Why is my document.getElementById() returning null?
    By diligentwarrior in forum JavaScript Coding
    Replies: 6
    Last Post: 08-08-2008, 09:44 PM
  4. what does null do?
    By waheedahmed in forum General Programming
    Replies: 5
    Last Post: 03-02-2007, 09:40 PM
  5. Null
    By melissa84 in forum PHP Scripting
    Replies: 3
    Last Post: 07-12-2006, 03:20 PM