Laravel: Confirmation deletion does not work - javascript

I'm having a problem with deleting confirmation; specifically, when I click on the delete button, the item is deleted directly without the window for confirming the deletion appearing first.
Can someone help me?
function confirmDelete(){
let deleteLink = document.querySelector('.delete');
deleteLink.addEventListener('click', function(event) {
event.preventDefault();
let choice = confirm(this.getAttribute('data-confirm'));
if (choice) {
window.location.href = this.getAttribute('action');
}
});
}
<form action="{{ route('client.destroy',compact('client'))}}" method="POST">
<a class="btn btn-primary" href="{{route('client.edit', compact('client'))}}">Edit</a>
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger delete" onclick="confirmDelete()" data-confirm="Sure?">Delete</button>
</form>

Here is the solution.
Set button type button and set id to form.
<form action="{{ route('client.destroy',compact('client'))}}" method="POST" id="form_id">
<a class="btn btn-primary" href="{{route('client.edit',compact('client'))}}">Edit</a>
#csrf
#method('DELETE')
<button type="button" class="btn btn-danger delete" onclick="confirmDelete()" data-confirm="Sure?">Delete</button>
</form>
Some change in your function.
function confirmDelete() {
let deleteLink = document.querySelector('.delete');
deleteLink.addEventListener('click', function (event) {
event.preventDefault();
let choice = confirm($(this).data('confirm'));
if (choice) {
$('#form_id').submit();
// window.location.href = this.getAttribute('action');
}
});
}
If you do this for multiple client make sure FORM ID is unique.

Your should prevent default behaviour(which is submitting form onclick) of input:
onclick="event.preventDefault();confirmDelete()"

Related

ASP.NET Core Razor Pages - Disable all the buttons on multiple forms

I’m working on ASP.NET Core Razor Pages
and I'm trying to disable all the buttons on the page when a button is clicked.
My code looks something like this:
<form method="post" onsubmit="DisableBtns()">
<button class="btn btn-primary" type="submit" name="btn1" > </button>
</form>
<form method="post" onsubmit="DisableBtns()">
<button class="btn btn-primary" type="submit" name="btn2" > </button>
</form>
<script>
function DisableBtns() {
alert("The form was submitted");
btn1.disabled = true; btn2.disabled = true; return true;
}
</script>
My problem is the alert did execute but the buttons are not disabled.
The following code does work but I don't want it I want to use the function way:
<form method="post" onsubmit="btn1.disabled = true; btn2.disabled = true; return true;">
</form>
Can someone please help me resolve this issue or if you have a better way that works on Razor Pages I would really appreciate it.
Unsure whether you have declare btn1 and btn2 variables as you didn't show them.
Solution 1: With JavaScript .querySelectorAll()
function DisableBtns() {
alert("The form was submitted");
document.querySelectorAll("form button").forEach(x => {
x.disabled = true;
});
return true;
}
Solution 2: With jQuery
Pre-requisite:
You have imported jQuery library.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
function DisableBtns() {
alert("The form was submitted");
$("form button").prop('disabled', true);
return true;
}
You can try to remove onsubmit and use $("form button[type='submit']").click(),here is a demo:
form:
<form method="post">
<button class="btn btn-primary" type="submit" name="btn1"> </button>
</form>
<form method="post">
<button class="btn btn-primary" type="submit" name="btn2"> </button>
</form>
js:
$("form button[type='submit']").click(function(event) {
event.preventDefault();
$("form button[type='submit']").each(function(index) {
$(this).attr("disabled",true);
});
})

How to submit one of many forms generated from loop by clicking on text

