Why is a variable sometimes sent and other times not?

[Claus Mygind]

On the web page I have two forms. The first created statically, the 2nd created dynamically (upon request)

Both forms make the same ajax call to the server.
Both use the same javaScript routines to make the call.
Both call the same server side app.

I store the data in a variable/array "appData" which I JSON encode.

On the server side app, I look for the JSON element "appData" and decode it.

appData is not present when the dynamic form makes the request.

Here is my code and screen shots of where the code was halted to show the content of the variables.

This is my ajax routine

function myAjax (form, dataObj ) {
 
    var    aCallBack = new Array();
 
    this.makeCall = function (form, dataObj) {
 
        var queryString  = "appData="+JSON.stringify(dataObj);
 
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;
 
            var url = form.action+'?timeStamp=' + new Date().getTime();
 
            request.open("POST", url, true);
            request.onreadystatechange = function chkStateChange(){
                                            if (request.readyState == 4) {
                                                if (request.status == 200) {
                                                    processResponse(request.responseText, form);
                                                }
                                            }
                                         };
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
            request.send( queryString );
    };
 
    var processResponse = function (response, form) {
 
        aCallBack = response.split(';');
 
        if ( aCallBack[0].indexOf("An error occured") > -1 ||
             aCallBack[0] == "Record Saved"    ||
             aCallBack[0].indexOf("deleted") > 1     ||
             aCallBack[0] == "The data you saved was the same as found in the database!"
           ) { 
 
            eAlert  = aCallBack[0]+"\n";
            for (var i = 1; i < aCallBack.length; i++ )
            {
                eAlert += aCallBack[i]+"\n";
            }
            alert( eAlert );
            clearForm( document.getElementById(form.id) );
            AddMode();
        }else{
            aCallBack = JSON.parse(response);        
            updatePage(form, aCallBack);
        }
    };
}
 
var ajax = new myAjax();
 

The ajax routine is called from the "saveData" routine which receives one parameter "form".

function saveData(form)
{
    var dataObj = new Object();
 
    var encode = function (strVal)
    {
        if (strVal.indexOf('&') > -1)
        {
            var searchStr = "&";
            var replaceStr = "%26";
            var re = new RegExp(searchStr, "g");
            var result = strVal.replace(re, replaceStr);
        }else{
            var result = strVal;
        }
            return result;
    };
 
    for (var i = 0; i < form.elements.length; i++)
    {
        var element = form.elements[i];
        var type = element.type;
 
        if (type == "checkbox")
        {
            if (element.checked)
            {
                dataObj[element.id] ="T";
            }else{
                dataObj[element.id] ="F";
            }
        }
        else if (type == "radio")
        {
            if (element.checked)
            {
                dataObj[element.id] = element.value;
            }
        }
        else if (type == "hidden" || type == "password" || type == "text" ||
                 type == "textarea")
        {
                dataObj[element.id] = encode(element.value);
        }
        else if (type == "select-one" || type == "select-multiple")
        {
            for (var j = 0; j < element.options.length; j++)
            {
                if (element.options[j].selected )
                {
                    dataObj[element.id] = encode(element.options[j].value);
                }
            }
        }
    }
 
    ajax.makeCall(form, dataObj);
}
 
function escapeQuote(strVal)
{
    if (strVal != null)
    {
        if (strVal.indexOf("'") > -1 )
        {
            var searchStr = "'";
            var replaceStr = "\'";
            var re = new RegExp(searchStr, "g");
            var result = strVal.replace(re, replaceStr);
        }else{
            var result = strVal;
        }
    }else{
        var result = strVal;
    }
        return result;
}
 

This routine scans the form's control elements and stores the data in an associative array "dataObj" by control id, then makes the ajax call.

As you can see by the photos below the variable "queryString" contains the array "appData" (created on line 7 of the ajax routine above). This screen shots are from line 25 of the ajax code posted above. Move cursor over photo to reveal.

From the static form
[IMG]http://i1097.photobucket.com/albums/g345/ClausTSC/OkCall.jpg[/IMG]

From the dynamic form
[IMG]http://i1097.photobucket.com/albums/g345/ClausTSC/NotOkCall.jpg[/IMG]

