We Keep Coding

Laravel, call Delete with JavaScript

I'm still a beginner with Laravel. I wanted to do the usual "are you sure you want to delete this" question as a modal. I'm trying to do it with JS, and I have the following function that I found on this very website.
function confirmClick(){
let url = "{{route('comics.destroy', ':id') }}";
url = url.replace(':id', idComic);
window.location.href = url;
};
But when I use this what I get is the show route. This is what I have in my Controller
public function destroy($id)
{
$comic = Comic::findOrFail($id);
$comic->delete();
return redirect()->route('comics.index');
}
And the html
<div class="hidden" id="deleteModal">
<h2>Sei sicuro di volerlo eliminare?</h2>
<button type="submit" class="btn btn-danger" id="yesBtn">Sì</button>
<button type="submit" class="btn btn-info" id="noBtn">No</button>
</div>
Do i have to add in some way a method and the token? In case I have to, how do I do this? Sorry if this might look confusing, but it comes from a really confused mind at the moment lol

I suggest you use a different approach, mostly because Laravel's default route for DELETE requieres a POST.
This is a code I use very often. You have a form with the method and token, and a button with a class "deletebutton".
If you click the button, it triggers the "confirmation" from this library https://bootstrap-confirmation.js.org/. You can use another library, or use your own implementation returning a true/false value to evaluate and then decide if you submit the form or not.
if the user confirms, it looks for the form and then triggers the "submit"
<form class="form_delete" action="/record/{{ $record->id }}" method="POST">
{{ csrf_field() }}
{{ method_field('DELETE') }}
<button type="button" class="btn btn-sm btn-danger deletebutton"><i class="fa fa-trash"></i>
</button>
</form>
<script>
$(document).ready(function () {
$('.deletebutton').confirmation({
rootSelector: this,
container: 'body',
popout: true,
placement: 'top',
singleton: true,
onCancel: function () {
},
onConfirm: function (value) {
var myform = $(this).closest(".form_delete");
myform.submit();
}
});
});
</script>

Acces the correct button using this keyword

