Pass Data from input form to ajax in Laravel - php

I Have a List of projects and three type of payments for any project I Want to give all type of payments and send payment id to ajax But I give just id=1 for all request my Code is here:
#foreach($project->payments as $payment)
#if($payment->type==1)
#if(empty($payment->code))
<input type="hidden"id="payment_id"value="{{$payment->id}}">
<input type="text" class="form-control" id="paymentCode" name="paymentC">
{{csrf_field()}}
<button id="AddCode" type=submit class="btn btn-info generate-label AddCode">enter</button>
#else
{{$payment->code}}
#endif
#elseif($payment->type==2)
#if(empty($payment->code))
<input type="hidden" id="payment_id" value="{{$payment->id}}">
<input type="text" class="form-control" name="paymentC" id="paymentCode">
{{csrf_field()}}
<button id="AddCode" type="submit" class="btn btn-info generate-label AddCode">enter</button>
#else
{{$payment->code}}
#endif
#endif
#endforeach
Javascript Code:
$('.AddCode').click (function (event) {
var payment_id = $('#payment_id').val();
var paymentCode = $('#paymentCode').val();
console.log(payment_id);
});
How I Can fix my problem that When click in button of payment print this id?

You're not targetting an unique id with var payment_id = $('#payment_id').val();
Change this line of html
<button id="AddCode" type="submit" class="btn btn-info generate-label AddCode">enter</button>
Into
<button value="{{$payment->id}}" type="submit" class="btn btn-info generate-label AddCode">enter</button>
JQuery
$('.AddCode').on("click", function(event){
var payment_id = $(this).val(); // payment id
});

Try this
#foreach($project->payments as $payment)
#if($payment->type==1)
#if(empty($payment->code))
<div>
<input type="hidden" id="payment_id" value="{{$payment->id}}">
<input type="text" class="form-control" id="paymentCode" name="paymentC">
{{csrf_field()}}
<button id="AddCode" class="btn btn-info generate-label AddCode">enter</button>
</div>
#else
{{$payment->code}}
#endif
#elseif($payment->type==2)
#if(empty($payment->code))
<div>
<input type="hidden" id="payment_id" value="{{$payment->id}}">
<input type="text" class="form-control" name="paymentC" id="paymentCode">
{{csrf_field()}}
<button id="AddCode" class="btn btn-info generate-label AddCode">enter</button>
</div>
#else
{{$payment->code}}
#endif
#endif
#endforeach
Javascript Code:
$('.AddCode').click (function (event) {
var payment_id = $(this).closest('div').find("#payment_id").val();
var paymentCode = $(this).closest('div').find("#paymentCode").val();
console.log(payment_id);
});

ID should be unique for individual HTML entity.
Code Update:
{{csrf_field()}}
#foreach($project->payments as $payment)
#if($payment->type==1)
#if(empty($payment->code))
<input type="hidden"id="payment-id-1"value="{{$payment->id}}">
<input type="text" class="form-control" id="payment-code-1" name="payment_code">
<button type=submit class="btn btn-info generate-label add-code" data-payment=1>enter</button>
#else
{{$payment->code}}
#endif
#elseif($payment->type==2)
#if(empty($payment->code))
<input type="hidden" id="payment_id_2" value="{{$payment->id}}">
<input type="text" class="form-control" name="payment_code" id="paymentCode">
<button type="submit" class="btn btn-info generate-label add-code" data-payment=1>enter</button>
#else
{{$payment->code}}
#endif
#endif
#endforeach
Javascript Code:
$('.add-code').on("click", function(event){
var payment_type = $(this).data("payment");
var payment_id = $('#payment-id-'+payment_type).val();
var paymentCode = $('#payment-code-'+payment_type).val();
});
Try this out. Not tested.

Related

The DELETE & PUT method is not supported for this route. Supported methods: GET, HEAD,POST

