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

Question

I have created a user profile information update using php. To update his image, what I do is that first let him delete the image and ask him to upload a new image. If accidentally user click image update button without clicking image delete button how to show an error message as "please first delete your Image and then upload a new image". I couldn't find any way of doing it. A help would be really appreciated Given below is my code

<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

This is what i can think of if you really want to deal with this using PHP ,

considering this is your current code

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

from your PHP side, check, if there is still a photo in db reload this upload page and pass photoDelete variable as false when it's loading the page php will render this as an error.

But! Wait! Why don't you just replace/delete the previous photo with the newly updated one in your php? assuming that there's only one record of profile photo for each user, just update your db record with the newly updated photo and delete the previous record !?

it's a better User Experience overall