I want to show "€" before the "participant" value with Jquery.
Html input
<div class="form-group">
<label>Participant</label>
<input type="text" name="participant" id="participant" class="form-control participant" value="{{ $distance_price }}" readonly>
</div>
I have tried using the before() function but that caused the NaN error in the other input value, because I use the $distance_price in a calculation.
Any help would be much appreciated!
You can add this as an input group addon & then use Jquery to change the symbol if required
https://getbootstrap.com/docs/4.0/components/input-group/
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="currency_symbol">£</span>
</div>
<input type="text" name="participant" id="participant" class="form-control participant" value="{{ $distance_price }}" readonly>
</div>
<script>
$('#currency_symbol').html('€')
</script>
You can try this with jquery
$('#participant').change(function () {
$('#participant').val('€' + $(this).val());
});
Also Try In Your Laravel Controller
$input = $request->all();
$input['participant'] = '€' . $input['participant'];
Just take a look at the documentation of bootstrap, maybe it gives you a direction.
https://getbootstrap.com/docs/4.3/components/input-group/
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">€</span>
</div>
<input type="text" name="participant" id="participant" class="form-control participant" value="{{ $distance_price }}" readonly>
</div>
Related
I´m traying to create form to create event.
i have one resourceRoute in my laravel 7. But when i send my form, return this message:
The POST method is not supported for this route
but how i said i have a resource route, and i call to method create.
My routes
Route::resource('calendario', 'CalendarioController');
My form:
div class="col-xs-12 p-5">
<form action="{{ Request::is('calendario/*/edit') ? route('calendario.update', $event->id) : route('calendario.create') }}" method="post">
#csrf
#if(Route::currentRouteName() == 'calendario.edit')
#method('PUT')
#endif
<div class="form-group">
<label for="nombre">Nombre</label>
<input type="text" class="form-control" name="nombre" id="nombre" value="{{ isset($event) ? $event->nombre : old('nombre') }}" aria-describedby="emailHelp" placeholder="Nombre del cliente">
</div>
<div class="form-group">
<label for="fecha-inicio">Fecha Inicio</label>
<input type="text" value="{{ isset($event) ? $event->fecha_inicio : old('fecha_inicio') }}" class="form-control" name="fecha_inicio" id="fecha-inicio">
</div>
<div class="form-group">
<label for="fecha-inicio">Fecha Fin</label>
<input type="text" value="{{ isset($event) ? $event->fecha_fin : old('fecha_fin') }}" class="form-control" name="fecha_fin" id="fecha-fin">
</div>
<input type="submit" class="btn btn-info" value="{{ Request::is('calendario/*/edit') ? 'Guardar' : 'Crear Cita' }}">
</form>
</div>
</div>
</div>
thsi form it´s used also for edit event and in edit i can ok... I don´t understand that i´m doing wrong
Thanks you for help
This is 100% an issue with the Route::resource('calendario', 'CalendarioController')
The update method accepts put as I can remember.
As you can see here: put/patch
So you can change your form method to method="put" or your have to define your routes like this: Route::post('path/{id}', 'CalendarioController#update')
I am using laravel, I want to dynamically add fields for product properties. The product is added via submit, so if an error occurs, all additional fields disappear. Also, when editing, I need to display them somehow. What is the best way to save them? Via localStorage or does Laravel/PHP have other methods?
P.S. Here the snippet gives an error for some reason. Possibly due to localStorage.
$(document).ready(function(){
if(localStorage.getItem("all")){
$('#newRow').append(localStorage.getItem("all"));
}
$("#addRow").click(function () {
var html = '';
html += '<div id="inputFormRow">';
html += '<div class="input-group mb-3">';
html += '<input type="text" name="properties[key]" class="form-control m-input" placeholder="Key" autocomplete="off">';
html += '<input type="text" name="properties[value]" class="form-control m-input ml-3" placeholder="Value" autocomplete="off">';
html += '<div class="input-group-append ml-3">';
html += '<button id="removeRow" type="button" class="btn btn-danger">Delete</button>';
html += '</div>';
html += '</div>';
$('#newRow').append(html);
var allfields = [];
allfields.push(html);
localStorage.setItem("all", allfields);
});
// remove row
$('#removeRow').on('click', function () {
$(this).closest('#inputFormRow').remove();
});
});
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group row">
<label for="category_id" class="col-sm-2 col-form-label">Product properties: </label>
<div class="row">
<div class="col-lg-12">
<div id="inputFormRow">
<div class="input-group mb-3">
<input type="text" name="properties[key]" class="form-control m-input" placeholder="Key" autocomplete="off">
<input type="text" name="properties[value]" class="form-control m-input ml-3" placeholder="Value" autocomplete="off">
<div class="input-group-append ml-3">
<button id="removeRow" type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
<div id="newRow"></div>
<button id="addRow" type="button" class="btn btn-info">Add</button>
</div>
</div>
</div>
It's possible, firstly, you have to use array of array, or it just make more sense.
Your input:
<input type="text" name="properties[][key]" class="form-control m-input" placeholder="Key" autocomplete="off">
<input type="text" name="properties[][value]" class="form-control m-input ml-3" placeholder="Value" autocomplete="off">
now you will have array, which contains arrays with two keys, "key" and "value".
So after submit in your controller you can simply store your $request->properties in session before validation!
$request->session()->flash('properties', $request->properties)
or just global helper
session()->flash('properties', $request->properties)
after flash() method data will be available only next request, after that, they will be automatically deleted
then if you have error, you can do in view something like that:
#if(session->has('properties'))
#foreach (session('properties') as $prop)
<input type="text" name="properties[][key]" value="{{$prop['key']}}" class="form-control m-input" placeholder="Key" autocomplete="off">
<input type="text" name="properties[][value]" value="{{$prop['value']}}" class="form-control m-input ml-3" placeholder="Value" autocomplete="off">
#endforech
#endif
I've created a function in my routes that take some data from a view and send to another view
Route::post('/trans', function(){
$j = Input::get('r');
return view('movs.create')->with($j);
});
this route take the data from this form
<form action="/trans" method="POST">
#csrf
<div class="input-group">
<input type="hidden" class="form-control" name="r" value={{$cooperado->id}}>
<button type="submit" class="btn btn-primary">
<span>+</span>
</button>
</span>
</div>
</form>
but cant set the data in this other form on 'movs.create'
<form method="post" action="{{ route('movs.store') }}">
<div class="form-group">
#csrf
<label for="name">ID COOP:</label>
<input type="number" class="form-control" name="id_coop" readonly/> <-- data must be setted here
</div>
<div class="form-group">
<label for="price">VALOR MOVIMENTACAO:</label>
<input type="number" step=0.01 class="form-control" name="valor"/>
</div>
<button type="submit" class="btn btn-primary">Add</button>
</form>
when i try to set the data in id_coop input, laravel says that the variable doesnt exists
To set data in the create form, you may need to add a value attribute to the id_coop input:
<input type="number" class="form-control" name="id_coop" value="{{ $j }} readonly/>
Also, ->with() needs to be a key (variable name) and value:
Route::post('/trans', function(){
$j = Input::get('r');
return view('movs.create')->with('id_coop', $j);
});
This would mean you use {{ $id_coop }} instead.
with works with key value pair
Route::post('/trans', function(){
$j = Input::get('r');
return view('movs.create')->with('j',$j);
// or return view('movs.create', compact('j')); // it will extract in
//blade as $j
// or return view('movs.create', ['j' => $j]);
});
// you can fetch that data in blade as {{$j}}
<input type="number" class="form-control" name="id_coop" value="{{$j ?? ''}}" readonly/>
Example of with,
return view('greeting')->with('name', 'Victoria'); // name as key and Victorial as value.
{{$j ?? ''}} if data is not set then '' value.
//controller
public function Postdata(Request $request){
$data['j'] = Input::get('r');
return view('movs.create',$data);
}
//route
Route::post('/trans','yourController#Postdata');
//your view
<form method="post" action="{{ url('/store') }}">
<div class="form-group">
#csrf
<label for="name">ID COOP:</label>
<input type="number" class="form-control" name="id_coop" value="{{ $j }}" readonly/> <-- data must be setted here
</div>
<div class="form-group">
<label for="price">VALOR MOVIMENTACAO:</label>
<input type="number" step=0.01 class="form-control" name="valor"/>
</div>
<button type="submit" class="btn btn-primary">Add</button>
</form>
//store route
Route::post('/store','yourController#Savedata');
hope this helps
I'm trying to update records in the mysql database with laravel through a bootstrap modal. Here's how I have collected data from the table of records,
<button class="site-button" data-toggle="modal" data-target=".edit-booking" data-bookingid="{{ $records->id }}" data-firstname="{{ $records->firstname }}" data-lastname="{{ $records->lastname }}" data-roomtype="{{ $records->roomtype }}" data-checkin="{{ $records->checkin }}" data-checkout="{{ $records->checkout }}" data-adults="{{ $records->adults }}" data-children="{{ $records->children }}" data-email="{{ $records->email }}" data-phone="{{ $records->phone }}" data-payment="{{ $records->payment }}" data-additionals="{{ $records->additionals }}" data-address="{{ $records->address }}"><span class="fa fa-edit"> Edit</span></button> / <button class="site-button"><span class="fa fa-trash"> Delete</span></button>
My modal for editing,
<div class="modal-content">
<div class="modal-header bg-secondry">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title text-black">Edit Booking</h4>
</div>
<div class="modal-body edit-modal-body">
<div class="section-content">
<!-- CONTACT FORM-->
<div class="wt-box">
<form class="contact-form" id="edit-form" action="{{route('booking.update',$records->id)}}" name="edit-form" method="post"> {{method_field('patch')}} {{csrf_field()}}
<div class="contact-one p-a40 p-r150">
<div class="form-group">
<input name="editbookingid" id="editbookingid" type="hidden" class="form-control" value="">
</div>
<div class="form-group">
<label for="edit_firstname">First Name</label>
<input name="edit_firstname" id="edit_firstname" type="text" required class="form-control">
</div>
<div class="form-group">
<label for="edit_lastname">Last Name</label>
<input name="edit_lastname" type="text" id="edit_lastname" required class="form-control">
</div>
<div class="form-group">
<label for="edit_email">Email</label>
<input name="edit_email" type="email" id="edit_email" class="form-control" required>
</div>
<div class="form-group">
<label for="edit_phone">Phone</label>
<input name="edit_phone" type="phone" id="edit_phone" class="form-control" required>
</div>
<div class="form-group">
<label for="edit_address">Address</label>
<textarea name="edit_address" id="edit_address" rows="3" class="form-control " required></textarea>
</div>
<div class="form-group">
<label for="edit_roomtype">Room type</label>
<input name="edit_roomtype" id="edit_roomtype" type="text" class="form-control" required>
</div>
<div class="two-columns-row">
<div class="form-group two-columns">
<label for="edit_adults">Adults</label>
<input type="text" name="edit_adults" id="edit_adults" class="form-control" required>
</div>
<div class="form-group two-columns">
<label for="edit_children">Children</label>
<input type="text" name="edit_children" id="edit_children" class="form-control" required>
</div>
</div>
<div class="two-columns-row">
<div class="form-group two-columns">
<label for="edit_checkin">Check-in Date</label>
<input type="date" name="edit_checkin" id="edit_checkin" class="form-control" required>
</div>
<div class="form-group two-columns">
<label for="edit_check-out">Check-out Date</label>
<input type="date" name="edit_checkout" id="edit_checkout" class="form-control" required>
</div>
</div>
<div class="form-group">
<label for="edit_payment">Payment Method</label>
<input name="edit_payment" type="text" id="edit_payment" required class="form-control">
</div>
<div class="form-group">
<label for="edit_additionals">Additional Notes</label>
<textarea name="edit_additionals" rows="3" id="edit_additionals" class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="site-button black radius-no text-uppercase" data-dismiss="modal">Close</button>
<button type="submit" class="site-button black radius-no text-uppercase" name="edit_submit">Save Changes</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Script used to fill the modal,
<script>
/* For filling data in the edit modal */
$('.edit-booking').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var recordid = button.data('bookingid')
var firstname = button.data('firstname')
var lastname = button.data('lastname')
var roomtype = button.data('roomtype')
var checkin = button.data('checkin')
var checkout = button.data('checkout')
var adults = button.data('adults')
var children = button.data('children')
var email = button.data('email')
var phone = button.data('phone')
var payment = button.data('payment')
var additionals = button.data('additionals')
var address = button.data('address')
var modal = $(this)
modal.find('.edit-modal-body #editbookingid').val(recordid);
modal.find('.edit-modal-body #edit_firstname').val(firstname);
modal.find('.edit-modal-body #edit_lastname').val(lastname);
modal.find('.edit-modal-body #edit_roomtype').val(roomtype);
modal.find('.edit-modal-body #edit_checkin').val(checkin);
modal.find('.edit-modal-body #edit_checkout').val(checkout);
modal.find('.edit-modal-body #edit_adults').val(adults);
modal.find('.edit-modal-body #edit_children').val(children);
modal.find('.edit-modal-body #edit_email').val(email);
modal.find('.edit-modal-body #edit_phone').val(phone);
modal.find('.edit-modal-body #edit_payment').val(payment);
modal.find('.edit-modal-body #edit_additionals').val(additionals);
modal.find('.edit-modal-body #edit_address').val(address);
})
</script>
This is my update() in the controller,
public function update(Request $request, $id)
{
$an_update = Bookings::findOrFail($id);
$an_update->update($request->all());
return back();
}
and this is the model,
class Bookings extends Model
{
protected $fillable = ['firstname', 'lastname', 'email', 'phone', 'address', 'adults', 'children', 'checkin', 'checkout', 'additionals', 'roomtype', 'payment'];
}
After filling all the changes in the form, if I click "save changes", the page reloads but the record is not updated at all.
$id is assigned from a route parameter, but your route is being defined in your form action prior to the modal being opened. You don't appear to be updating the booking ID of the route anywhere when you open the modal.
This means you're always updating the booking with an ID of $records->id, whatever that value is.
Looks to me the way you are assigning the values from the request is what is wonky. I haven't tested this personally yet, in a bit of a rush. Will come back and update this answer in a few hours. In the mean time, give this a try.
$an_update = Bookings::findOrFail($id);
$an_update->firstName = $request->input('customer_license_plate');
$ticket->save();
return back();
Do that for all your records fields, remember that back() will redirect the user back to the page they came from regardless of a success or fail. You may wish to consider additional logic to redirect to another page upon success (like a listing screen for example).
Reference: https://laravel.com/docs/5.5/eloquent#updates
So, I have my SPA at about 98% functional. The app pulls data from a MySQL database and allows the user to edit/delete records. For the page in question, it will edit/delete data of the specified student ID but it will not properly display the data in the text fields.
If you do not input a value it will display the first item in the JSON array but not the one you specify in the search field.
I did not do a very good job at explaining that but here is the HTML page that uses a function to pass data to the controller which then selects the corresponding student by ID and assigns it to the variable $scope.student. I then try to display the student data on the HTML page by using student.first_name (or any property) but it does not work correctly.
<h3>Edit/Delete Student with ID: {{student.student_id}}</h3>
<div class="form-group">
<label for="sid">Student ID:</label>
<input type="text" class="form-control" id="sid" ng-model="sid">
</div>
<p><button type="button" class="btn btn-primary" ng-click="getRecord(sid)">
Get Student Info </button> </p>
<div class='row'>
<div class="col-md-6">
<div class="form-group">
<label for="first_name">First Name:</label>
<input type="text" class="form-control" id="first_name" ng-model="student.first_name">
</div>
<div class="form-group">
<label for="last_name">Last Name:</label>
<input type="text" class="form-control" id="last_name" ng-model="student.last_name">
</div>
<div class="form-group">
<label for="hrs_completed">Hrs Completed:</label>
<input type="text" class="form-control" id="hrs_completed" ng-model= "student.hrs_completed">
</div>
<div class="form-group">
<label for="hrs_attempted">Hrs Attempted:</label>
<input type="text" class="form-control" id="hrs_attempted" ng-model= "student.hrs_attempted">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="gpa_points">GPA Points:</label>
<input type="text" class="form-control" id="gpa_points" ng-model= "student.gpa_points">
</div>
<div class="form-group">
<label for="major">Major:</label>
<input type="text" class="form-control" id="major" ng-model="student.major">
</div>
<div class="form-group">
<label for="advisor_id">Advisor ID:</label>
<input type="text" class="form-control" id="advisor_id" ng-model="student.advisor_id">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="text" class="form-control" id="email" ng-model="student.email">
</div>
</div>
<button type="button" class="btn btn-primary" ng-click="updateRecord()">Update</button>
<button type="button" class="btn btn-primary" ng-click="deleteRecord()">Delete</button>
And here is my controller on my Javascript page:
app.controller('editCtrl', function($scope, $http) {
$http.get("getStudentData.php")
.then(function (response) {
$scope.students = response.data;
});
$scope.getRecord = function(sid) {
id = sid;
$scope.student = $scope.students.find(s=>s.id == sid);
};
Do I need to make a seperate GET request to the server for this to work properly or do I just need to reference the student object differently?
I think there is mismatch in what you are getting as response.data and what you are trying to .find() and then what you are binding on html.
Check this plunkr.
You are trying to render by searching id property.
$scope.students.find(s=>s.id == sid);
where as you are rendering on UI using student_id property.
{{student.student_id}}
So, surely there is mismatch in what you are getting as response.data and what you are rendering using $scope.student properties. I think my plunkr will show that your function is correct.
In case this answer doesn't work, share your response.data.