I need your help guys on this, my app can't delete neither can it Update. it keeps on popping these errors on my edit and Delete Buttons;
(1/1) MethodNotAllowedHttpException
The DELETE method is not supported for this route. Supported methods: GET, HEAD.
(1/1) MethodNotAllowedHttpException
The PUT method is not supported for this route. Supported methods: GET, HEAD.
this is my route
Route::group(['middleware' => ['role:Admin']], function () {
Route::resource('/device', 'DeviceController');
});
this is my edit blade
<form action="/device" method="POST" id="editForm">
{{csrf_field()}}
{{ method_field('PUT') }}
<div class="col-md-4 mb-3">
<label>Serial Number</label>
<input type="text" name="Serial_No" id="" class="form-control" placeholder="Enter Serial number">
</div>
<button class="btn btn-primary" type="submit">Add Data</button>
<button type="reset" class="btn btn-default float-right">Cancel</button>
<button type="reset" class="btn btn-default float-middle">Clear</button>
</form>
This is my delete blade
<form action="/device" method="POST" id="deleteForm">
{{csrf_field()}}
{{method_field('DELETE')}}
<div class="form-row">
<input type="hidden" name="_method" value="DELETE" >
<P>Are You Sure!.. You want to delete this Device?</P>
</div>
<button class="btn btn-primary " type="submit" >YES! DELETE DEVICE</button>
<button type="button" class="btn btn-secondary float-right" data-dismiss="modal" >CANCEL</button>
</form>
This is my controller for delete
public function destroy($id)
{
$devices = Device::find($id);
$devices -> delete();
return Redirect::back() -> with('success','Data Deleted Successfully');
}
This is my script that deletes
<script>
//Start Delete Record
table.on('click', '.delete', function () {
$tr = $(this).closest('tr');
if ($($tr).hasClass('child')) {
$tr = $tr.prev('.parent');
}
var data = table.row($tr).data();
console.log(data);
$('#deleteForm').attr('action', '/laptops/'+data[0]);
$('#deleteModal').modal('show');
});
//End Delete Record
});
</script>
You are not passing the correct actions
your update form should look like this instead
<form action="" method="POST" id="editForm">
{{csrf_field()}}
{{ method_field('PUT') }}
<div class="col-md-4 mb-3">
<label>Serial Number</label>
<input type="text" name="Serial_No" id="" class="form-control" placeholder="Enter Serial number">
</div>
<button class="btn btn-primary" type="submit">Add Data</button>
<button type="reset" class="btn btn-default float-right">Cancel</button>
<button type="reset" class="btn btn-default float-middle">Clear</button>
</form>
your delete form should look like this instead.
<form action="" method="POST" id="deleteForm">
{{csrf_field()}}
{{method_field('DELETE')}}
<div class="form-row">
<p>Are You Sure!.. You want to delete this Device?</p>
</div>
<button class="btn btn-primary " type="submit">YES! DELETE DEVICE</button>
<button type="button" class="btn btn-secondary float-right" data-dismiss="modal">
CANCEL
</button>
</form>
your script should look like this (change 'laptops/' to 'device/')
table.on('click', '.delete', function () {
$tr = $(this).closest('tr');
if ($($tr).hasClass('child')) {
$tr = $tr.prev('.parent');
}
var data = table.row($tr).data();
console.log(data);
$('#deleteForm').attr('action', '/device/'+data[0]);
$('#deleteModal').modal('show');
});
Also as an opinion you could pluralize your resource route instead of the singular approach. i.e /devices instead of /device
so in your web.php routes file you have:
Route::group(['middleware' => ['role:Admin']], function () {
Route::resource('/devices', 'DeviceController');
});
That way you have a more friendly route list like:
GET - /devices
GET - /devices/create
POST - /devices/update
GET - /devices/{device}
GET - /devices/{device}/edit
PUT/PATCH - /devices/{device}
DELETE - /devices/{device}
All these can be viewed in your cli using php artisan route:list

Laravel: getting another id from form after submitting// rating functionality for rentals

Route
Route::post('/review/{pId}','RentalController#review');
Controller:
public function review(Request $request,$propId){
$review = new Reviews();
$rpId = rand();
$review->rvid=$rpId;
$review->usid_fk = Auth::user()->uid;
$review->prId_fk = Property::find($propId);
$review->comment = $request->input('comment');
$review->rating = $request->input('rating');
$review->date = Carbon::now();
$review->save();
}
PHP
<form action="/review/{{ $prop->pid}}" method="POST">
{{csrf_field()}}
<div class="modal-body">
<input type="hidden" name="propid" value="{{ $prop->pid }}"/>
<input id="rating" name="rating" class="rating rating-loading" data-show-clear="false" data-min="0" data-max="5" data-step="1" value="0">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Comment</span>
</div>
<textarea name="comment" class="form-control" aria-label="Comment">
</textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
I am getting "page not found", so I don't know whether should I use "put" or "post" method in route as well as in form .
Your replies would be highly appreciated.
I think the problem is from the action in your form.
change your form to
<form action="{{route('review.post',['id'=>$prop->pid])}}" method="POST">
</form>
and change your route to
Route::post('review/{pId}','RentalController#review')->name('review.post');
Inspect the form from browser and make sure csrf token and action url are well formed.

SQLSTATE[23502]: Not null violation: 7 ERROR when update comment in laravel

I want update a comment in Laravel.
<div class="edit-input" id="edit{{$comment->id}}">
<input type="text" name="edit_comment" class="form-control">
<div class="input-group-append">
OK
<button class="btn btn-danger" id="editCancel" type="button">Cancel</button>
</div>
</div>
This my route:
Route::get('review-edit/{id}', 'CommentController#editComment')->name('review-edit');
And CommentController:
public function editComment(Request $request, $id)
{
$updateComment = Comment::findOrFail($id);
$updateComment->user_id = Auth::id();
$updateComment->comment = $request->edit_comment;
$updateComment->save();
return back();
}
When I try update comment, I'm getting an error telling me
SQLSTATE[23502]: Not null violation: 7
dd($request->edit_comment) gives null also. What am I overlooking here?
Try this
you edit_comment should be inside form then only you can send data to controller
<form action="{{ route('review-edit', [ 'id' => $comment->id]) }}" method="get">
<div class="edit-input" id="edit{{$comment->id}}">
<input type="text" name="edit_comment" class="form-control">
<div class="input-group-append">
<button class="btn btn-info" type="submit">OK</button>
<button class="btn btn-danger" id="editCancel" type="button">Cancel</button>
</div>
</div>
</form>
try this and dd($request->edit_comment);
<form action="{{ route('review-edit', [ 'id' => $comment->id]) }}" method="get">
<div class="edit-input" id="edit{{$comment->id}}">
<input type="text" name="edit_comment" class="form-control">
<div class="input-group-append">
<button class="btn btn-info" type="submit">OK</button>
<button class="btn btn-danger" id="editCancel" type="button">Cancel</button>
</div>
</div>
</form>

