In my app i want the user click on participate button to participate to an event and i want he will receive an email in the same time when he click !
The 2 function work well in the app but i can't make them in the same time when the user click on participate button !!
I have two routes with two different controllers:
Route::post('/participations/{id}','App\Http\Controllers\EventController#participate')->name('participate');
Route::post('/event/mails','App\Http\Controllers\EmailController#participate')->name('mails');
This is my form :
<form action="{{route('mails')}}" action="{{route('participate', [$event->id])}}" method="POST">#csrf
<div class="modal-body">
<div class="form-goup">
<label>Your name *</label>
<input type="text" name="friend_name" class="form-control" required="">
</div>
<div class="form-goup">
<label>Your email *</label>
<input type="email" name="friend_email" class="form-control" required="">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Participate</button>
</div>
</form>
I can't find a way to fix that ! any help ?
Thanks in advance !
I am new to angular 5. I need a help to add dropdown menu, when I select the contents in dropdown the search box should be displayed.
This is text box code.I need to put this in dropdown so that when I'll select A i need to get search text box for A. When i select module same text box should be displayed for module.
<div class="col-sm-1">
<label for="A">A:</label>
</div>
<div class="col-sm-3">
<input type="text" name="A" [(ngModel)]="A" class="form-control" id="A">
</div>
<div class="col-sm-1">
<button type="submit" class="btn btn-primary" (click)="searchA()">search</button>
</div>
<div class="col-sm-1">
<label for="module">MODULE:</label>
</div>
<div class="col-sm-3">
<input type="text" name="module" [(ngModel)]="module" class="form-control" id="module">
</div>
<div class="col-sm-1">
<button type="submit" class="btn btn-primary" (click)="searchModule()">search</button>
</div>
</div>
Instead of two search text boxes, I want use dropdown to display single search textbox.
Here is a short example of accomplishing it. (i ignored bootstrap for brevity)
It was possible, by declaring my dropdown value as a variable called "searchOption" and then using it as a condition for every search button.
Select
<select [(ngModel)]="searchOption">
<option value="A">A</option>
<option value="module">module</option>
</select>
<button type="submit" class="btn btn-primary" (click)="searchA()" *ngIf="searchOption == 'A'">searchA</button>
<button type="submit" class="btn btn-primary" (click)="searchModule()" *ngIf="searchOption == 'module'">searchModule</button>
Can I eliminate some of these divs. I like to keep my code lean. I understand the 5th one b.c. it is the footer, but what about the other 4.
Here is the code
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Submit</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
<p>Bookmarks</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is the fiddle to run it
https://jsfiddle.net/te4ta7hc/
Let me tell you about the modal window first
Where the modal content is the base which will show after triggering the modal.
Modal Header where we can able to put the heading for our modal window like( Enquiry form).
Modal Body: where the actual content have to be present whatever it may be. Such as Forms, Text contents etc..
Modal footer: where you can add some actions like close button or anything else
So if you want to eliminate the code means you can remove the modal header and footer.. make sure you added button to close modal in modal body
Probably a simple question for someone, but hard to figure out for me.
I am using the following html:
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#waarom" aria-expanded="false" aria-controls="waarom">Button A</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#spelregels" aria-expanded="false" aria-controls="spelregels">Button B</button>
<div class="collapse" id="waarom">
<div class="well waarom">
<p>Ipsum Lorem text (button A)</p>
</div>
</div>
<div class="collapse" id="spelregels">
<div class="well spelregels">
<p>Ipsum Lorem (button B)</p>
</div>
</div>
Collapse works, however, they can be expanded both. This is not the result what I want. Both start collapsed (= good). I click on 'Button A' it expands, then I click 'Button B' then contents of B should be visible and contents under 'Button A' should be hidden.
So in short; press B, show B contents (and hide A contents).
Sorry if I don't make sense, trying to do my best at English here. :)
Thank you for your time and solutions. The examples I could find only showed this for the 'Accordion', which I don't want. So, maybe this is not even possible.
You can wrap it in a div and use a bit of jquery http://jsfiddle.net/2Dj7Y/2087/
<div id="accordion">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#waarom" aria-expanded="false" aria-controls="waarom">Button A</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#spelregels" aria-expanded="false" aria-controls="spelregels">Button B</button>
<div class="collapse collapse-well" id="waarom">
<div class="well waarom">
<p>Ipsum Lorem text (button A)</p>
</div>
</div>
<div class="collapse collapse-well" id="spelregels">
<div class="well spelregels">
<p>Ipsum Lorem (button B)</p>
</div>
</div>
</div>
$('.collapse-well').on('show.bs.collapse', function () {
$(this).closest("#accordion")
.find(".collapse.in")
.not(this)
.collapse('toggle')
})
Bootstrap uses the "collapse" and "collapse.in" classes to collapse and expand div's respectively.
You could create some javascript which is called on each button press and changes the classes to open and close the required div's using the following code.
<script>
function expandA(){
document.getElementById("waarom").className = "collapse.in"; //Open A
document.getElementById("spelregels").className = "collapse"; //Close B
}
function expandB(){
document.getElementById("waarom").className = "collapse"; //Close A
document.getElementById("spelregels").className = "collapse.in"; //Open B
}
</script>
Following this you would call the functions when a click event occurs
<button class="btn btn-primary" type="button" onclick"expandA()">Button A</button>
<button class="btn btn-primary" type="button" onclick"expandB()">Button B</button>
I'm trying to expand the submit button so that it is the size of the password field. I am using the code btn-block but it's not working.
<div class="container">
<div class="row" style="margin-top:60px;">
<div class="col-md-4 col-md-offset-4">
<div class="span12" style="text-align:center; margin: 0 auto;">
<form class="form-horizontal" style="width: 400px; margin: 0 auto;" method="post">
<fieldset>
<h3 style="color:dimgray;" class="sign-up-title">
Bem-vindo de volta! Efetue seu login
</h3>
<hr class="colorgraph">
<legend>
Efetue seu login
</legend>
<div style='display:none'>
<input type='hidden' name='csrfmiddlewaretoken' value='ImQqDNXbmiVQKGo3OsZlrepAzwfAu70B' />
</div>
<tr>
<th>
<label for="id_username">
Usuário:
</label>
</th>
<td>
<input id="id_username" type="text" name="username" maxlength="30" />
</td>
</tr>
<tr>
<th>
<label for="id_password">
Senha:
</label>
</th>
<td>
<input type="password" name="password" id="id_password" />
</td>
</tr>
<div class="buttonHolder">
<input type="submit" value="Entrar" class="btn btn-large btn-success btn-block" id="submit-login"/>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
In Bootstrap 5.0.x, btn-block is depreciated, and to get a full width button you can use a grid system and use col-12 in the button class.
you can check out the documentation from bootstrap documentation page
People from google, just add w-100 to your button to make it full width (the way btn-block used to work):
<button type="submit" class="btn btn-primary w-100">Login</button>
Works once you add w-100 to the button class.
<button type="submit" class="btn btn-primary w-100">Login</button>
Why not follow the official documentation of Bootstrap 5
Just add d-grid class in outer div
d-grid
Full syntax
<div class="row mb-3">
<div class="d-grid">
<button class="btn btn-primary">Submit</button>
</div>
</div>
The btn-block class is a combination of display: block and width: 100%, so we must use the d-block w-100 classes. Of course, if it is necessary to use display: block, otherwise w-100 is enough
<div class="buttonHolder">
<input type="submit" value="Entrar" class="btn btn-large btn-success w-100 d-block" id="submit-login"/>
</div>
Use "col-12" or use "w-100". Both will work at making a button full width relative to it's container.
I had the same problem but my btn-block wasn't working within a modal.
This was because the button was in bootstrap 4's footer. Once I moved it to the modal's body, it worked just fine. I hope this might help someone.
try to use w-100 inside class
like that <button type="submit" class="btn btn-primary w-100">Login</button>
set the display value to inline-block and it should work.
I had the same Issue where btn-block was not working in bootstrap 4, in a modal-body.
the Issue was that it was inside in a column <div class="col-xs-12"> and that parent element was not filling the expected 100%. The fix was to replace the col-xs-12 with col so the parent looks like this after the fix <div class="col-xs-12">.
The root cause is that the styling is using flexbox.
To have better understanding see the documentation for bootstrap 4 here... Bootstrap 4 Grid Documentation
For the solution of the above, you should add the col class to the buttonHolder or replace buttonHolder with col completely
btn-block refer to their parent( div with class="buttonHolder"), which their size fit with "Entrar" word.
<div class="buttonHolder">
<input type="submit" value="Entrar" class="btn btn-large btn-success btn-block" id="submit-login"/>
</div>
So, delete their div (div with class="buttonHolder") and Button with btn-block can have same size with the password field.
You can use the .col-bg-12 class and it will work the same as block.
I had this same problem but using this solved it so hopefully it will be helpful to you too.
The simple method will be just give col-12 to the btn class
U can use class=btn h-100, class=btn col-12 or in div tag d-grid``
You can use this method in Bootstrap version 5
<div class="w-100">
<button class="btn btn-primary w-100" type="button">Button</button>
</div>
just add col-12 to the class.
btn-block doesn't work with bootstrap5
Or maybe try the following:
Confirm