CODEWITHSUNDEEP
javascripthtml
sadee
sadee

Reputation: 43

when there are two buttons how to show error message if user tries to click button2 before clicking button1- Javascript or html

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>

Upvotes: 0

Views: 118

Answers (1)

BardZH
BardZH

Reputation: 442

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

Upvotes: 1

Related Questions