both call the same exact server side program.
[IMGNOTHUMB]http://i1097.photobucket.com/albums/g345/ClausTSC/serverSideAppCode.gif[/IMGNOTHUMB]

Here is the result of each call. Note that from the dynamic form "appData" is missing.

This is from the static form (OK)
[IMGNOTHUMB]http://i1097.photobucket.com/albums/g345/ClausTSC/ServerSideOkCall.jpg[/IMGNOTHUMB]

This if from the dynamic form (Not OK)
[IMGNOTHUMB]http://i1097.photobucket.com/albums/g345/ClausTSC/ServerSideNotOkCall.jpg[/IMGNOTHUMB]

At this point I am not even sure whether it is the sending or the receiving that is messed up.

I use:
xP Professional
Apache v 2.2
php v 5.3

[Dormilich]

there seems to be a problem with you PHP script. did you manually check its output?

it looks like your second output is your deserialised appData object.

PS. encodeURIComponent()

[Claus Mygind]

well that is the crux of my problem. I was trying to deserialised the data when I ran into the problem.

As you can see from the test app I wrote with just the two lines of code, I still got two different responses on the same call.

I use firePHP to check the output. Not sure what else I can do there.

[Claus Mygind]

I just ran a quick dump in the php app. It simply confirms what I see with the firePHP.

array(6) { ["SEARCH"]=> string(4) "clau" ["TABLE"]=> string(13) "contactCLIENT" ["INDEX"]=> string(2) "ID" ["FieldName"]=> string(6) "Client" ["SETMODE"]=> string(3) "Yes" ["SearchMethod"]=> string(9) "StartWith" }

[Claus Mygind]

It appears I either have a timing issue on some other kind of looping problem.

I have attached a zip file with a calling form and a receiving app that demonstrate the problem.

You can run the static form ok. But the Dynamic form only works when you put stops in the code on the ajax call. And even then it will continue to loop.

Perhaps someone can explain this behavior to me.

test using these steps
1) enter a value in first and last and click "static Test"
2) then click open dynamic form, enter a value there then click "test dynamic"

if you have phpfire you can check it further.

[Claus Mygind]

Upon further testing (using the files I posted), I see the problem is in the "request.status".

A standard code should be returned 200, 400 or one of the other error codes. In fact it returns the correct data the first time but not the 200 code. Instead the code is 0 therefore it keeps looping 3 times.

I put in a counter and alert into the code and got this response readyState = 4 status = 0 loop count = 3

I am having trouble figuring out where to look next.

[Dormilich]

you could manually send the status header …

[Claus Mygind]

Hmm! Ok I will give that a shot, if I can figure out how to separate it out.

Meanwhile, I realize people may not want to open up a zip file. So I will simply post the code here to be copy and pasted instead. There must be a reason why a dynamically created form cannot get a proper response on this call.

By the way I am running this in FireFox and I need a FireFox solution:

The calling form here

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>
 
<head>
 
