i have form in my delete modal, and i want to pass hidden input to url method delete/destroy
this is my delete modal :
<form action="{{url('/pages').'/' ... }}" method="POST" enctype="multipart/form-data">
{{ method_field('DELETE') }}
{{csrf_field()}}
<div class="form-group">
<label for="">Are you sure to delete this Page ?</label>
<input type="text" class="form-control" id="page_id" style="display: none;">
</div>
<button type="submit" class="btn btn-danger" id="save">Delete</button>
<button type="button" class="btn btn-link" data-dismiss="modal">{{__('Close')}}</button>
</form>
how to append input value(page_id) to form action ?
so i can use that page_id in form action :
<form action="{{url('/pages').'/'page_id}}" method="POST" enctype="multipart/form-data">
can some one help me ? thanks before :)
You have to add a new attribute on each delete button contains the id.
please check the following code
$('.delete-button').click(function(){
var pageId = $(this).data('page-id');
$('.page_id').html(pageId);
$('#modal-form').attr('action', deleteUrl+pageId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
page 1
page 2
page 3
<form action="#" id="modal-form" method="POST" enctype="multipart/form-data">
<label for="">Are you sure to delete this Page <span class="page_id"></span>?</label>
</form>
<script>
/* window.deleteUrl = "{{url('/pages').'/'}}"; // save globally */
window.deleteUrl = "http://test.com/"; // temporary
</script>
If you are using boostrap modal then you have to pass data from that button something like this,
<button id="submit-btn" data-action="{{route('test')}}">Submit</button>
In JS,
replace modal's action with data-action.
Something like this,
$('#form-id').val($('#submit-btn').data('action))
And if you are not using modal then just store that id in variable and pass in route directly.
Hope it helps :)
Related
I have an article , and I put edit , delete buttons but If I create another user I can delete the article.
this is my code :
#auth
<div class="card-body">
<div class="align-items-center">
{{__("Edit")}}
<form method="post" action="{{route('articles.destroy', $article)}}" style="display: inline-block">
#method('DELETE')
#csrf
<button onclick="return confirm('{{__("Are you sure you want to delete this article ?")}}')" class="btn btn-danger">{{__("Delete")}}</button>
</form>
</div>
#endauth
I would suggest using the article user id. If you don't track this, add a field to the Article model, user_id, which would show who wrote the article. Then, you can easily create an if-check to make sure only the writer can delete or edit his own article.
On your blade page then:
#if($article->user_id === \Auth::user()->id)
<div class="align-items-center">
{{__("Edit")}}
<form method="post" action="{{route('articles.destroy', $article)}}" style="display: inline-block">
#method('DELETE')
#csrf
<button onclick="return confirm('{{__("Are you sure you want to delete this article ?")}}')" class="btn btn-danger">{{__("Delete")}}</button>
</form>
</div>
#endif
And add a similar verification in your controller's destroy() method:
if($article->user_id === \Auth::user()->id)
// Do the delete
else
// return no-auth
Don't forget to add the current user to the $article when you save it (in the store() method of the controller):
$article->user_id = \Auth::user()->id
$article->save();
HTH
i make form that i want to link in with controller called companies controller but i add form code inside the list it show the whole code ink the web page
<li>
<a href="#" onclick="
var result = confirm('are you sure you want to delete this project?');
if(result){
event.preventDefault();
document.getElementById('delete-form').submit();
}
">
Delete
</a>
<form id="delete-form" action="{{ route('companies.destroy',[$company->id]) }}" method="post" style="display:none;">
<input type="hidden" name="_method" value="delete">
{{ csrf_field() }}
</form>
</li>
in the web page only the delete should visible in the section not other part of the code
first of all, separate your code of javascript from html so that it be understandable and also easy to debug. try this:
<li>
Delete
<form id="delete-form" action="{{ route('companies.destroy',[$company->id]) }}" method="post" style="display:none;">
<input type="hidden" name="_method" value="delete">
{{ csrf_field() }}
</form>
</li>
<script type="text/javascript">
function delete()
{
var result = confirm('are you sure you want to delete this project?');
if(result){
event.preventDefault();
document.getElementById('delete-form').submit();
}
}
</script>
Found some typos which I corrected, maybe that was the issue. Also, you could very well send an ajax instead of submitting a hidden form, just an idea.
Below is my code which I have written to delete data from MySql using laravel but I am facing a problem while deleting; which is it always delete the top most row; regardless of which row I clicked.
Edit
<a href="#" onclick="
var result = confirm('Are you Sure, You want to delete this Company?');
if(result){
document.getElementById('delete-form').submit();
}
">
Delete
<form id="delete-form" action="{{ route('posts.destroy',[$post->id]) }}" method="post" style="display:none;" >
<input type="hidden" name="_method" value="delete" >
{{csrf_field()}}
</form>
Here is my controller file:
public function destroy(Post $post)
{
dd($post->id); same id comes here always rregardless of which row I might click...
$findpost = Post::find($post->id);
if($findpost->delete()){
return redirect('/posts')->with('success','Post Removed Successfully') ;
}
return back()->withinput()->with('error',"Company Post be deleted");
}
It's because of you define same ID for all your fomrs.
You can define unique form id by adding POST ID at the end of it.
So, your code would be:
Edit
<a href="#" onclick="
var result = confirm('Are you Sure, You want to delete this Company?');
if(result){
document.getElementById('delete-form{{$post->id}}').submit();
}
">
Delete
<form id="delete-form{{$post->id}}" action="{{ route('posts.destroy',[$post->id]) }}" method="post" style="display:none;" >
<input type="hidden" name="_method" value="delete" >
{{csrf_field()}}
</form>
The problem you are facing is because you are referencing to the same form every single time. ID in HTML is unique for an element, and it will always reference to one element randomly in your case always the first element with that ID on the page.
A better approach would be to have the url for each element in the anchor tag:
<a href="{{ route('posts.destroy',[$post->id]) }}" onclick="
var result = confirm('Are you Sure, You want to delete this Company?');
if(result){
document.getElementById('delete-form').setAttribute("action", this.href).submit();
}
return false; // to prevent submitting the form on click before the alert is displayed
">
and have one <form> element in your view:
<form id="delete-form" action="" method="post" style="display:none;" >
<input type="hidden" name="_method" value="delete" >
{{csrf_field()}}
</form>
I'm trying to update inputs using html form in laravel:
<form action="{!! route('users.update',['id' => $users->id]) !!}" method="post">
<div class="form-group row">
<label for="colFormLabelLg" class="col-sm-3 col-form-label col-form-label-lg">customer_name</label>
<div class="col-sm-10">
<input value="{{$name}}" class="form-control form-control-lg" placeholder="col-form-label-lg">
</div>
<button type="submit" class="btn btn-primary btn-lg" > Edit</button>
</form>
Everything in the controller work perfectly however in the view page I received this error:
Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException
No message
What am I doing wrong?
Please correct your route as POST like:
Route::post('update/{id}', 'YourController#update')->name('users.update');
You need to spoof the method as you are using to post the data. Since HTML forms can't make PUT, PATCH, or DELETE requests, you will need to add a hidden _method field to spoof these HTTP verbs. The #method Blade directive can create this field for you like this:
<form action="/foo/bar" method="POST">
#method('PUT') //add this to your form
</form>
or
<form action="/foo/bar" method="POST">
{{ method_field('patch')}} //add this to your form
</form>
You need to put #csrf and #method('PATCH') inside your form view.
I have the same problem and I had it worked after adding some lines in my code:
Just use $users->id instead of doing it as array ['id' => $users->id]
Use csrf and spoof the method by adding #method('PUT')
Your code should look like this:
<form action="{!! route('users.update', $users->id) !!}" method="post">
#csrf
<!--Some fields-->
#method('PUT')
</form>
im experiencing a weird issue. I have this form basically it just sends data to another cfm file that processes the inputs and updates a database. Today ive added an input type="file" so to process EXIF data from it and extract GPS info. The result page will copy a div to the specified target div. All works fine, data gets extracted and updated, but the div with the response does not appear anymore. As soon as i remove the input="file" div target div gets updated. Seems a response header issue, but i have no idea how to fix it. Thanks.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
$(document).ready(function() {
// bind form using ajaxForm
$('#sede-form').ajaxForm({
// target identifies the element(s) to update with the server response
target: '#htmlExampleTarget',
// success identifies the function to invoke when the server response
// has been received; here we apply a fade-in effect to the new content
success: function() {
$('#htmlExampleTarget').fadeIn('slow');
}
});
});
</script>
<cfoutput query="dett_cli">
<form id="sede-form" enctype="multipart/form-data" action="modifica_sede_response.cfm" method="post" class="form-inline">
<input type="hidden" name="codice" value="#url.codice#" />
<input type="hidden" name="id_sede" value="#url.id_sede#" />
... [other fields]...
<input type="hidden" name="sed_coordinate_o" value="#sed_coordinate#" class="input-large">
<div class="control-group">
<label class="control-label" for="sed_coordinate">JPG Coordinate GPS </label>
<div class="controls">
<div class="input-prepend">
<input type="file" name="sed_coordinate" id="sed_coordinate" class="input-large">
</div>
</div>
</div>
... [other fields]...
<!-- END div.row-fluid -->
<div class="form-actions">
<button type="reset" class="btn btn-danger"><i class="icon-repeat"></i> Resetta</button>
<button type="submit" class="btn btn-success"><i class="icon-ok"></i> Aggiorna</button>
<div id="htmlExampleTarget"></div>
</div>
</form>
</cfoutput>
Try putting the following back into your ajaxForm options.
iframe:true,
forceSync:true,