Develop Reference

Laravel: Confirmation deletion does not work

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()"

Redirect location after ajax call in a click event

The code below is supposed to
Process the delete request when the delete a tag is select
redirect to the /projects webpage.
it seems like the redirect to /projects is occurring before the delete function gets a chance to run.
Is there a best practice that I'm missing here? or is there a better way to do this?
$(document).ready(function() {
$('#delete').click(function() {
var settings = {
url: `http://localhost:3000/projects/<%= project.id %>`,
method: 'DELETE',
timeout: 0,
};
$.ajax(settings).done(function(response) {
console.log(response);
});
});
});
<form class="update-project" method="POST" action="/update-project">
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">ID</span>
<input type="text" class="form-control" name="id" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" value="<%= project.id %>" disabled />
</div>
<a type="cancel" class="btn btn-secondary" href="/projects">Cancel</a>
<button type="submit" class="btn btn-primary float-right">Submit</button>
<a id="delete" type="delete" class="btn btn-danger" href="/projects"> DELETE </a>
</form>

I will try to answer using all the information the colleagues left in the comments.
We need to:
1 - Get the click button.
2 - Call event.preventDefault() to avoid refresh due to the <form method="POST" action=...>.
3 - Do the ajax request on the "click" event.
4 - In the ajax callback do the redirection.
Step by step:
1 - I will remove the href="/projects" from <a id="delete" type="delete" class="btn btn-danger" href="/projects"> DELETE </a>
2 - Add event.preventDefault() in the first line of the "click" callback.
3 - Add window.location.replace('/projects') in the first line of the ajax callback.
After all this it would look like:
<form class="update-project" method="POST" action="/update-project">
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">ID</span>
<input type="text" class="form-control" name="id" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" value="<%= project.id %>" disabled />
</div>
<a type="cancel" class="btn btn-secondary" href="/projects">Cancel</a>
<button type="submit" class="btn btn-primary float-right">Submit</button>
<a id="delete" type="delete" class="btn btn-danger"> DELETE </a>
</form>
$(document).ready(function() {
$('#delete').click(function(event) {
event.preventDefault();
var settings = {
url: `http://localhost:3000/projects/${project.id}>`,
method: 'DELETE',
timeout: 0,
};
$.ajax(settings).done(function() {
window.location.replace('/projects');
});
});
})
Note: I also want to add that the HTML structure doesn't make sense with what you want to do. You are creating an HTML form, but at the same time, you want to handle the form calls via JS instead of using the native HTML form you already have there. It should be refactored to get cleaner and less buggy-prone.
Note 2: You should not use <a> tags as buttons, buttons should be used as buttons because this is what they are :)

Issue ended up being another part of my code on the server side. I needed to return the status code in the express js router.put via return response.redirect(303, '/projects');
const express = require('express');
const ProjectModel = require('../src/controller/projectController');
const router = express.Router();
const controller = new ProjectModel();
module.exports = (params) => {
router.delete('/:id', async (request, response) => {
await controller.deleteById(request.params);
return response.redirect(303, '/projects');
});
return router;
}

How to get multiple values using JSTL tags?

I have this button:
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="${usr.idUser}" onclick="deleteUser(this.value)">Delete</button>
That calls the function deleteUser once the button is clicked.
I would like to know how to send more than one value at the same time.
For example, if I want to send the idUser and the userName, how can I do it?.
I tried this but it's not working:
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="${usr.idUser, usr.userName}" onclick="deleteUser(this.value)">Delete</button>
I expect to receive the values in the same jsp page:
function deleteUser(val1, val2) {
alert(val1);
alert(val2);
}

You can simply pass your values under your function under '' quotes else it will give you error not defined.So your button code will look like below :
<button type="button" class="btn btn-danger" value="something" id="deleteuserbtn" onclick="deleteUser(this.value ,'${usr.idUser}','${usr.userName}')">
Delete</button>
Demo Code :
function deleteUser(val1,val2,val3){
alert("val :"+val1 +" "+val2+" "+val3);
}
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="something" onclick="deleteUser(this.value,'${usr.idUser}','${usr.userName}')">
Delete</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>

Knockout.JS 'enable' binding on length condition not working

All the data displaying and adding / deleting buttons seem to work until I change the delete button to do a check to make sure that there is always at least one person on the screen:
<!-- Check number of items before enabling delete button !-->
<button type="button" data-bind='enable: people().length > 1, click: $root.removePerson'>Delete</button>
The error is as follows:
Uncaught ReferenceError: Unable to process binding "foreach: function (){return people }"
Message: Unable to process binding "enable: function (){return people().length > 1 }"
Message: people is not defined
HTML
<div data-bind='foreach: people'>
<div class="personWell">
<input type="text" data-bind="value: name"></input>
<input type="text" data-bind="value: company"></input>
<button type="button" class="btn btn-sm btn-warning" data-bind='click: $root.removePerson'>Delete</button>
</div>
</div>
<button type="button" class="btn btn-sm btn-primary" data-bind='click:addPerson'>Add Person</button>
JavaScript
var ObservedPersonModel = function(people) {
var self = this;
self.people = ko.observableArray(people);
self.addPerson = function() {
self.people.push({
person_id:"",
name: "",
company: "",
positive_observation_id:""
});
};
self.removePerson = function(person) {
self.people.remove(person);
};
};
//originalPeopleObserved is a JSON encoded list of objects
var peopleViewModel = new ObservedPersonModel(originalPeopleObserved);
ko.applyBindings(peopleViewModel);
Resources
Here are some of the links where I learned about this functionality:
http://jsfiddle.net/rniemeyer/7RDc3/
http://knockoutjs.com/examples/gridEditor.html

Try this:
<button type="button" data-bind='enable: $root.people().length > 1, click: $root.removePerson'>Delete</button>

Actually i got your code running in a fiddle. First thing i changed was two > you forgot in your html code:
<input type="text" data-bind="value: name"></input>
<input type="text" data-bind="value: company"></input>
Then i added an empty object for testing:
originalPeopleObserved = null;
var peopleViewModel = new ObservedPersonModel(originalPeopleObserved);
ko.applyBindings(peopleViewModel);
And on Safari i can use your sample as expected.
Try this fiddle here