<title>TEST</title>
<script type="text/javascript">
<!--
    function addScratchPad(obj)
    {
        document.getElementById( obj.document.body.id ).innerHTML += 
            '<div '+
            '  id="scratchPad" '+
            '  align="center" '+
            '  style="position:absolute; '+
            '  visibility:hidden; '+
            '  z-index:99;" '+
            '> '+
            '    <table style="padding:0px; margin:0px;" width="100%"> '+
            '        <tr><td> '+
            '            <table name = "sPadTable" id = "sPadTable" align="center"> '+
            '                <tbody id="sPadData" ></tbody>'+
            '            </table>'+
            '        </td></tr> '+
            '    </table>'+
            '</div>';
    }
 
    function showHideScratchPad(cLeft,cTop,cHeight,cWidth,cBgColor,cBstyle,cBwidth,cBcolor) 
    {
        if (  document.getElementById("scratchPad").style.visibility == "hidden" ) {
            document.getElementById("scratchPad").style.backgroundColor = ( !cBgColor ) ? "#E4BF87" : cBgColor ;
            document.getElementById("scratchPad").style.borderStyle = ( !cBstyle ) ? "ridge" :cBstyle ;
            document.getElementById("scratchPad").style.borderWidth = ( !cBwidth ) ? "5px" : cBwidth ;
            document.getElementById("scratchPad").style.borderColor = ( !cBcolor ) ? "orange" : cBcolor;
            document.getElementById("scratchPad").style.zIndex = "101";
            document.getElementById("scratchPad").style.visibility = "visible";
            document.getElementById("scratchPad").style.overflow = "auto";
            document.getElementById("scratchPad").style.left =  cLeft;
            document.getElementById("scratchPad").style.top = cTop;
            document.getElementById("scratchPad").style.height = cHeight;
            document.getElementById("scratchPad").style.width =  cWidth;
        }else{ 
            document.getElementById("scratchPad").style.visibility = "hidden";
            document.getElementById("scratchPad").style.left =  "0px";
            document.getElementById("scratchPad").style.top = "0px";
            document.getElementById("scratchPad").style.height = "0px";
            document.getElementById("scratchPad").style.width =  "0px";
            while (document.getElementById("sPadData").rows.length > 0) 
            {
                document.getElementById("sPadData").deleteRow(0);
            }
        }
    }
 
    function displaySearchRequest(cDescriptor, cLineLength, cMaxLength, cTable, cIndex, cFieldName, cSetMode)
    {
 
        var tr, td, th, object, cRowColor;
        var tbody = document.getElementById("sPadData");
        cRowColor = "#E2E2E2";
 
        tr = tbody.insertRow(tbody.rows.length);
        td = tr.insertCell(tr.cells.length);
        td.innerHTML =    '<form  method="POST"  action="startSmallSearch(this);" id="smallSearch" ENCTYPE="application/x-www-form-urlencoded">'+'<div align="center"><b>Enter '+cDescriptor+'</b><br>'+'<input type="text" maxLength='+cMaxLength+' size='+cLineLength+' id="sSearch" name="SEARCH" onkeypress="return submitViaEnter(event)"/>'+'<br>'+'<input type="hidden" id="p1" value="param1">'+'<input type="hidden" id="p2" value="param2">'+'<input type="hidden" id="p3" value="param3">'+'<table><tbody id="searchBody"></tbody></table></div></form>';
 
        var stbody = document.getElementById("searchBody");
 
        tr = stbody.insertRow(stbody.rows.length);
        td = tr.insertCell(tr.cells.length);
        td.setAttribute("colspan", "2");
        td.setAttribute("style", "text-align:center");
        td.innerHTML =    '<input type="submit" value="Test Dynamic Form" '+
                            'onClick="startSmallSearch();">'+
                        '<input type="button" value="Close Form" onClick="showHideScratchPad();">';
 
       var t=setTimeout("document.getElementById('sSearch').focus()",30);
    }
 
    function startSmallSearch()
    {
        var fNode = document.getElementById("smallSearch");
            fNode.action="receivingForm.php";
            saveData(fNode);
    }
 
    function smallSearch(Title, cLength, cMax, cP1, cP2, cP3){
        displaySearchRequest(Title, cLength, cMax, cP1, cP2, cP3)
        var _width    = 400;
        var _height = 200;
        var _left   = parseInt((screen.availWidth/2) - (_width/2));
        var _top    = parseInt((screen.availHeight/2) - (_height/2));
        showHideScratchPad(_left,(_top-100), _height, _width,'#95E3E3');    
 
    }
 
    function myAjax (form, dataObj ) {
 
    var    aCallBack = new Array();
    var counter = 0
    this.makeCall = function (form, dataObj) {
 
        var queryString  = "appData="+JSON.stringify(dataObj);
 
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;
 
            var url = form.action+'?timeStamp=' + new Date().getTime();
 
            request.open("POST", url, true);
            request.onreadystatechange = function chkStateChange(){
 
        counter += 1
    //alert(request.status);
                                            if (request.readyState == 4) {
    alert('readyState = '+request.readyState+' status = '+request.status+' loop count = '+counter);
                                                if (request.status == 200) {
    //alert(request.status);
                                                    processResponse(request.responseText, form);
//                                                }else{
//    alert('status = '+request.status);
                                                }
                                            }
                                         };
alert(counter);
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
            request.send( queryString );
    };
 
    var processResponse = function (form,response ) {
        counter += 1
        updatePage(response, counter);
 
    };
}
 
