Home/ Questions/Q 7910389
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T12:51:05+00:00

I have an html page which contains a div that displays the html from

  • 0

I have an html page which contains a div that displays the html from an external php file.
It works great until I add a DOCTYPE declaration to the html page. The page continues to function, except the external content does not appear in the div.

<!DOCTYPE HTML>
<html dir="ltr" lang="en-US">
<head>

<title>Test Page</title>

<!--meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

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

    function getinfo()
        {
        $.post('prodinfo.php', { prodcode: prodcodeform.prodcodevar.value},
            function(output)
            {
            $('#prodinfo').html(output).show;
            });
        }

    function hideinfo()
        {
        $('#prodload').hide();
        $('#openprodinfo').show();
        }

    function showinfo()
        {
        $('#prodload').show();
        $('#openprodinfo').hide();
        }
</script>
</head>
<body>
<input style="position:relative;" type="button" class="button" id="openprodinfo" title="Open" value="INFO" onclick="showinfo();">
<DIV id="prodload" style="position:absolute;margin-left:auto;margin-right:auto;display:none;text-align:center;background-color:#000000;z-index:200;border:1px solid #4e443b;">

    <div id="prodinfo" style="position:relative;display:block;top:0;width:1000px;height:820px;background-color:#ffffff;margin-left:auto;margin-right:auto;">
    </div>

    <form name="prodcodeform">
    <input type="text" readonly="readonly" id="prodcodevar" name="prodcodevar" value="nil" >
    </form>

    <div ID="prodinfobutton" style="position:relative;">
    <input  style="position:relative;" type="button" class="button" id="closeprodinfo" title="Close" value="CLOSE" onclick="document.getElementById('prodcodevar').value='nil'; hideinfo(); ">
    </div>

    <input type="button" id="button001" value="ONE" onclick="document.getElementById('prodcodevar').value='item1'; getinfo();">

    <input type="button" id="button002" value="TWO" onclick="document.getElementById('prodcodevar').value='item2'; getinfo();">


</DIV>


</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are switching to Standards mode, so your browser is no longer playing the game of being compatible with Internet Explorer 4.

    prodcodeform.prodcodevar.value will error because prodcodeform is undefined.

    You don’t get a global variable for every element with an id or name in a document.

    Change:

    <form name="prodcodeform">

    To

    <form id="prodcodeform" method="post" action="prodinfo.php">

    … and make it do something sane when a non-Ajax request gets posted (move it so it is around the buttons, make them submit buttons, and cancel the default event if the JS succeeds).

    Then add:

    var prodcodeform = document.getElementById('prodcodeform');

    before you try to use the variable.

    • 0