A query returns an array of notifications, which is looped through on the front-end. For each item in the array, I have two options: Mark as read, Delete, each is text. The objective is to trigger a form submission by clicking on the text.
The front end code that is being looped is a button with a drop-down with the selections. I want to be able to click the text to submit the form. The JavaScript I have learned is tricky. I have two ways to get a click response, but I am stuck because I cannot figure out how to submit the form.
<button class="btn btn-light btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<form action="/notifications/{{ $notification->id }}/edit" method="POST" name="updateNotificationForm" class="update-notification-form">
#csrf
{{-- #method('PUT') --}}
<input type="hidden" name="id" value="{{ $notification->id }}">
<p class="update-notification pl10">Mark read</p>
</form>
<form action="/notifications/delete/{{ $notification->id }}" method="POST" class="delete-notification-form">
#csrf
<input type="hidden" name="id" value="{{ $notification->id }}">
<p class="delete-notification pl10">Delete</p>
</form>
</div>
Screenshot of front-end*
Here's the Javascript:
Method one:
document.querySelectorAll('.update-notification').forEach(item => {
item.addEventListener('click', event => {
console.log("Mark read clicked");
// submit form
});
});
Method two:
JavaScript Resource
document.addEventListener('click', function (event) {
if ( event.target.classList.contains('update-notification') ) {
console.log("Mark read was clicked");
// submit form
}
}, false);
The console.log shows that each method links to every element in the array, but I cannot figure out how to submit the form.
I appreciate any help!
The solution is to simply target the parentNode of the target itself and trigger a submit.
document.querySelectorAll('.update-notification').forEach(item => {
item.addEventListener('click', event => {
console.log("Mark read clicked");
event.target.parentNode.submit();
});
});

Identifying specific button in a form

so I want to get a specific value if a button is clicked in my form, but somehow its listening on all buttons and not only the buttons in my form.
Instead of the javascript example below I also tried calling the class by
$('.modifygap').bind('click', function (e) {
but in this example the value didnt get set correctly.
Here is my html:
<button type="button" id="anotherbutton">Another</button>
<form action="editortoken_information" id="showtoken" method="POST">
<button class="btn btn-outline-secondary" type="submit" name="modifygap" id="modifygap" class="modifygap"
value="14" data-value="test">14</button>
<button class="btn btn-outline-secondary" type="submit" name="modifygap" id="modifygap" class="modifygap"
value="15" data-value="test">15</button>
</form>
And here is my javascript function:
$(document.getElementById("showtoken")).ready(function () {
$("button").click(function (e) {
e.preventDefault();
document.getElementById('tokenindex').value = this.getAttribute("data-value");
})
})
I thought by listening only on the specific id it would only detect button clicks in the form. But for some reason it is listening to all button clicks.
Use event.target.value to get the value of clicked element.
$(document).ready(() => {
$('.modifygap').bind('click', function (e) {
console.log('e', e.target.getAttribute("data-value"))
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="anotherbutton">Another</button>
<button class="btn btn-outline-secondary modifygap" type="submit" name="modifygap" id="modifygap"
value="14" data-value="test14">14</button>
<button class="btn btn-outline-secondary modifygap" type="submit" name="modifygap" id="modifygap"
value="15" data-value="test15">15</button>

Multiple submit buttons in angular2 form

I am building angular2 form and I would like to have multiple buttons to submit the form, e.g "Save" and "Save and close".
I have tried to use simple buttons with click action on them, but I didn't find anyway to manually mark form as submitted to force form validation.
<form #ticketForm="ngForm" novalidate>
<input type="text" id="customerName" required
name="customerName" [(ngModel)]="ticket.customerName"
#customerName="ngModel">
<div class="tj-form-input-errors"
*ngIf="customerName.errors && (customerName.dirty ||
customerName.touched || ticketForm.submitted)">
<small [hidden]="!customerName.errors.required">
Customer name is required
</small>
</div>
<button type="button" (click)="save(ticketForm)">Save</button>
<button type="button" (click)="saveAndClose(ticketForm)">Save and close</button>
</form>
Assign different id to each button. Then you can obtain the id of the button which triggered submit using document.activeElement.id. like the following :
In your Html :
<form #form="ngForm" (submit)="firstSave(form,$event)">
...
<div class="form-group">
<input type="submit" id="submit-1" value="Submit 1" class="btn btn-sm btn-primary"/>
<input type="submit" id="submit-2" value="Submit 2" class="btn btn-sm btn-success"/>
</div>
</form>
Then in your typescript :
firstSave(form: NgForm, $event: Event) {
var activeButton = document.activeElement.id; // document.activeElement?.id
if (activeButton == "submit-1") {
alert("you have clicked on submit 1");
}
if (activeButton == "submit-2") {
alert("you have clicked on submit 2");
}
}
StackBlitz Here.
You can subscribe to form changes, which I think will fire form validation.
I do something like this:
this.physicalForm.valueChanges
.map((value) => {
return value;
})
.filter((value) => this.physicalForm.valid)
.subscribe((value) => {
do what you need with the values here...
});
Then in your click handler for each button, if this.physicalForm.valid you save or save&update.
i ran into the same situation. In my case i have 2 submit 'Save','Save and Allocate'
Solution
You can simply set the the type of submit button in the payload and do the action accordingly in the backend code.
Sample code
//here formData is my payload for the API call eg: formData.name,formData.email
<button type="submit" class="btn btn-primary md" (click)="formData.save_type='save'">Save</button>
<button type="submit" class="btn btn-primary md" (click)="formData.save_type='allocate'">Save And Allocate</button>

Customized buttons

I am using xeditable for my project.
Fiddle
Above is the fiddle.
I want to have save and send invite button instead of save button only while click on add button.
When I click on edit it should be Save button.
I tried using another forom to display save and send invite button with no result.
<form editable-form name="rowform" id="hidebuttons12" ng-show="rowform.$visible" class="form-buttons form-inline" shown="">
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel(); isCollapsed2 = !isCollapsed2" ng-hide="hideButton[$index]" class="btn btn-default">cancel</button>
<button type="submit" ng-click="saveUser(); isCollapsed2 = !isCollapsed2" ng-disabled="rowform.$waiting" ng-hide="hideButton[$index]" class="btn btn-primary">Save changes</button>
</form>
<form class="text-right" editable-form name="rowform1" ng-show="rowform1.$visible" class="form-buttons form-inline" shown="inserted == user">
<button type="button" ng-click="removeUser($index);" class="btn btn-default">cancel</button>
<button type="button" ng-click="saveUser(); sendInvite(); isCollapsed2 = !isCollapsed2" ng-disabled="rowform1.$waiting" class="btn btn-primary">{{buttonText}}</button>
</form>
Or can we have all three buttons in one form and hide and show it based on button click.
Can anyone help me with this issue.
Edit : Following your comment, new Fiddle : http://jsfiddle.net/NfPcH/11280/
The same way, you just need to add : ng-show="user.id < 0" to the save button
I updated your fiddle :
http://jsfiddle.net/NfPcH/11278/
I'm not an expert in xeditable so maybe there is a better solution.
The solution I used is setting user.id = -1 when you add new user.
And setting user.id = users.length+1 only during save.
Therefore you can use ng-show="user.id < 0" on the button you want to show only for new users.
Code:
$scope.saveUser = function (data, user) {
//$scope.user not updated yet
user.id = $scope.users.length + 1;
angular.extend(data, {
id: user.id
});
return $http.post('/saveUser', data);
};
// add user
$scope.addUser = function () {
$scope.inserted = {
id: -1,
name: '',
status: null,
group: null
};
$scope.users.push($scope.inserted);
};
View:
<button type="button" ng-show="user.id < 0" ng-click="saveUser(); sendInvite();" ng-disabled="rowform.$waiting" class="btn btn-primary">Send invite</button>

Categories

Resources