function updatePage(r,cnt){
    alert(r+" "+cnt);
}
var ajax = new myAjax();
 
    function saveData(form)
    {
        var dataObj = new Object();
 
        var encode = function (strVal)
        {
            if (strVal.indexOf('&') > -1)
            {
                var searchStr = "&";
                var replaceStr = "%26";
                var re = new RegExp(searchStr, "g");
                var result = strVal.replace(re, replaceStr);
            }else{
                var result = strVal;
            }
                return result;
        };
 
        for (var i = 0; i < form.elements.length; i++)
        {
            var element = form.elements[i];
            var type = element.type;
 
            if (type == "checkbox")
            {
                if (element.checked)
                {
                    dataObj[element.id] ="T";
                }else{
                    dataObj[element.id] ="F";
                }
            }
            else if (type == "radio")
            {
                if (element.checked)
                {
                    dataObj[element.id] = element.value;
                }
            }
            else if (type == "hidden" || type == "password" || type == "text" ||
                     type == "textarea")
            {
                    dataObj[element.id] = encode(element.value);
            }
            else if (type == "select-one" || type == "select-multiple")
            {
                for (var j = 0; j < element.options.length; j++)
                {
                    if (element.options[j].selected )
                    {
                        dataObj[element.id] = encode(element.options[j].value);
                    }
                }
            }
        }
        ajax.makeCall(form, dataObj);
    }
    function submitViaEnter(evt) {
        evt = (evt) ? evt : event;
        var target = (evt.target) ? evt.target : evt.srcElement;
        var form = target.form;
        var charCode = (evt.charCode) ? evt.charCode :
            ((evt.which) ? evt.which : evt.keyCode);
        if (charCode == 13) {
            if (validateForm(form)) {
                form.submit();
                return false;
            }
        }
        return true;
    }
 
//-->
</script>
</head>
 
<body
    id = "testThis"
    onload="addScratchPad(this)"
>
    <form 
        id="testAjax"
        action="receivingForm.php"
        onSubmit="return false"
    >
        <table>
            <tbody>
                <tr>
                    <td colspan="4">
                        <input 
                            type="button" 
                            onClick="saveData(this.form);"
                            id="staticForm" 
                            value="Test Static Form" 
                        />
                        <input 
                            type ="button" 
                            id  ="sb" 
                            value="Open Dynamic form" 
                            onmousedown="smallSearch('Title','10','8','param10','param11','param12');"
                        />
                    </td>
                </tr><tr>
                    <td>First</td>
                    <td>Last</td>
                </tr><tr id="contactInfo">
                    <td>
                        <input 
                            type ="text"
                            maxLength=15
                            size="15"
                            id  ="FIRST"
                        />
                    </td><td colspan="2">
                        <input 
                            type ="text"
                            maxLength=25
                            size="25"
                            id  ="LAST"
                        />
                    </td>
                </tr>
            </tbody>
        </table>
  </form>
 </body>
</html>
 

And here is the receiving form NOTE make sure you call it "receivingForm.php" that is the reference that is made in the calling form.

<?php
/*
//if you have php fire installed uncomment this section and add path to firePHP
    require_once('<your path to php/FirePHP.class.php');
 
    // Start output buffering
    ob_start();
 
    $firephp = FirePHP::getInstance(true);
 
    $firephp->log($_REQUEST, 'request =');
*/
    echo $_REQUEST;
 
    foreach ( $_REQUEST as $key => $value )
    {
        echo $key.' = '.$value.', ';    
    }
?>

[Dormilich]

There must be a reason why a dynamically created form cannot get a proper response on this call.

technically that's not true. the server can’t even differentiate if the request came from a reload, form submit or AJAX, let alone if the form elements are static or not. there must be some difference in the data being processed.

PS. if you want to see a variable’s content rather use var_dump() than echo

[Claus Mygind]

