javascript - 当有两个按钮时，如果用户在单击按钮1之前尝试单击按钮2，如何显示错误消息 - Javascript或html

Question

我已经使用 php 创建了用户个人资料信息更新。为了更新他的图像，我所做的就是首先让他删除图像并要求他上传新图像。如果用户不小心单击图像更新按钮而不单击图像删除按钮，如何显示错误消息“请先删除您的图像，然后上传新图像”。我找不到任何方法可以做到这一点。非常感谢您的帮助 下面是我的代码

<div class="form-group">
    <center><label>Update A New Profile Picture </label></br></center>
        <form method="post" action="update_userinfo.php" enctype="multipart/form-data">
                <center><img id="uploadPreview4" style="width: 100px; height: 100px;" /></center>
                <center><input type="file" name="Filename4" id="uploadImage4" onchange="PreviewImage4();" class="form-group"><input TYPE="submit" name="updateImage" value="Update Image" class="btn btn-success" /></center>

        </form>
</div>
<div class="col-md-6">
    <center><label>Your Current Profile Picture </label></br>
        <form method="post" action="update_userinfo.php" enctype="multipart/form-data" onSubmit="if(!confirm('Do You really want to update your profile picture?')){return false;}">
            <?php
            echo "<img border=\"0\" src=\"".$row['image_path4']."\" width=\"100\"  height=\"100\" >";
            echo "<br>";  ?>
        <input TYPE="submit" name="delete" value="delete" class="btn btn-success" />
        </form>
</div>

Answer 1

如果你真的想使用 PHP 来处理这个问题，这就是我能想到的，

考虑到这是您当前的代码

<div class="form-group">
    <center><label>Update A New Profile Picture </label></br></center>
        <form method="post" action="update_userinfo.php" enctype="multipart/form-data">
                <center><img id="uploadPreview4" style="width: 100px; height: 100px;" /></center>
                <center><input type="file" name="Filename4" id="uploadImage4" onchange="PreviewImage4();" class="form-group"><input TYPE="submit" name="updateImage" value="Update Image" class="btn btn-success" /></center>

        </form>
        ////
          new code
          <?php if(isset($photoDeleted) && $photoDelete=== false) :>
            <center>Hey! Delete your photo first!</center>
          <?php endif; ?>
        ////
</div>
<div class="col-md-6">
    <center><label>Your Current Profile Picture </label></br>
        <form method="post" action="update_userinfo.php" enctype="multipart/form-data" onSubmit="if(!confirm('Do You really want to update your profile picture?')){return false;}">
            <?php
            echo "<img border=\"0\" src=\"".$row['image_path4']."\" width=\"100\"  height=\"100\" >";
            echo "<br>";  ?>
        <input TYPE="submit" name="delete" value="delete" class="btn btn-success" />
        </form>
</div>

从 PHP 端，检查数据库中是否仍有照片，重新加载此上传页面，并在加载 php 将呈现的页面时将 photoDelete 变量传递为 false这是一个错误。

但是!等待!为什么不在你的 php 中用新更新的照片替换/删除上一张照片呢？假设每个用户只有一条个人资料照片记录，只需使用新更新的照片更新您的数据库记录并删除以前的记录!？

总体而言，这是更好的用户体验