使用ajax和javascript显示和隐藏表单

我试图通过ajax在数据库中插入值。当从数据库循环时，有行进入。我在每一行中添加了一列，其中包含按钮。点击按钮，我正在提交数据库中的值，工作正常。删除查询也可以正常工作

我想在成功提交时隐藏选择表单并显示取消表单

当插入查询失败时，希望显示错误

然后单击取消按钮，在删除查询成功时显示选择表单

我需要帮助。提前谢谢

PHP代码：

While循环代码：

if($num_rowsslctcncl)
{
    $slctcncldis="<form name='cancel_selection' class='cancel_selection' action=''>
    <input type='hidden' name='crs' class='user_id' value='$coursename'>
    <input type='hidden' name='insertid' class='insertid' value='$insertid'>

    <button class='btn btn-cancel btn-xs' value='Cancel'>Cancel</button>
    </form>";
}

if(!$num_rowsslctcncl)
{
    $slctcncldis="<form name='form_submit_change_status' class='form_submit_change_status' action=''>
    <input type='hidden' name='crs' class='user_id' value='$coursename'>
    <input type='hidden' name='insertid' class='insertid' value='$insertid'>

    <button class='btn btn-warning btn-xs' value='Select Course'>Select Course</button>
    </form>";
}

echo"<tbody><tr>
<td>$crs</td>
<td>$slctcncldis </td>    

if（$num_rowsslctncl）
{
$slctcncldis=”
取消
";
}
如果（！$num_rowsslctncl）
{
$slctcncldis=”
选课
";
}
回声“
$crs
$slctcncldis

Ajax和javascript代码：

插入功能代码：

<script>
$(function(){
    $('.btn.btn-warning').click(function(e) {
        e.preventDefault();
        var $form = $(this).closest(".form_submit_change_status");
        var formData =  $form.serializeArray();
        var userId =  $form.find(".user_id").val();
        var URL = "response.php";

        $.post(URL, formData).done(function(data) {
        });

        fail(function(jqXHR, textStatus, errorThrown) {
           alert(errorThrown);  
        });
    });
});
</script>

$（函数（）{
$（'.btn.btn警告'）。单击（函数（e）{
e、 预防默认值（）；
var$form=$（this）.closest（“.form\u submit\u change\u status”）；
var formData=$form.serializeArray（）；
var userId=$form.find（“.user_id”）.val（）；
var URL=“response.php”；
$.post（URL，formData）.done（函数（数据）{
});
失败（函数（jqXHR、textStatus、ERRORSHORN）{
警报（错误抛出）；
});
});
});

删除功能代码：

<script>
$(function(){
    $('.btn.btn-cancel').click(function(e) {
        e.preventDefault();
        var $form = $(this).closest(".cancel_selection");
        var formData =  $form.serializeArray();
        var userId =  $form.find(".user_id").val();

        var URL = "cancelselection.php";
        $.post(URL, formData)
        .done(function(data) {
        });

        fail(function(jqXHR, textStatus, errorThrown) {
        });
    });
});
</script>

$（函数（）{
$（'.btn.btn取消'）。单击（函数（e）{
e、 预防默认值（）；
var$form=$（this）.closest（“.cancel_selection”）；
var formData=$form.serializeArray（）；
var userId=$form.find（“.user_id”）.val（）；
var URL=“cancelselection.php”；
$.post（URL、formData）
.完成（功能（数据）{
});
失败（函数（jqXHR、textStatus、ERRORSHORN）{
});
});
});

Response.php

插入查询代码：

<?php
include_once("db.php");

    $crs = $_POST["crs"];
    $sid = $_POST["insertid"]; 

    $strscheck="SELECT * FROM add_delete_record where sid='$sid'";
    $resultscheck=mysql_query($strscheck) or die(mysql_error());

    $num_rowscheck = mysql_num_rows($resultscheck);

    if($num_rowscheck < 3)
    {
        $strsreg="insert into add_delete_record  (sno, chcourse, sid) values('', '$crs','$sid')";
        $resultsreg=mysql_query($strsreg) or die(mysql_error());
    }
    else
    {
    }
?>

---

您需要在循环中打印两个表单。不要插入所选表单，而是先显示和隐藏表单。尝试类似的操作。将其与代码进行比较，您会发现差异