In theory I would agree with you, that is why I set out to create an all purpose "scratch pad", which I could manipulate to request input and display multiple results when the database query generated more than one row set.

The idea was to include the dynamic code in my javaScript library, so I could add it in without hard coding it into every page I created. So far it is not working.

Actually instead of your suggestion
"PS. if you want to see a variable’s content rather use var_dump() than echo" firePHP does a much better job of displaying intermediate results (as shown in my screen shots above). Of course I do use echo to return the results to the page.

Have you tested the sample code I posted? If you do not have php installed you could respond with any other server side script you would like.

The question is still why does the server not generate the "request.status" code?

When the program is stepped through one line at the time you can clearly see the data is processed correctly the first time through. However the repeated request generated because the "if (request.status == 200)" condition is never met. In fact it stays at 0 all the time. Causes the initial data to be wiped out.

Well here is an alternative coding of the same layout, where I hard code the <div> tag and the <form> and it will properly process the data.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>
 
<head>
 
<title>TEST</title>
<script type="text/javascript">
<!--
    function addScratchPad(obj)
    {
/*        document.getElementById( obj.document.body.id ).innerHTML += 
             '<div '+
            '  id="scratchPad" '+
            '  align="center" '+
            '  style="position:absolute; '+
            '  visibility:hidden; '+
            '  z-index:99;" '+
            '> '+
            '    <table style="padding:0px; margin:0px;" width="100%"> '+
            '        <tr><td> '+
            '            <table name = "sPadTable" id = "sPadTable" align="center"> '+
            '                <tbody id="sPadData" ></tbody>'+
            '            </table>'+
            '        </td></tr> '+
            '    </table>'+
            '</div>';
*/    }
 
    function showHideScratchPad(cLeft,cTop,cHeight,cWidth,cBgColor,cBstyle,cBwidth,cBcolor) 
    {
        if (  document.getElementById("scratchPad").style.visibility == "hidden" ) {
            document.getElementById("scratchPad").style.backgroundColor = ( !cBgColor ) ? "#E4BF87" : cBgColor ;
            document.getElementById("scratchPad").style.borderStyle = ( !cBstyle ) ? "ridge" :cBstyle ;
            document.getElementById("scratchPad").style.borderWidth = ( !cBwidth ) ? "5px" : cBwidth ;
            document.getElementById("scratchPad").style.borderColor = ( !cBcolor ) ? "orange" : cBcolor;
            document.getElementById("scratchPad").style.zIndex = "101";
            document.getElementById("scratchPad").style.visibility = "visible";
            document.getElementById("scratchPad").style.overflow = "auto";
            document.getElementById("scratchPad").style.left =  cLeft;
            document.getElementById("scratchPad").style.top = cTop;
            document.getElementById("scratchPad").style.height = cHeight;
            document.getElementById("scratchPad").style.width =  cWidth;
        }else{ 
            document.getElementById("scratchPad").style.visibility = "hidden";
            document.getElementById("scratchPad").style.left =  "0px";
            document.getElementById("scratchPad").style.top = "0px";
            document.getElementById("scratchPad").style.height = "0px";
            document.getElementById("scratchPad").style.width =  "0px";
            while (document.getElementById("sPadData").rows.length > 0) 
            {
                document.getElementById("sPadData").deleteRow(0);
            }
        }
    }
 
    function displaySearchRequest(cDescriptor, cLineLength, cMaxLength, cTable, cIndex, cFieldName, cSetMode)
    {
 
/*        var tr, td, th, object, cRowColor;
        var tbody = document.getElementById("sPadData");
        cRowColor = "#E2E2E2";
 
        tr = tbody.insertRow(tbody.rows.length);
        td = tr.insertCell(tr.cells.length);
        td.innerHTML =    '<form  method="POST"  action="startSmallSearch(this);" id="smallSearch" ENCTYPE="application/x-www-form-urlencoded">'+'<div align="center"><b>Enter '+cDescriptor+'</b><br>'+'<input type="text" maxLength='+cMaxLength+' size='+cLineLength+' id="sSearch" name="SEARCH" onkeypress="return submitViaEnter(event)"/>'+'<br>'+'<input type="hidden" id="p1" value="param1">'+'<input type="hidden" id="p2" value="param2">'+'<input type="hidden" id="p3" value="param3">'+'<table><tbody id="searchBody"></tbody></table></div></form>';
*/
 
        var stbody = document.getElementById("searchBody");
 
        tr = stbody.insertRow(stbody.rows.length);
        td = tr.insertCell(tr.cells.length);
        td.setAttribute("colspan", "2");
        td.setAttribute("style", "text-align:center");
        td.innerHTML =    '<input type="submit" value="Test Dynamic Form" '+
                            'onClick="startSmallSearch();">'+
                        '<input type="button" value="Close Form" onClick="showHideScratchPad();">';
 
       var t=setTimeout("document.getElementById('sSearch').focus()",30);
    }
 
    function startSmallSearch()
    {
        var fNode = document.getElementById("smallSearch");
            fNode.action="receivingForm.php";
            saveData(fNode);
    }
 
    function smallSearch(Title, cLength, cMax, cP1, cP2, cP3){
        displaySearchRequest(Title, cLength, cMax, cP1, cP2, cP3)
        var _width    = 400;
        var _height = 200;
        var _left   = parseInt((screen.availWidth/2) - (_width/2));
        var _top    = parseInt((screen.availHeight/2) - (_height/2));
        showHideScratchPad(_left,(_top-100), _height, _width,'#95E3E3');    
 
    }
 
    function myAjax (form, dataObj ) {
 
    var    aCallBack = new Array();
    var counter = 0
    this.makeCall = function (form, dataObj) {
 
        var queryString  = "appData="+JSON.stringify(dataObj);
 
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;
 
            var url = form.action+'?timeStamp=' + new Date().getTime();
 
            request.open("POST", url, true);
            request.onreadystatechange = function chkStateChange(){
 
        counter += 1
    //alert(request.status);
                                            if (request.readyState == 4) {
    alert('readyState = '+request.readyState+' status = '+request.status+' loop count = '+counter);
                                                if (request.status == 200) {
    //alert(request.status);
                                                    processResponse(request.responseText, form);
//                                                }else{
//    alert('status = '+request.status);
                                                }
                                            }
                                         };
alert(counter);
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
            request.send( queryString );
    };
 
    var processResponse = function (form,response ) {
        counter += 1
        updatePage(response, counter);
 
    };
}
 
