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

Question

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

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

并且当插入查询失败时要显示错误。

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

需要帮助。提前致谢

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>    

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>

删除函数代码:

<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>

响应.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
    {
    }
?>

Answer 1

您需要循环打印两种形式。不是插入选定的表单，而是最初显示和隐藏表单。尝试这样的事情。将其与您的代码进行比较，您会发现不同之处。

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>