Delete Conformation box with JavaScript

JavaScript
1

Hello!

I have the following (working) PHP code that allows a user to delete their account from my service.

			<form action="function/DirFunctDeactivate.php" method="post" onsubmit="
					var reason = document.getElementById('reason').value;
					if(reason.length<8){
						alert('Reason must be 8 characters long...');
						return false;
					}
					return true;
				">
				<p class="text-muted mx-10 alert alert-secondary">Delete Account</p>
				<div class="mb-10 px-10">
					<label class="form-label required">Deacivation Reason</label>
					<textarea name="reason" placeholder="Enter deactivation reason here..." class="form-control" id="reason"></textarea>
					<input type="hidden" name="account_user" value="<?php echo $AccountInfo['account_user'];?>">
					<input type="hidden" name="account_key" value="<?php echo $AccountInfo['account_key'];?>">
				</div>
				<div class="mb-10 px-10">
					<input name="popup" class="btn btn-danger text-white">
				</div>
			</form>

However, the current code will delete the account as soon as a reason is entered, and the button is pressed. I want a custom dialog window to appear asking the user “Are you sure you want to delete?” (The code for this dialogue box is below.)

<div class="box-center delete-warning text-center" id="modal">
    <h2>Are you sure you want to delete?</h2>
    <p>Some text here</p>
    <button type="submit" value="Deactivate Account" class="btn btn-danger text-white">Delete</button>
    <button value="cancel" class="btn">Cancel</button>
</div>

I wish for the popup dialog to appear in the center of the users screen (And the background to blur) when they click the “Deativate Account” button, and the “function/DirFunctDeativate.php” file to be called after the user confirms in the dialog box (And the popup to disappear if “cannel” is pressed). I think I will need to add something like below to make this work (Replace with the start <form> tag).

<form action="function/DirFunctDeactivate.php" method="post" onsubmit="
					var reason = document.getElementById('reason').value;
					if(reason.length<8){
						alert('Reason must be 8 characters long...');
						return false;
					}
					return true;
                    modal.style.display = "block";
                    document.body.style.overflow = "hidden";
				">

I have not been able to successful pair the two (And convince the form not to submit until after confirmation), and was hoping for some assistance.
Thanks in advance!

2

  1. Lines after return true; are never executed, because return finishes function

  2. Placing so much code in HTML-attribute is very weird idea, check addEventListener() method - it allows you to bind event callbacks from external JS-file. Mixing HTML and JS is always bad thing.

3

Personally I would just do something like the following and call it a day → 

<button class="form-button" formaction="delete.php?id=<?= $id ?>"
                    onclick="return confirm('Are you sure you want to delete this item?');">Delete
            </button>
4

I’m with Pepster here… or at least, i’d go one of two ways:
1: use the Confirm dialog.
2: Put the reason box onto the modal. That way, the user has clicked the button, then put in a reason, and hit OK. Also removes the clutter of the reason box from your main HTML.

5

I was able to get it working using this:

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.