I have form where I don't have submit button and actually the form didn't send post request, so my question how is possible to send request on image click?
#foreach($items as $item)
<form class="form-horizontal" role="form" method="post" action="{{ route('index', $item->id) }}">
{{ csrf_field() }}
<div class="col-md-3">
<div class="well">
<a><img class="img-responsive center-block" src="{{ $item->imagePath }}" alt=""></a>
<h4 class="text-center">{{ $item->item_name }}</h4>
</div>
</div>
</form>
#endforeach
Thank you
You can do it with jQuery. It's easy if you set id of the form:
$('form#form_id a').click(function(e){
$('form#form_id').submit();
e.preventDefault();
return false;
});
But in your case you don't have any point in submitting post request, but anyway the above should work.
Assuming that "Don't use a submit button" is not a hard requirement and you are just assuming that it is because you want to use an image:
Use a submit button instead of a link.
<button><img class="img-responsive center-block" src="{{ $item->imagePath }}" alt=""></button>
You can style the default background and borders of the button away with CSS.
You really should have some content in the alt attribute. The image can't be a meaningless decorative image if it informs the user that clicking it will do something.
give id to your form in this way
<form action="" id="frm-id" method="post" class="form-horizontal ">
next you js method will be as
$("#frm-id").submit(function(){
var form_data = $("#frm-id").serialize();
$.ajax({
url: '/index/'+id,
type: "POST",
});
});
At url above you need to your route to go in controller method as i wrote....
Related
kindly help me, i am using class based views now am about to create new post using Createview i added all the fields including an image which stands for the thumbnail so if i go to http://127.0.0.1:8000/pages/blog/new/ i get a form and if i fill in the fields and submit i get return back to the form saying the image fields is required meanwhile i already inserted an image , this is the error in picture
and this is my code below
views.py
class BlogCreateView(LoginRequiredMixin, CreateView):
model = Blog
fields = ['title', 'categories', 'overview', 'thumbnail', 'summary']
blog_form.html
<div class="content-section text-center">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group ">
<legend class="border-bottom mb-4 h2">Blog Post</legend>
{{ form|crispy }}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Post</button>
</div>
</form>
</div>
You need to add "enctype="multipart/form-data" to your form, so:
<form method="post" enctype="multipart/form-data">
See detailed explanation is this elaborate answer:
What does enctype='multipart/form-data' mean?
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 :)
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.
Router:
Route::post('/submit/{id}', function() {
return 'Hello World';
});
HTML:
<form method="POST" action="/submit/{{$id}}">
The above changes the URL to http://127.0.0.1:8000/submit/$id and returns
Page has Expired Due to Inactivity.
It looks like Laravel is trying to force the POST into a GET.
This problem is because you forget to put the CSRF token field into the form.
Try with:
Option 1
<form method="POST" action="{{url('submit', [$id])}}">
{{ csrf_field() }}
<button type="submit">Submit</button>
</form>
Option 2
<form method="POST" action="{{url('submit')}}/{{$id}}">
#csrf
<button type="submit">Submit</button>
</form>
For more info see this link
I'm trying to pass some data to my controller with an action href. I don't know why, but laravel passes the data with GET method, but instead of GET I need a POST. I don't really understand why laravel does that and coulnd't find an answer. I did that multiple times and my syntax seems to be correct. Can somebody have a look over it?
Blade:
<td>
#foreach($products as $product)
<a href="{{ action('ProductsController#delete', $product->id ) }}">
<span class="glyphicon glyphicon-trash"></span></a>
{{ $product->name }},
#endforeach
</td>
My Route:
Route::post('delete', ['as' => 'delete', 'uses' => 'ProductController#delete']);
In my Controller is just a:
public function delete()
{
return 'hello'; // just testing if it works
}
Error:
MethodNotAllowedHttpException in RouteCollection.php line 219....
I know it's a get method, cause if I'm trying to pass the data to my controller, my URL looks like this:
blabla.../products/delete?10
Is anything wrong with my syntax? I can't really see why it uses the get method.
I also tried a: data-method="post" insite of my <a> tag but this haven't worked either.
Thanks for taking time.
When you make a link with an anchor like <a href=example.com> your method will always be GET. This is like opening a URL in your browser, you make a GET request.
You should use a form to make that POST request to the delete method of the controller. Assuming you have the Illuminate HTML package for HTML and forms, you could do this:
{!! Form::open(['method' => 'DELETE', 'route' => $route]) !!}
{!! Form::submit('delete', ['onclick' => 'return confirm("Are you sure?");']) !!}
{!! Form::close() !!}
EDIT:
With a button tag:
{!! Form::open(['method' => 'DELETE', 'route' => $route]) !!}
<button type="submit"><i class="glyphicon glyphicon-remove"></i>Delete</button>
{!! Form::close() !!}
Here's your problem:
<a href="{{ action('ProductsController#delete', $product->id ) }}">
Anchor tags are always submitted over GET. It's a HTTP built in and is not Laravel specific.
POST is used when a form is submitted that specifies the POST HTTP Verb or the HTTP method is invoked by an AJAX request that specifies POST as the HTTP Verb.
Instead consider a submit type button in a form that submits what you need.
<td>
#foreach($products as $product)
<form method="POST" action="{{ route('delete') }}">
<input type="hidden" name="product_id" value="{{ $product->id }}">
{!! csrf_field() !!}
<button type="submit" class="btn">
<span class="glyphicon glyphicon-trash"></span>
</button>
</form>
{{ $product->name }},
#endforeach
</td>
And then in your controller:
public function delete()
{
// 'Die Dump' all of the input from the form / request
dd( request()->input()->all() );
// 'Die Dump' the specific input from the form
dd( request()->input('product_id') );
}
You will begin to see how GET and POST requests differ in sending of key/value pairs.
For more information:
http://www.tutorialspoint.com/http/http_methods.htm
Best for laravel 7. First define the form with given form id.
#auth
<form id="logout-form" action="{{ route('logout') }}" method="POST"
style="display: none;">
#csrf
</form>
#endauth
Then you can use the anchor tag for logout operation.In background,javascript working.Wherever the logout was fire then action to given form method of post method and logout route was working.
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark"
href="{{ route('logout') }}" onclick="event.preventDefault();document.getElementById('logout-form').submit();"
id="2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-logout"></i>
</a>
Most benefit is the form was not loaded unnecesory.If the user was
logged in so far its load otherwise not
Laravel 7
By jQuery:
<form id="form" action="{{route('route_name')}}" method="POST">#csrf</form>
By JS:
<form id="form" action="{{route('route_name')}}" method="POST">#csrf</form>