Laravel user edit

I have user details from DB and print using blade loop with button for edit. now I want, if I click button I need user details for the button which is clicked for user.
i tried with hidden input filed <input type="hidden" value="{{$user->email}}" name="email">
in my controller I just print the value from form submit. but I am getting only last user.
See below, I hope you will understand..
<div class="content-wrapper">
<div class="flex-center position-ref full-height">
<form action="{!!url('/delete')!!}" method="post"> {!!csrf_field()!!}
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Role</th>
</tr>
</thead>
<tbody>
#foreach($users as $user)
<tr>
<td>{{$user->id}}</td>
<td>{{$user->name}}</td>
<td>{{$user->email}}</td> <input type="hidden" value="{{$user->email}}" name="email">
<td>{{$user->role}}</td>
<td>
<div class="btn-group">
<button type="submit" class="btn btn-primary btn-sm" name="edit" >Edit</button>
<button type="submit" class="btn btn-primary btn-sm" name="delete" >Delete</button>
<button type="submit" class="btn btn-primary btn-sm" name="make" >Make Admin</button>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</form>
</div>
</div>
Assuming that you want to go to edit page with a user's details when you click edit button.
Edit
I think that's because you are using same name "email" for all user's hidden field. It is getting overridden, since form is same .
Instead, add the form tag inside your loop and remove the one before table.
#foreach($users as $user)
<form action="{!!url('/delete')!!}" method="post"> {!!csrf_field()!!}
<tr>
<td>{{$user->id}}</td>
<td>{{$user->name}}</td>
<td>{{$user->email}}</td> <input type="hidden" value="{{$user->email}}" name="email">
<td>{{$user->role}}</td>
<td>
<div class="btn-group">
<button type="submit" class="btn btn-primary btn-sm" name="edit" >Edit</button>
<button type="submit" class="btn btn-primary btn-sm" name="delete" >Delete</button>
<button type="submit" class="btn btn-primary btn-sm" name="make" >Make Admin</button>
</div>
</td>
</tr>
</form>
#endforeach
Or, you can put a single hidden email field outside your loop and assign it's value using JS before submitting.
Step 1: Add data attribute (data-email) to your buttons to get email. Also add a common class name to capture click event. (See JS part)
<button type="button" class="test-btn btn btn-primary btn-sm" name="edit" data-email="{{$user->email}}" >Edit</button>
<button type="button" class="test-btn btn btn-primary btn-sm" name="delete" data-email="{{$user->email}}" >Delete</button>
<button type="button" class="test-btn btn btn-primary btn-sm" name="make" data-email="{{$user->email}}" >Make Admin</button>
Step 2: Move email hidden field outside the loop with value as blank.
<form action="{!!url('/delete')!!}" method="post" id="test-form"> {!!csrf_field()!!}
<input type="hidden" value="" name="email" id="email">
Step 3: Add JS to capture click event on the buttons and assign the value of the clicked button's email to the email text field.
$(".test-btn ").on("click",function(e){
//assign the email value from button to variable
email = $(this).attr(data-email);
//assign the email value to email hidden field
$("#email").value(email);
//submit the form
$("#test-form").submit();
});

Laravel foreach loop not outputting to form

Here is a form from my Laravel 5 project:
<form class="form-group" action="/counselors/{{ $counselor->id }}/badges/add" method="post">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
#foreach($badges as $badge)
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" style="float: left" value="{{ $badge->id }}"> {{ $badge->name }}
</span>
</div>
#endforeach
<br>
<input type="submit" class="form-control btn btn-primary" name="submit" value="Submit"><hr>
<input type="button" class="form-control btn btn-danger" name="cancel" value="Cancel" onClick="location='/counselors'">
</form>
The $badges is a collection of badges from a database. They all iterate and display properly, but when i look at the request data with
$request->all()
it returns:
{"_token":"5E4csIJU4YVVQZSoPG1EmpfHfjNjYcRwuOoreCcE","submit":"Submit"}
It doesn't include the checkbox data from the loop. Is this incorrect? What's the best way to do this? There are 160 items in the $badges collection.
I'm pretty new so please go easy.
put name attribute to the input checkbox and giv it a value
<input type="checkbox" name="check-{{ $badge->id }}" style="float: left" value="{{ $badge->id }}"> {{ $badge->name }}
Note :
here i use the name "check-" and the id of the badge to get defferent name for each checkbox

Categories