如何在使用javaScript提交表单时更新div的内容_Javascript_Php_Jquery

如何在使用javaScript提交表单时更新div的内容

javascript php jquery

如何在使用javaScript提交表单时更新div的内容,javascript,php,jquery,Javascript,Php,Jquery,当使用提交的表单值提交editForm-1或editForm-2时，我想更新#contentRight的内容我可以从updateDB.php文件获得响应输出，并在 alert("Data: " + theResponse + "\nStatus: " + status); 但是，它不会使用以下两行中的任何一行更新div内容 $("#contentRight").html(theResponse); document.getElementById("contentRight") = theRe

当使用提交的表单值提交editForm-1或editForm-2时，我想更新#contentRight的内容

我可以从updateDB.php文件获得响应输出，并在

alert("Data: " + theResponse + "\nStatus: " + status);

但是，它不会使用以下两行中的任何一行更新div内容

$("#contentRight").html(theResponse);
document.getElementById("contentRight") = theResponse;

[编辑----------------]

我添加了一些样式以查看哪些元素占用了哪些空间。如果单击

#saveEdit-1

（这是带有蓝色边框的元素），脚本将按预期工作。单击

#saveEdit-1按钮

元素（箭头）时，div不会更新。为什么?

如果我将“单击侦听器”更改为

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

它仍然不起作用

[/编辑----------------]

任何帮助都将非常感激

这是文件

<?php   require_once("includes/functions.php"); ?>

<!DOCTYPE html>
<html>
    <head>
        <style>
            #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; 
            }
        </style>

        <link href="/test/stylesheets/_appStyleAdmin.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="javascripts/jquery-1.12.0.min.js"></script>
        <script type="text/javascript" src="javascripts/jQuery-UI/jquery-ui.min.js"></script>


        <script type="text/javascript">
            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);
                });                                                              
            }                                 
        </script>

        <script type="text/javascript">
            $(document).ready(function(){ 

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

            }); 
        </script>

    </head>

    <body>

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

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

        <p>&nbsp</p>

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

    </body>
</html>


<?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 "<h3>" . $action . "</h3>";

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 '<pre>';
    echo '</pre>';
    echo 'If you refresh the page, you will see that records will stay just as you modified.';

}
?>


#编辑表-1，#编辑表-2{
边框：1px纯红；
}
#保存编辑-1，#保存编辑-2{
边框：2件纯蓝；
}
#saveEdit-1按钮、#saveEdit-2按钮{
边框：3倍纯绿；
}
功能提交（formID）{
//警报（formID）；
var page=“编辑测试”；
变量URL=”http://310it.com/test/updateDB.php?page=“+第页；
var formData=$（“#editForm-”+formID）.serialize（）；
//警报（formData）；
$.post（URL、表单数据、函数（响应）{
警报（“数据：+响应+”\n状态：+状态）；
$（“#contentRight”）.html（响应）；
//$（“#contentRight”）.text（响应）；
//document.getElementById（“contentRight”）=响应；
//document.getElementById（“contentRight”）.innerHTML（响应）；
});                                                              
}                                 
$（文档）.ready（函数（）{
$（“#saveEdit-1”）。单击（函数（）{performAjaxSubmission（1）；}）；
$（“#saveEdit-2”）。单击（函数（）{performAjaxSubmission（2）；}）；
}); 
这里将显示AJAX响应

编辑测试-1
 
编辑测试-2

您希望从响应中获得html或文本吗？如果是前者，请使用：

$（“#contentRight”）.html（响应）
如果是后者，请使用：
$（“#contentRight”）.text（响应）
更新：
您提交的表单正在刷新整个页面。这是默认行为。您需要捕获事件并防止默认行为
您希望从响应中获得html或文本吗？如果是前者，请使用：
$（“#contentRight”）.html（响应）
如果是后者，请使用：
$（“#contentRight”）.text（响应）
更新：
您提交的表单正在刷新整个页面。这是默认行为。您需要捕获事件并防止默认行为
问题是使用输入类型作为图像，而不是使用带有图像的按钮。我仍然不知道或不理解为什么，但问题是使用输入类型作为图像，而不是使用带有图像的按钮。我仍然不知道或者不理解为什么，但是还要注意，您已经附加了success函数，但是当前没有错误回调。任何AJAX故障都不会报告给客户端谢谢提醒，我会在这项工作完成后处理AJAX故障。谢谢回答，不幸的是，这导致警报窗口无法显示。另外请注意，您已经附加了成功函数，但目前没有错误回调。任何AJAX故障都不会向客户报告感谢您的提醒，我会在这项工作完成后处理AJAX故障。感谢您的回答，不幸的是，这导致了警报窗口无法显示。我知道这应该是可行的，但事实并非如此。可能它确实更改了div的内容，但没有刷新窗口的部分。您检查了控制台吗？我检查了控制台，但没有错误或警告。这是我用一些新发现编辑的问题的工作版本。如果单击按钮的div，而不是按钮本身，脚本将正常工作@塔瑟斯顿：我知道这应该行得通，但是不行。可能它确实更改了div的内容，但没有刷新窗口的部分。您检查了控制台吗？我检查了控制台，但没有错误或警告。这是我用一些新发现编辑的问题的工作版本。如果单击按钮的div，而不是按钮本身，脚本将正常工作@塔特瑟斯顿
document.getElementById("contentRight").innerHTML(theResponse);

        `$(document).ready(function(){ 
            $("#editForm-1").submit(function(e){ 
                e.preventDefault();
                performAjaxSubmission(1);
            });
            $("#editForm-2").submit(function(e){ 
                e.preventDefault();
                performAjaxSubmission(2);
            });`