function updatePage(r,cnt){
    alert(r+" "+cnt);
}
var ajax = new myAjax();
 
    function saveData(form)
    {
        var dataObj = new Object();
 
        var encode = function (strVal)
        {
            if (strVal.indexOf('&') > -1)
            {
                var searchStr = "&";
                var replaceStr = "%26";
                var re = new RegExp(searchStr, "g");
                var result = strVal.replace(re, replaceStr);
            }else{
                var result = strVal;
            }
                return result;
        };
 
        for (var i = 0; i < form.elements.length; i++)
        {
            var element = form.elements[i];
            var type = element.type;
 
            if (type == "checkbox")
            {
                if (element.checked)
                {
                    dataObj[element.id] ="T";
                }else{
                    dataObj[element.id] ="F";
                }
            }
            else if (type == "radio")
            {
                if (element.checked)
                {
                    dataObj[element.id] = element.value;
                }
            }
            else if (type == "hidden" || type == "password" || type == "text" ||
                     type == "textarea")
            {
                    dataObj[element.id] = encode(element.value);
            }
            else if (type == "select-one" || type == "select-multiple")
            {
                for (var j = 0; j < element.options.length; j++)
                {
                    if (element.options[j].selected )
                    {
                        dataObj[element.id] = encode(element.options[j].value);
                    }
                }
            }
        }
        ajax.makeCall(form, dataObj);
    }
    function submitViaEnter(evt) {
        evt = (evt) ? evt : event;
        var target = (evt.target) ? evt.target : evt.srcElement;
        var form = target.form;
        var charCode = (evt.charCode) ? evt.charCode :
            ((evt.which) ? evt.which : evt.keyCode);
        if (charCode == 13) {
            if (validateForm(form)) {
                form.submit();
                return false;
            }
        }
        return true;
    }
 
