我如何隐藏和显示提交按钮时，一个是按钮被点击

How can i Hide and Show Submit button when one is button is clicked

本文关键字：按钮 一个 提交 何隐藏 隐藏 显示      更新时间：2023-09-26

我正在从数据库中检索一些数据，并在HTML表中显示它们。但是现在我正在为下面的场景而挣扎。

如果用户点击禁用按钮，它应该隐藏，启用按钮应该显示。如果用户点击启用按钮，它应该隐藏，禁用按钮应该显示。

我的代码

<html>
<title></title>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $('input:submit').click(function(){
            $('input:submit').attr("disabled", true);
        });
    </script>
</head>
<body>
<?php
echo "<table border='1' align='center' width='100%'>
<tr>
<th>ID</th>
<th>Image</th>
<th>Modified Date</th>
<th>URL</th>
<th>Clicks</th>
<th>Status</th>
<th>Action</th>
</tr>";
while($row = mysqli_fetch_array($query))
{
    $id = $row['img_id'];
    echo "<tr>";
    echo "<td align='center'>" . $row['img_id'] . "</td>";
    echo "<td align='center' width='500px'>" . '<img width = 200px; height=100px; src=" '. ($row['img_path']) . '"/>'. "</td>";
    echo "<td align='center' width='350px'>" . $row['date'] . "</td>";
    echo "<td align='center'>" . $row['url'] . "</td>";
    echo "<td align='center'>" . $row['clicks'] . "</td>";
    echo "<td align='center'>" . $row['status'] . "</td>";
    echo "<td align='center'><a href='image_update.php?id=$id'><button>Update</button></a>
    <form method='post' >
        <input type='hidden' name='tid' value='$id'/>
        <input type='submit' name='disable' id='disable' value='Disable'>
         <input type='submit' name='enable' id='enable' value='Enable'>
    </form>
    </td>";
    $id = $_POST['tid'];
    if($_SERVER['REQUEST_METHOD']=='POST') {

        $sql = "UPDATE advertisementnew SET status = 'Disabled' WHERE img_id='$id'";
        mysqli_query($con, $sql);
    }
    echo "</tr>";
}

echo "</table>";

试试这个js:

$('#enable').css("display", "none");
    $('#disable').click(function(){
            $('#enable').css("display", "block");
             $('#disable').css("display", "none");
    });

代替:

$('input:submit').click(function(){
            $('input:submit').attr("disabled", true);
        });

你可以试试这个吗?希望这是有效的

<script type = "text/javascript" >
    $('input:submit').click(function () {
    var check = $(this).attr('id');
    if (check == 'disable') {
        $('#enable').show();
        $('#disable').hide();
    }
    if (check == 'enable') {
        $('#disable').show();
        $('#enable').hide();
    }
    });
</script>

你可以有class

.hide-show{
   display : none;
}

HTML: 

<input type='submit' name='disable' id='disable' value='Disable' class="enable-disable-btn">
<input type='submit' name='enable' id='enable' value='Enable' class="enable-disable-btn hide-show">

首先将hide-show类放在需要隐藏的按钮上。将类enable-disable-btn添加到启用/禁用按钮JS:

可以使用jQuery#toggleClass

$(".enable-disable-btn").on('click',function(){
     $(".enable-disable-btn").toggleClass('hide-show')
})

You need to add unique id dynamically created in while loop in your case id is not unique
 for this
changes in php replace these two lines

<input type='submit'  onclick='doEnableDesable(this)' name='disable' id='disable".$id."' value='Disable'>
<input type='submit' onclick='doEnableDesable(this)' name='enable' id='enable".$id."' value='Enable'>

And in javascript define function for dynamic Id

function doEnableDesable(params)
{
 if (params.value == 'disable') {
        $('#'+params.id).show();
        $('#'+params.id).hide();
    }
    if (params.value == 'enable') {
        $('#'+params.id).show();
        $('#'+params.id).hide();
    }
}
相关文章：