if($num_rowsslctcncl)
{
    $slctcncldis_Cancel ="<form name='cancel_selection' class='cancel_selection' style="display:block;" action=''>
            <input type='hidden' name='crs' class='user_id' value='$coursename'>
            <input type='hidden' name='insertid' class='insertid' value='$insertid'>
            <button class='btn btn-cancel btn-xs' value='Cancel'>Cancel</button>
        </form>";

} else {
    $slctcncldis_Cancel ="<form name='cancel_selection' class='cancel_selection' style="display:none;" action=''>
            <input type='hidden' name='crs' class='user_id' value='$coursename'>
            <input type='hidden' name='insertid' class='insertid' value='$insertid'>
            <button class='btn btn-cancel btn-xs' value='Cancel'>Cancel</button>
        </form>";
}

if(!$num_rowsslctcncl)
{

    $slctcncldis_Submit ="<form name='form_submit_change_status' class='form_submit_change_status' style="display:block;" action=''>
            <input type='hidden' name='crs' class='user_id' value='$coursename'>
            <input type='hidden' name='insertid' class='insertid' value='$insertid'>
            <button class='btn btn-warning btn-xs' value='Select Course'>Select Course</button>
            </form>";

} else {
    $slctcncldis_Submit ="<form name='form_submit_change_status' class='form_submit_change_status' style="display:none;" action=''>
            <input type='hidden' name='crs' class='user_id' value='$coursename'>
            <input type='hidden' name='insertid' class='insertid' value='$insertid'>
            <button class='btn btn-warning btn-xs' value='Select Course'>Select Course</button>
            </form>";

}

echo"<tbody><tr>
<td>$crs</td>
<td>$slctcncldis_Cancel.$slctcncldis_Submit</td>    


    Ajax and javascript Code :

Insert Function Code :

    <script>
$(function(){
    $('.btn.btn-warning').click(function(e) {
        e.preventDefault();
        var $form = $(this).closest(".form_submit_change_status");

    var $cancel_form = $form.siblings(".cancel_selection");

        var formData =  $form.serializeArray();
        var userId =  $form.find(".user_id").val();


        var URL = "response.php";
        $.post(URL, formData).done(function(data) {
        $form.hide();
        $cancel_form.show();
        });

        fail(function(jqXHR, textStatus, errorThrown) {
           alert(errorThrown);  
        });


    });
});

</script>

if（$num_rowsslctncl）
{
$slctcncldis\u取消=”
取消
";
}否则{
$slctcncldis\u取消=”
取消
";
}
如果（！$num_rowsslctncl）
{
$slctcncldis_提交=”
选课
";
}否则{
$slctcncldis_提交=”
选课
";
}
回声“
$crs
$slctcncldis_取消。$slctcncldis_提交
Ajax和javascript代码：
插入功能代码：
$（函数（）{
$（'.btn.btn警告'）。单击（函数（e）{
e、 预防默认值（）；
var$form=$（this）.closest（“.form\u submit\u change\u status”）；
var$cancel_form=$form.sibbines（“.cancel_selection”）；
var formData=$form.serializeArray（）；
var userId=$form.find（“.user_id”）.val（）；
var URL=“response.php”；
$.post（URL，formData）.done（函数（数据）{
$form.hide（）；
$cancel_form.show（）；
});
失败（函数（jqXHR、textStatus、ERRORSHORN）{
警报（错误抛出）；
});
});
});
我的问题没有得到任何答案。我问错问题了吗？问题是没有人想读这么多代码。尽量发布相关代码，并保持简短和简单，以解释您的问题是什么。但当我给出简短代码时，每个人都要求完整的代码。。你能帮我一下吗。这么多人都坚持这一点hours@Test在下面添加了答案。这有帮助吗？Kuldeep它在某种程度上有帮助。但最初它显示了这两种形式。我不想这样做，因为它允许再次选择所选项目。我们可以通过response.php完成吗？如果插入查询成功，则隐藏选择表单并显示取消表单。不应同时显示两种表单，请在我的答案中为这两种表单选中style=“display:none；”和style=“display:block；”。你应该在打印表格之前应用这些样式。是的，现在很好。非常感谢你。如果（$num_rowscheck>3），则需要从response.php再做一件事。我想显示一些msgone问题，如果插入查询未成功，则仍将按钮从选择更改为取消。您需要修改“$.post（URL，formData）.done（函数（数据）{}”函数。读取来自服务器的“数据”，如果它包含错误，则不显示/隐藏表单。如果“数据”包含成功消息，则显示/隐藏表单