//-->
</script>
</head>
 
<body
    id = "testThis"
    onload="addScratchPad(this)"
>
    <form 
        id="testAjax"
        action="receivingForm.php"
        onSubmit="return false"
    >
        <table>
            <tbody>
                <tr>
                    <td colspan="4">
                        <input 
                            type="button" 
                            onClick="saveData(this.form);"
                            id="staticForm" 
                            value="Test Static Form" 
                        />
                        <input 
                            type ="button" 
                            id  ="sb" 
                            value="Open Dynamic form" 
                            onmousedown="smallSearch('Title','10','8','param10','param11','param12');"
                        />
                    </td>
                </tr><tr>
                    <td>First</td>
                    <td>Last</td>
                </tr><tr id="contactInfo">
                    <td>
                        <input 
                            type ="text"
                            maxLength=15
                            size="15"
                            id  ="FIRST"
                        />
                    </td><td colspan="2">
                        <input 
                            type ="text"
                            maxLength=25
                            size="25"
                            id  ="LAST"
                        />
                    </td>
                </tr>
            </tbody>
        </table>
  </form>
    <form 
        id="form2"
        action="receivingForm.php"
        onSubmit="return false"
    >
        <table>
            <tbody>
                <tr>
                    <td colspan="4">
                        <input 
                            type="button" 
                            onClick="saveData(this.form);"
                            id="staticForm" 
                            value="Test Static Form" 
                        />
                        <input 
                            type ="button" 
                            id  ="sb" 
                            value="Open Dynamic form" 
                            onmousedown="smallSearch('Title','10','8','param10','param11','param12');"
                        />
                    </td>
                </tr><tr id="contactInfo">
                    <td>
                        <input 
                            type ="text"
                            maxLength=15
                            size="15"
                            id  ="FIRST"
                        />
                    </td>
                </tr>
            </tbody>
        </table>
  </form>
<div 
      id="scratchPad" 
      align="center" 
      style="position:absolute; visibility:hidden; z-index:99;" 
    > 
        <table style="padding:0px; margin:0px;" width="100%"> 
            <tr><td> 
                <table name = "sPadTable" id = "sPadTable" align="center"> 
                    <tbody id="sPadData" >
    <form  
        method="POST"  
        action="startSmallSearch(this);" 
        id="smallSearch" 
        ENCTYPE="application/x-www-form-urlencoded">
 
        <div align="center">
            <span id="sTitle"></span>
 
            <input type="text" maxLength='+cMaxLength+' size='+cLineLength+' id="sSearch" name="SEARCH" onkeypress="return submitViaEnter(event)"/><br>
 
            <input type="hidden" id="p1" value="param1">
            <input type="hidden" id="p2" value="param2">
            <input type="hidden" id="p3" value="param3">
 
            <table>
                <tbody id="searchBody">
                </tbody>
            </table>
        </div>
    </form>
 
 
                    </tbody>
                </table>
            </td></tr> 
        </table>
</div>
  </body>
</html>
 
 

I invite you to run both sets of code to see if you can help me further.

Thanks in advance for all your help so far.

[Dormilich]

do you have a live page where I can look at?

Actually instead of your suggestion
"PS. if you want to see a variable’s content rather use var_dump() than echo" firePHP does a much better job of displaying intermediate results (as shown in my screen shots above). Of course I do use echo to return the results to the page.

I said that mainly because of echo $_REQUEST;

and another PS: instead of using .style repeatedly, you can use (for instance)

elem.style.cssText = "width: 10px; height: 10px; color: navy;";

[Claus Mygind]

Sorry, this is just an in house (intranet) setup. We have no outside access. But if you have a server like apache setup on your computer, it is just a matter of cut and paste.

On the style comment, yes you have taught that one to me before and I do use it when writing new code. This is old code, I've had sitting around for years.

I think I will file a bug report with Mozilla and post the code there. I know exactly what is happening now, but I just don't understand why?

[Claus Mygind]

I finally solved the mystery and here is the explanation.

