I'm trying to add a trash icon to submit button and I tried this :
{!! Form::submit('', ['class' => 'btn btn-warning btn-sm fa fa-trash']) !!}
but the icon won't show. How to solve this ? thanks in advance!
Try to use Form::button instead of Form::submit:
{{ Form::button('<i class="fa fa-trash"></i>', ['type' => 'submit', 'class' => 'btn btn-warning btn-sm'] ) }}
You can try too with:
Example to input type button:
{{ FORM::button('<i class="glyphicon glyphicon-trash" aria-hidden="true"></i> Text button',['class'=>'button button-red','type'=>'button','id'=>'id-button']) }}
there are not possible try it
laravel collective form given very competition
<button class='btn btn-primary' type='submit' value='submit'>
<i class='fa fa-save'> </i> Save
Related
I want to make a dynamic table using LaravelCollective, where you can add/remove rows.
I already tried to follow a few tutorials, but I keep failing. I don't know what I'm doing wrong.
Html Code for the table/form
{{ Form::open(['action' => 'TransactionsINController#store', 'method' => 'POST']) }}
<section>
<div class="panel panel-header">
<div class="form-group">
{{ Form::label('supplier_name', 'Supplier Name') }}
{{ Form::select('supplier_name', $supplierList->pluck('name', 'id'),
null, ['class' => 'form-control', 'placeholder' => 'Pick one supplier...']) }}
</div>
<div class="form-group">
{{ Form::label('transaction_in_date', 'Transcation Date') }} <br>
{{ Form::date('transaction_in_date', \Carbon\Carbon::now()->format('d M Y')) }}
</div>
</div>
<div class="panel panel-footer">
<table class="table table-hover table-bordered" id="">
<thead align="center">
<tr>
<th>Device Type</th>
<th>Spec</th>
<th>Price</th>
<th><a href="#" class="btn btn-success addRow">
<i class="fa fa-plus"></i>
</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-group">
{{ Form::select('device_type_name[]', $deviceTypeList->pluck('name_tipe_device', 'id'),
null, ['class' => 'form-control', 'placeholder' => 'Pick Device Type...', 'name' => 'device_type_name[]']) }}
</div>
</td>
<td>
<div class="form-group">
{{ Form::textarea('device_spec[]', '',
['class' => 'form-control', 'placeholder' => 'Device Spec', 'rows' => 5, 'cols' => 45, 'name' => 'device_spec[]']) }}
</div>
</td>
<td>
<div class="form-group">
{{ Form::number('device_price[]', 'value', ['name' => 'device_price[]']) }}
</div>
</td>
<td>
<a href="#" class="btn btn-danger remove">
<i class="fa fa-times"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</section>
{{ Form::button('<i class="far fa-save"></i> Submit', ['type' => 'submit', 'class' => 'btn btn-info'] ) }}
{{ Form::close() }}
The Script i use to add/remove Rows
<script type="text/javascript">
$('.addRow').on('click', function(){ \\Uncaught ReferenceError: happen in this line.
addRow();
});
function addRow(){
var tr = '<tr>'+
'<td>'+
'<div class="form-group">'+
'{{ Form::select('device_type_name[]', $deviceTypeList->pluck('nama_tipe_device', 'id'),
null, ['class' => 'form-control', 'placeholder' => 'Pick Device Type...', 'name' => 'device_type_name[]']) }}'+
'</div>'+
'</td>'+
'<td>'+
'<div class="form-group">'+
'{{ Form::textarea('device_spec[]', '',
['class' => 'form-control', 'placeholder' => 'Device Spec', 'rows' => 5, 'cols' => 45, 'name' => 'device_spec[]']) }}'+
'</div>'+
'</td>'+
'<td>'+
'<div class="form-group">'+
'{{ Form::number('device_price[]', 'value', ['name' => 'device_price[]']) }}'+
'</div>'+
'</td>'+
'<td>'+
'<a href="#" class="btn btn-danger remove">'+
'<i class="fa fa-times"></i>'+
'</a>'+
'</td>'+
'</tr>';
$('tbody').append(tr);
}
</script>
When I press the + button to add more rows it doesn't do anything and when I inspected the code in the browser, I found this error:
Uncaught ReferenceError: $ is not defined
$ refers to jQuery, have you added it to your project and is it available in this scope?
Note: it needs to be present before your script
jQuery may not have loaded when that script runs, you can try wrapping your script with $(document).ready({ }) so it runs it when jQuery has loaded
In my blade template, I use a foreach to create one form per iteration. Currently, each form has a submit button, but I want to use one submit button to submit all the form, because now I cannot submit all forms at the same time. How can I fix this?
#if(count($task_criterias) > 0)
#foreach($task_criterias as $task_criteria)
<td class="card">
<div>Description:{{$task_criteria->criteriadescription}}</div>
<div>Maximum Mark:{{$task_criteria->maximummark}}</div>
{!! Form::open([
'action' => 'CriteriaMarksController#store',
'method' => 'POST',
'name' => "form"
]) !!}
<div class="form-group" hidden >
{{ Form::label('criteria_id', 'criteria_id') }}
{{ Form::text('criteria_id', $task_criteria->id, ['class'=>'form-control']) }}
</div>
<div>
{{ Form::label('selfmark','Mark ') }}
{{ Form::number('selfmark', '',['placeholder'=>'', 'class' => 'col-lg-3 control-label']) }}
</div>
{!! Form::close() !!}
</td>
#endforeach
<input type="button" class="btn btn-info " value="Submit" onclick="submitForms()" />
<script>
submitForms = function() {
$("form").each(function(){
$.ajax({
method:'POST',
url:'/criteria_marks/post',
data: $(this).serialize(),
success: function(r){
//...
}
});
});
}
</script>
#endif
There can be only one post submit per request. One of the easiest solution is to perfom multiple requests using ajax:
<script>
submitForms = function() {
$("form").each(function(){
$.ajax({
method:'POST',
url:'* route to CriteriaMarksController#store *',
data: $(this).serialize(),
success: function(r){
//...
}
});
});
}
</script>
Or you can make one big form:
{!! Form::open([
'action' => 'CriteriaMarksController#store',
'method' => 'POST',
'name' => "form"
]) !!}
#foreach($task_criterias as $key => $task_criteria)
<td class="card">
<div>Description:{{$task_criteria->criteriadescription}}</div>
<div>Maximum Mark:{{$task_criteria->maximummark}}</div>
<div>
{{ Form::label('selfmark','Mark ') }}
{{ Form::number('selfmark['.$task_criteria->id.']', '',
['placeholder'=>'', 'class' => 'col-lg-3 control-label']) }}
</div>
</td>
#endforeach
<input type="submit" class="btn btn-info " value="Submit" />
{!! Form::close() !!}
This will form associative array selfmark in post with id => value pairs
Not sure how to do it with the Form facade.
What you have now is:
<input name="criteria_id" value="{{ $task_criteria->id }}" />
<input name="selfmark" value="{{ $task_criteria->id }}" />
But what you need to have is:
<input name="criteria_id[]" value="{{ $task_criteria->id }}" />
<input name="selfmark[]" />
Note the [] in the input names.
I have a blade view. When the user select an item a modal view appears in the same HTML.
My modal have 3 buttons. Each button have to redirect by post request to specific functions in my controller.
CarsController
class CarsControllerextends Controller
{
index(){
...
return view('cars')->with(['car'=>$response]);
}
// execute when the user click on save button
save(Request $request){
...
}
// execute when the user click on delete button
delete(Request $request){
...
}
// execute when the user click on remove button
remove(Request $request){
...
}
}
Modal
<form role="form" method="POST" action="{{ url('/guardarTurno') }}">
{{ csrf_field() }}
<!-- 3 hidden inputs to save the id of the item that the user selected ... is the best way?-->
<input type="hidden" id="cancha" name="cancha" value="" class="form-control">
<input type="hidden" id="fecha" name="fecha" value="{{$agenda['fechaElegida']}}" class="form-control">
<input type="hidden" id="hora" name="hora" value="" class="form-control">
<button type="submit" class="btn btn-labeled btn-success button-infousuario">
<span class="btn-label"><i class="fa fa-check fa-fw"></i></span>
Save
</button>
<button type="submit" class="btn btn-labeled btn-warning button-infousuario">
<span class="btn-label"><i class="fa fa-exclamation-triangle fa-fw"></i></span>
Delete
</button>
<button type="submit" class="btn btn-labeled btn-danger button-infousuario">
<span class="btn-label"><i class="fa fa-times fa-fw"></i></span>
Remove
</button>
</form>
What I want is:
Save button make a post request to save() method
Remove button make a post request to remove() method
Delete button make a post request to delete() method
Each of three button need the same ids
Thanks!
You will have to make 3 different forms to send to 3 different functions.
After your Save button, close the first </form>.
Then start a new form for each of the remaining buttons (Delete & Remove). Each form will have a different action
<form action="/remove" method="post">
{{ csrf_field() }}
<input type='hidden' name='id' value='1' />
<button type='submit'>Remove</button>
</form>
Then the same for Delete
Don't forget to define routes for each of the action=''
There is a button,which will redirect to a new page after being clicked.
I want to define a hyperlink for this in laravel blade template.
{!! Form::button('<span class="fa fa-arrow-circle-right"></span> Start',
array('class' => 'btn btn-next next-step pull-right'))
!!}
Wrap your button with a form:
<form action="http://example.com">
// button code
</form>
Or:
{!! Form::open(['url' => 'http://example.com']) !!}
// button code
{!! Form::close() !!}
{!! Form::open(['route' => 'route.name']) !!}
// button code
{!! Form::close() !!}
{!! Form::open(['action' => 'Controller#action']) !!}
// button code
{!! Form::close() !!}
I have a div, which contains some text and two buttons. I have an onclick attribute on the div, because I want to be able to click anywhere inside of it to activate an event, except for the two buttons. I don't want the event to activate if I hit one of the buttons. I can't seem to figure out where to put the "onclick", though, because it either selects all or not enough. Is there a way to exclude these two buttons from the selection?
My HTML right now is:
<div id="event" class="span8" onclick="preview({{ name.event_id }})">
<strong>
{{ name.title|truncatechars:50 }}
</strong> <br>
Location: {{ name.location|truncatechars:50 }} <br>
Start Date: {{ name.start|truncatechars:50 }} <br>
End Date: {{ name.end|truncatechars:50 }}
<a class="page btn btn-primary btn-small" href="/event/{{ name.event_id }}">Event Page</a>
<button class ="page btn btn-danger btn-small" id="{{ name.event_id }}" href="#" onClick="removeEvent({{ name.event_id }}, {{ user.get_profile.id }})">
<i id="icon" class="icon-minus-sign icon-white"></i>
Remove
</button>
...
</div>
You can just add a call to stopPropagation in the button onClick attribute, like this:
<button class ="page btn btn-danger btn-small" id="{{ name.event_id }}" href="#" onClick="event.stopPropagation(); removeEvent({{ name.event_id }}, {{ user.get_profile.id }})">
Previously answered here: How to stop event propagation with inline onclick attribute?