I have this code in Laravel-5.8:
<i class="fas fa-arrow-right"></i> Submit
That disables a href until when there is no null employee_mid_year_comment fields
How do I transform the same code for submit button shown below?
<form action="{{ route('post.selfreview.all'" method="post" class="form-horizontal" enctype="multipart/form-data">
{{csrf_field()}}
<button type="submit" class="btn btn-primary"> <i class="fas fa-check"></i> Submit</button>
</form>
Thanks
Instead of adding a class on the button, you can use same ternary condition to add disabled property to your button, like this:
<form action="{{ route('post.selfreview.all'" method="post" class="form-horizontal" enctype="multipart/form-data">
{{csrf_field()}}
<button type="submit" class="btn btn-primary" {{ (! $goals->pluck('employee_mid_year_comment')->contains(null)) ? '' : 'disabled' }}> <i class="fas fa-check"></i> Submit</button>
</form>
As any Button has a disabled attribute all you can do is
<form action="{{ route('post.selfreview.all'" method="post" class="form-horizontal" enctype="multipart/form-data">
{{csrf_field()}}
<button type="submit" class="btn btn-primary" {{ (! $goals->pluck('employee_mid_year_comment')->contains(null)) ? '' : 'disabled' }}> <i class="fas fa-check"></i> Submit</button>
</form>
Add disabled attribute in button
<button {{ (! $goals->pluck('employee_mid_year_comment')->contains(null)) ? '' : 'disabled' }} type="submit" class="btn btn-primary">
<i class="fas fa-check"></i> Submit
</button>
Related
so here's the problem
i want to align my buttons , in the div
here the result
my view
i've tried some css but it dont work
now i am not using any custom css for this div
here's my blade file
<td>
<div class="container">
<form method="POST" action="{{ route('users.destroy',$user->id) }}">
{{ csrf_field() }}
{{ method_field('delete') }}
{{-- <!–– //With the <a> tag you are sending a get request.
that's why we changed it like that because the destroy method require a DELETE request
thank you stackoverflow you saved me ––> --}}
<button type="submit" class="btn btn-danger" ><i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</form>
<a href="{{ route('users.show',$user->id) }}"><button type="button" class="btn btn-primary"><i class="fa fa-info-circle" aria-hidden="true"></i></button>
<a href="{{ route('users.edit',$user->id) }}"> <button type="button" class="btn btn-warning"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button>
</div>
</td>
Add text-nowrap class to the form, and they will be in one line.
I have an html form and a div class. Both are represented by buttons and are appearing in different lines. (one below another). I want both the buttons to appear on the same line. How can I achieve this?
<div class="form">
<form method="POST" action="{% url 'mytab' %}">
{% csrf_token %}
<button type="submit" name="drilldown_filter" class="btn btn-primary btn-sm" onclick="myFunction()" disabled><i class="fa fa-arrow-circle-down"></i></button>
<input type="hidden" id="data" name="input name" value="">
</form>
</div>
<div class="button-group">
<button class="btn btn-primary btn-sm" onClick="javascript:history.go(-1);" disabled><i class="fa fa-angle-double-down"></i></button>
</div>
Thanks
use this style for both divs:
<style>
.form{
display: inline-block
}
.button-group{
display: inline-block
}
</style>
This should work.
include Style = "float:left" for form div.
<div class="form" style="float:left;">
<form method="POST" action="">
<button type="submit" name="drilldown_filter" class="btn btn-primary btn-sm" onclick="myFunction()" disabled><i class="fa fa-arrow-circle-down">sdfgsdfg</i></button>
<input type="hidden" id="data" name="input name" value="">
</form>
try this css:
.form,.button-group {
display: inline-block;
}
All you have to do is make div.both that will contain both those divs and put a display: flex on that div.both in the CSS.
<div class="both" >
<div class="form">
<form>
<button>uno</button>
</form>
</div>
<div class="button-group">
<button>dos</button>
</div>
</div>
CSS
div.both {
display: flex;
}
Just copy and paste this code
<div class="form" style="float: left;">
<form method="POST" action="{% url 'mytab' %}">
{% csrf_token %}
<button type="submit" name="drilldown_filter" class="btn btn-primary btn-sm" onclick="myFunction()" disabled><i class="fa fa-arrow-circle-down"></i></button>
<input type="hidden" id="data" name="input name" value="">
</form>
When I try class="btn-group" the buttons aren't joined anymore. They are separate.
<div class="btn-group btn-group-xs">
<form action="{{ route('requisitions.update' , ['id' => $requisition->id]) }}" method="post">
{{ method_field('PATCH') }}
{{ csrf_field() }}
<button type="submit" class="btn btn-success btn-xs">Confirmation</button>
</form>
<form action="{{ route('requisitions.destroy' , ['id' => $requisition->id]) }}" method="post">
{{ method_field('PATCH') }}
{{ csrf_field() }}
<button type="submit" class="btn btn-danger btn-xs">Disapproval</button>
</form>
</div>
You should follow the standard way as bootstrap
https://getbootstrap.com/docs/4.1/components/button-group/
try to wrap this code some thing like this in a div having class "btn-toolbar"
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group btn-group-xs" role="group">
<form method="post">
<button type="submit" class="btn btn-success btn-xs">Confirmation</button>
</form>
<form method="post">
<button type="submit" class="btn btn-danger btn-xs">Disapproval</button>
</form>
</div>
</div>
Example#2
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
</div>
I want to know how to replace submit button with font awesome icon, I already tried it myself and the icon won't show up on the button.
Here is what I have done so far :
<form action="{{route('destroycourse', $course->id)}}" method="POST">
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
<li><a class="tooltips" data-toggle="tooltip" data-placement="top" title="Delete">
<button type="submit" onclick="return confirm('Are you sure to delete this course ?');" style="border: 0; background: none;">
<i class="fa fa-delete"></i>
</button>
</a>
</li>
</form>
The button works just fine only the icon <i class="fa fa-delete"></i> won't show up and it's just showing a blank button. Thanks for the help!
I couldn't find fa-delete. I have used fa-trash to display trash icon.
You just need to include the font-awesome css in your code and correct class name.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<form action="{{route('destroycourse', $course->id)}}" method="POST">
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
<li><a class="tooltips" data-toggle="tooltip" data-placement="top" title="Delete">
<button type="submit" onclick="return confirm('Are you sure to delete this course ?');" style="border: 0; background: none;">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</a>
</li>
</form>
You are using wrong class of fontawesome
change class of fa fa-delete to fa fa-trash.
Working fiddle
fiddle link
button {
background:tomato;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="submit"><i class="fa fa-trash"></i>Submit</button>
there is no such a class for icon that you are using is fa-delete.use the classes which are present.
for your reference, use these links.
https://www.w3schools.com/icons/fontawesome_icons_text.asp
https://www.w3schools.com/icons/fontawesome_icons_webapp.asp
else use class "fa-trash-o" for delete icon
I am trying to create a button group with css bootstrap framework.
I was able to create button-group with no problem. But, one of my buttons should be wrapped with a form to perform post request when clicking it.
Here is my code
<div class="btn-group btn-group-xs pull-right" role="group">
<a href="/salecategories" class="btn btn-primary" title="Show all salecategories">
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
</a>
<a href="/salecategories/2/edit" class="btn btn-primary" title="Edit SaleCategory">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<form method="POST" action="/salecategories/salecategory/2" accept-charset="UTF-8" style="display: inline;" novalidate="novalidate">
<input name="_method" value="DELETE" type="hidden">
<input name="_token" value="8123RX6LbCpxo7LDdp3eettEXGzdfbS9gvzjbbWP" type="hidden">
<button type="submit" class="btn btn-danger btn-xs" title="Delete SaleCategory" onclick="return confirm("Confirm delete?")" id="sometest">
<span class="glyphicon glyphicon-trash" aria-hidden="true" title="Delete SaleCategory"></span>
</button>
</form>
</div>
The above code work but the "red button" is not aligned with the rest at the following screenshot shows.
How can I align the "red" button with the other two?
Here is a jsfiddler to allow you to tinker with the code. Note, the fiddler shows the button now connected but the screenshot shows not aligned because I am using a different font for my app.
You can wrap the whole button group in the form. That way you can keep the three buttons together side by side.
<form action="/salecategories/salecategory/2">
<div class="btn-group btn-group-xs" role="group">
Show all
Edit
<button type="submit" class="btn btn-primary">Delete</button>
</div>
</form>