As was correctly pointed out by Dormilich
"the server can’t even differentiate if the request came from a reload, form submit or AJAX, let alone if the form elements are static or not."

My problem here stemmed from 2 key errors in my code. And perhaps I still don't understand them fully.
1) I have not used the "submit" button control on my forms for years. I use a standard button so I can execute other functions as part of the form submittal process. In this case I used the <input type="submit"/>

2) This is were I really got into trouble and was the root of my looping problem. Again I normally disable the enter key from submitting the form as I want more control over the process. To prevent that, I set the forms "onsubmit" event handler like this: onSubmit="return false". In the code I have submitted in this thread I failed to include this statement.

The combination of these two errors, resulted in the form re-submitting a 2nd, 3rd time etc. until the app crashed.

Here then is the corrected code, which solved the ajax problem.

        td.innerHTML =    
        '<form  method="POST"  action="startSmallSearch(this);" id="smallSearch" ENCTYPE="application/x-www-form-urlencoded" onSubmit="return false">'+
        '<div align="center">Testing ajax on a dynamic form<br>'+
        '<input type="text" id="sSearch"'+
        'onkeypress="return submitViaEnter(event)"/><br>'+
        'There are 3 hidden input paramters.'+
        '<input type="hidden" id="p1" value="param1"/>'+
        '<input type="hidden" id="p2" value="param2"/>'+
        '<input type="hidden" id="p3" value="param3"/>'+
        '<table><tbody id="searchBody"></tbody></table></div></form>';
 
        td.innerHTML =    '<input type="button" value="Test Dynamic Form" '+
                            'onClick="startSmallSearch();">'+
                        '<input type="button" value="Close Form" onClick="showHideScratchPad();">';
 
 

And since this is a simple form with one user input control, I included a method for the enter key to be activated when the user had finished keying in their request so they don't have to tab off the field or use the mouse to continue.

Notice this code in the code block above

<input type="text" id="sSearch"'+
        'onkeypress="return submitViaEnter(event)"/>

Here is that method

    function submitViaEnter(evt) {
        evt = (evt) ? evt : event;
        var target = (evt.target) ? evt.target : evt.srcElement;
        var form = target.form;
        var charCode = (evt.charCode) ? evt.charCode :
            ((evt.which) ? evt.which : evt.keyCode);
        if (charCode == 13) {
            if (validateForm(form)) {
                startSmallSearch(form);
                return false;
            }
        }
        return true;
    }
 

Dormilich suggested a little dressup code on the use of style: "and another PS: instead of using .style repeatedly, you can use (for instance)"

which then looks like this:

    function showHideScratchPad() 
    {
        if (  document.getElementById("scratchPad").style.visibility == "hidden" ) {
            document.getElementById("scratchPad").style.cssText = "background-color:#E4BF87;border-width:5px;border-style:ridge;border-color:orange;z-Index = '101';visibility:visible;overflow:auto;left:312px;top:167px;height:200px;width:400px";
        }else{ 
            document.getElementById("scratchPad").style.cssText = 
            "visibility:hidden;"+
            "left:0px;top:0px;height:0px;width:0px";
            while (document.getElementById("sPadData").rows.length > 0) 
            {
                document.getElementById("sPadData").deleteRow(0);
            }
        }
    }
 

[Dormilich]

1) I have not used the "submit" button control on my forms for years. I use a standard button so I can execute other functions as part of the form submittal process. In this case I used the <input type="submit"/>

sometimes I find it useful to use <button type="button">some text or an image</button> as it allows for more flexibility in the HTML coding

2) This is were I really got into trouble and was the root of my looping problem. Again I normally disable the enter key from submitting the form as I want more control over the process. To prevent that, I set the forms "onsubmit" event handler like this: onSubmit="return false". In the code I have submitted in this thread I failed to include this statement.

you might want to look into JavaScript event handling (that part where you don’t use event attributes). it has the advantage that you can’t "forget" to include an attribute (like onsubmit="return false") as all code is placed in the JavaScript directly. you also have all event code in one spot (plus you can use DOM events). the obvious disadvantage is IE, where you have non-standard implementations, but you can write a Facade to overcome this.