How to update the content of a div when a form is submitted using javaScript
<p>I would like to update the content of #contentRight when either editForm-1 or editForm-2 is submitted with the submitted form values.</p>

<p>I can get the response output from the updateDB.php file and see it at the</p>

<pre><code>alert("Data: " + theResponse + "\nStatus: " + status);
</code></pre>

<p>However it does not update the div content with either of the following 2 lines.</p>

<pre><code>$("#contentRight").html(theResponse);
document.getElementById("contentRight") = theResponse;
</code></pre>

<p>[EDIT-------------]</p>

<p>I added some styles to see what element is occupying what space. If you click on <code>#saveEdit-1</code> (which is the element with the blue border) The script works as it supposed to. When you click on the <code>#saveEdit-1 button</code> element (which is the arrow) the div does not get updated. WHY?</p>

<p><a href="http://310it.com/test/test.php" rel="nofollow">Here is the working example</a></p>

<p>if I change the click listeners to </p>

<pre><code>$("#saveEdit-1 button").click(function(){ performAjaxSubmission(1); });
$("#saveEdit-2 button").click(function(){ performAjaxSubmission(2); });
</code></pre>

<p>it still does not work. <a href="http://310it.com/test/test2.php" rel="nofollow">Working Example</a></p>

<p>[/EDIT-------------]</p>

<p>Any help would be greatly appriciated.</p>

<p>Here are the files.</p>

<pre><code>&lt;?php   require_once("includes/functions.php"); ?&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;style&gt;
            #editForm-1, #editForm-2 {
                border:1px solid red;   
            }
            #saveEdit-1, #saveEdit-2 {
                border:2px solid blue;  
            }
            #saveEdit-1 button, #saveEdit-2 button {
                border:3px solid green; 
            }
        &lt;/style&gt;

        &lt;link href="/test/stylesheets/_appStyleAdmin.css" rel="stylesheet" type="text/css" /&gt;

        &lt;script type="text/javascript" src="javascripts/jquery-1.12.0.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="javascripts/jQuery-UI/jquery-ui.min.js"&gt;&lt;/script&gt;


        &lt;script type="text/javascript"&gt;
            function performAjaxSubmission(formID) {
                // alert(formID);
                var page = "edit-Test";
                var URL = "http://310it.com/test/updateDB.php?page=" + page;
                var formData = $("#editForm-" + formID).serialize();
                // alert(formData);
                $.post(URL , formData, function(theResponse){
                    alert("Data: " + theResponse + "\nStatus: " + status);
                    $("#contentRight").html(theResponse);
                    // $("#contentRight").text(theResponse);
                    //  document.getElementById("contentRight") = theResponse;
                    //  document.getElementById("contentRight").innerHTML(theResponse);
                });                                                              
            }                                 
        &lt;/script&gt;

        &lt;script type="text/javascript"&gt;
            $(document).ready(function(){ 

                $("#saveEdit-1").click(function(){ performAjaxSubmission(1); });
                $("#saveEdit-2").click(function(){ performAjaxSubmission(2); });

            }); 
        &lt;/script&gt;

    &lt;/head&gt;

    &lt;body&gt;

        &lt;div id="contentRight"&gt;
            &lt;p&gt;AJAX Response will be displayed here.&lt;/p&gt;
            &lt;p&gt;&amp;nbsp;&lt;/p&gt;
            &lt;span&gt;&lt;/span&gt;
        &lt;/div&gt;&lt;!-- endof contentRight --&gt;

        &lt;form id="editForm-1" name="editForm-1" method="post" action=""&gt;
            &lt;input type="hidden" name="action" id="action" value="edit"&gt;
            &lt;input type="hidden" name="formID" id="formID" value="1"&gt;
            &lt;div class="addNewItem-InputField"&gt;
                &lt;p&gt;Edit Test - 1&lt;/p&gt;
                &lt;label for="editTestName"&gt;&lt;input type="text" name="editTestName" id="editTestName" /&gt;&lt;/label&gt;
            &lt;/div&gt;&lt;!-- endof addNewItem-InputField --&gt;
            &lt;div id="saveEdit-1" name="saveEdit-1" class="submitButton"&gt;
                &lt;button title="SAVE EDIT TEST" value="Submit" name="submit" type="submit"&gt;&lt;img src="/test/images/icon-update-02.png"&gt;&lt;/button&gt;
            &lt;/div&gt;&lt;!-- endof submitButton --&gt;
        &lt;/form&gt;

        &lt;p&gt;&amp;nbsp&lt;/p&gt;

        &lt;form id="editForm-2" name="editForm-2" method="post" action=""&gt;
            &lt;input type="hidden" name="action" id="action" value="edit"&gt;
            &lt;input type="hidden" name="formID" id="formID" value="2"&gt;
            &lt;div class="addNewItem-InputField"&gt;
                &lt;p&gt;Edit Test - 2&lt;/p&gt;
                &lt;label for="editTestName"&gt;&lt;input type="text" name="editTestName" id="editTestName" /&gt;&lt;/label&gt;
            &lt;/div&gt;&lt;!-- endof addNewItem-InputField --&gt;
            &lt;div id="saveEdit-2" name="saveEdit-1" class="submitButton"&gt;
                &lt;button title="SAVE EDIT TEST" value="Submit" name="submit" type="submit"&gt;&lt;img src="/test/images/icon-update-02.png"&gt;&lt;/button&gt;
            &lt;/div&gt;&lt;!-- endof submitButton --&gt;
        &lt;/form&gt;

    &lt;/body&gt;
&lt;/html&gt;


&lt;?php 
/************************************
           updateDB.php
************************************/

if (isset ($_GET['page'])) {
    $currentPage = $_GET['page'];
} else {
    $currentPage = NULL;
}
    showVarPre ($_POST);
    showVarMed ($currentPage);      // Shows the current page passed from JS

if  ($currentPage == 'test2') {
    $currentTable = 'records';
} elseif ( $currentPage == 'court-types') {
    $currentTable = 'ota_court_types';
}



$action                 = ($_POST['action']); 
echo "&lt;h3&gt;" . $action . "&lt;/h3&gt;";

if ($action == "updateRecordsListings"){

/*
    $listingCounter = 1;
    foreach ($updateRecordsArray as $recordIDValue) {
        $query = "UPDATE " . $currentTable . " SET position = " . $listingCounter . " WHERE id = " . $recordIDValue;
        mysql_query($query) or die('Error, insert query failed');
        $listingCounter = $listingCounter + 1;  
    }
*/

    echo '&lt;pre&gt;';
    echo '&lt;/pre&gt;';
    echo 'If you refresh the page, you will see that records will stay just as you modified.';

}
?&gt;
</code></pre>