i am having trouble selecting the correct button in my form. For example i have two items and i want to delete the one on the right and when i click to delete it always removes the one on the left;
I am shure the this keyword is not the correct one
Index.ejs
<% service.forEach(function (myService) { %>
<form method="post" action="/service/<%= myService._id %>?_method=DELETE" name="del_form">
<button type="submit" class="btn btn-danger btn-del" name="del_btn"></button>
</form>
script.js
let delServiceBtn = $('button[name=del_btn]');
let delServiceForm = $('form[name=del_form]');
delServiceBtn.on('click', function (e) {
e.preventDefault();
if(confirm('Confirm delete')){
delServiceForm.submit();
}
});

Add the click attribute to your <button> tag as,
<button type="submit" class="btn btn-danger btn-del" name="del_btn" onClick="delService(this);"></button>
And write a new javascript function delService as,
function delService(buttonObj) {
if(confirm('Confirm delete')){
var btn = document.getElementsByName(buttonObj.name);
btn.submit();
}
}
Hope this helps!

2 Cancel buttons on Xeditable angular directive

I'm using xeditable angular directive.Could you tell me how to use 2 cancel buttons ? B'cos I need to implement 2 functionalities on it.I mean cancel + my work 1 and cancel + my work 2. Thanks in advance.
HTML
<form editable-form name="tableform" onaftersave="saveTable()" oncancel="cancel()">
//UI code here
<button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">Cancel</button>
</form>
JS
// cancel all changes
$scope.cancel = function() {
};
JSFiddle

You can have 2 cancel buttons within the form and pass the form as attribute. Then in the corresponding cancel functions you can invoke form.$cancel and then do your logic. form.$cancel does the same work as invoking ng-click="tableform.$cancel()".
Play with it : Plunker
//html
<button type="button" ng-disabled="tableform.$waiting" ng-click="cancel1(tableform)" class="btn btn-default">cancel 1</button>
<button type="button" ng-disabled="tableform.$waiting" ng-click="cancel2(tableform)" class="btn btn-default">cancel 2</button>
//controller
$scope.cancel1 = function(tableForm) {
// Call tableForm cancel to reset
tableForm.$cancel();
//Logic1
};
$scope.cancel2 = function(tableForm) {
// Call tableForm cancel to reset
tableForm.$cancel();
//Logic2
};

Actually you should be able to take control of how the cancel button function. If you take carefully into the code you will see that, they just create some buttons and display or hide them base on the current form status(form.$visible)
Do something like this.
<button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">cancel1</button>
</div>
Here is an example

Clear input in Angular with button, but same button is also used as part of ng-show

First of all, I can imagine the subject of this question is not very clear, so sorry for that.
I am using a button with ng-click to display an input (ng-show) and two other buttons(send, cancel). For hiding the input again I use the "cancel" button. But I also would like to clear the value of the input. The problem is that I dont know how to invoke the clear function as well as the hiding the input again with the same button.
Here is my code:
<button class="btn-share" ng-click="showme = !showme" clickng-class="{true: 'hideBtn', false: 'btn btn-xs btn-danger'}[showme]">
show input.
</button>
<div class="form-group" ng-show="showme">
<input id="myInput2" class="typeahead" sf-typeahead type="text" datasets="userDataset" ng-model="searchUser" >
<button ng-click="showme=false" class="btn btn-xs">Cancel</button>
<button ng-click="send()" class="btn btn-success btn-xs btn-sent">Send</button>
</div>
$scope.showme = false;

Just update your code
<button class="btn-share" ng-click="showme = !showme" clickng-class="{true: 'hideBtn', false: 'btn btn-xs btn-danger'}[showme]">
with
<button class="btn-share" ng-click="searchUser='';showme = !showme" clickng-class="{true: 'hideBtn', false: 'btn btn-xs btn-danger'}[showme]">
I have added searchUser='' in ng-click. So, when user click on it, it will first update the searchUser to empty string in scope and then update showMe in scope.
If you do not want information after cancel, you can do the same thing with ng-click of cancel button.
Here is a plunker for you - http://plnkr.co/edit/X9wbGYsBoIXxR7QmE1zP?p=preview

If you add this line to your clear() function:
$scope.showme = false;
it will invoke the function and set the showme variable to false, thus hiding the div!
So your clear function could look like this:
$scope.clear = function() {
$scope.searchUser = "";
$scope.showme = false;
}

Timer for javascript button selection

The below code generates a json string on the click of some buttons.
<div id="btnStudios" >
<button type="button" id="01" value="warner" class="btn btn-default">Warner</button>
<button type="button" id="02" value="tf1" class="btn btn-default">TF1</button>
<button type="button" id="03" value="gaumont" class="btn btn-default">Gaumont</button>
<button type="button" id="04" value="pathe" class="btn btn-default">Pathe</button>
<button type="button" id="05" value="studiocanal" class="btn btn-default">StudioCanal</button>
<button type="button" id="06" value="francetv" class="btn btn-default">FranceTV</button>
<button type="button" id="07" value="m6snd" class="btn btn-default">M6SND</button>
</div>
var output = $(".btn").click(function() {
$(this).toggleClass('active');
var output = {
Studios: $('#btnStudios button.active').map(function() {
return $(this).val();
}).get(),
};
if (!output.Studios.length) {
output.Studios = $('#btnStudios button').map(function() {
return $(this).val();
}).get()
$('.list').html(JSON.stringify(output));
});
Basically what i am looking for is a timer which refreshes for 1 second everytime a button is clicked and then generates the json string based on the button selection.
I used the setInterval() function but that did not help.
How would i go about this?
Thanks in advance.

I didn't fully understand your question.
However, based on the code, I assume you want to show a JSON-string based on which buttons have the .active class?
Your code contained syntax errors.
I created a quick JSfiddle with what I think you wanted.
However, I have made no use of setTimeout since I couldn't come up with valid use case.
Feel free to provide us with more info and I'll improve my answer!
EDIT:
Okay, so you want to wait 1sec after the click.
I updated the JSfiddle.
EDIT²:
I'd also use clearTimeout so clicks that happened while you are already waiting 1 sec are ignored.
As seen in this JSfiddle.