How do I separate two radio button groups ? Each line have to be checked separately, see in the example below :
<div id="group1" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input id="emViewMacsButton" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton" name="options" type="radio">Settings
</label>
</div>
<div id="group2" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input id="emViewMacsButton2" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton2" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton2" name="options" type="radio">Settings
</label>
</div>
https://jsfiddle.net/vzn6x7z6/
Thanks
You need to separate your groups with <fieldset> , and also you need to wrap it in <form>, and finally to work as you want you need to change name for second group from name="option" to name="optionOne" or something.
updated jsFiddle
<form>
<fieldset>
<div id="group1" class="btn-group" data-toggle="buttons">
<input id="emViewMacsButton" name="options" type="radio">
<label class="btn btn-primary">MAC</label>
<input id="emViewTagsButton" name="options" type="radio">
<label class="btn btn-primary">Tags</label>
<input id="emViewSettingsButton" name="options" type="radio">
<label class="btn btn-primary">Settings</label>
</div>
</fieldset>
<fieldset>
<div id="group2" class="btn-group" data-toggle="buttons">
<input id="emViewMacsButton2" name="options1" type="radio">
<label class="btn btn-primary">MAC</label>
<input id="emViewTagsButton2" name="options1" type="radio">
<label class="btn btn-primary">Tags</label>
<input id="emViewSettingsButton2" name="options1" type="radio">
<label class="btn btn-primary">Settings</label>
</div>
</fieldset>
</form>
Also match for attribute of label with input ID, and move input outside of label. Everything is updated in code above except for attributes.
Put them in 2 separate fieldsets instead of a div and it should work:
<fieldset>
<label class="btn btn-primary">
<input id="emViewMacsButton" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton" name="options" type="radio">Settings
</label>
</fieldset>
<fieldset>
<label class="btn btn-primary">
<input id="emViewMacsButton2" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton2" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton2" name="options" type="radio">Settings
</label>
</fieldset>
Related
I want to redirect to the online payment page or wallet payment page by selecting the radio button and then clicking Buy Now Button. the form will also submit when I click the buy now button.
<form name="game-form" action="submit" method="POST">
#csrf
<div class="timeline-wrapper">
<ul class="StepProgress">
<li class="StepProgress-item is-done">
<div class="bold time">STEP 1</div>
<div class="bold"><h5>Account Login</h5></div>
<div class="form-group account-type">
<select class="form-control " style="width: 100%">
<option>Default select</option>
<option value="">Gmail</option>
<option value="">Facebook</option>
</select>
<label for="exampleInputEmail1">Email Address / Facebook Number</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email/number">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</li>
<li class="StepProgress-item is-done">
<div class="bold time">Step 2</div>
<div class="bold">
<h5>Select Recharge</h5>
</div>
<div class="form-group recharge-type">
#foreach ($games as $row)
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Weekly <sup>BDT {{$row['g1']}}</sup> </label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio2">Monthly <sup>BDT {{$row['g2']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio3">100 Diamond <sup>BDT {{$row['g3']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio4" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio4">200 Diamond <sup>BDT {{$row['g4']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio5" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio5">310 Diamond <sup>BDT {{$row['g5']}}</sup> </label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio6" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio6">520 Diamond <sup>BDT {{$row['g6']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio7" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio7">620 Diamond <sup>BDT {{$row['g7']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio8" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio8">830 Diamond <sup>BDT {{$row['g8']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio9" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio9">1060 Diamond <sup>BDT {{$row['g9']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio10" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio10">2180 Diamond <sup>BDT {{$row['g10']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio11" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio11">5600 Diamond <sup>BDT {{$row['g11']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio12" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio12">$0.99 Aidrop <sup>BDT {{$row['g12']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio13" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio13">$1.99 Airdrop <sup>BDT {{$row['g13']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio14" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio14">$2.99 Airdrop <sup>BDT {{$row['g14']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio15" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio15">Level Up Pass <sup>BDT {{$row['g15']}}</sup></label>
</div>
<div class="btn-inner">
<input type="radio" class="btn-check" name="btnradio" id="btnradio16" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio16">Bundle Pass <sup>BDT {{$row['g16']}}</sup></label>
</div>
#endforeach
</div>
</div>
</li>
<li class="StepProgress-item is-done">
<div class="bold time">Step 3</div>
<div class="bold">
<h5>Payment Methods</h5>
</div>
<div class="form-group payment-type">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<i class="fas fa-wallet fa-3x"></i>
<label class="form-check-label" for="inlineRadio1">GAMERSHOBBD</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<i class="fas fa-money-check-alt fa-3x"></i>
<label class="form-check-label" for="inlineRadio2">OtherPayment</label>
</div>
</div>
</li>
</ul>
</div>
<div class="buy-btn">
<button id="top-account-submit" type="submit" class="btn btn-primary btn-lg">Buy Now</button>
</div>
</form>
This is an order page, where people will fillup the form then select the product then select the payment type.
This page will take data to the database then show those data to the next page, which will be wallet payment or online payment. I am new to Laravel. it will very helpful if anyone can give the solution.
You can do with inline js as :
<select class="form-control " style="width: 100%" onchange="this.form.submit()">
...
</select>
Or with JQuery :
$('form select').on('change', function(){
$(this).closest('form').submit();
});
<div class="form-row">
<div class="column">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active" for="visualContagi">
<input type="radio" name="options" id="visualContagi" checked> Contagi
</label>
<label class="btn btn-primary" for="visualGuariti">
<input type="radio" name="options" id="visualGuariti" checked> Guariti
</label>
<label class="btn btn-primary" for="visualDecessi">
<input type="radio" name="options" id="visualDecessi" checked> Decessi
</label>
<label class="btn btn-primary" for="visualRicoveri">
<input type="radio" name="options" id="visualRicoveri" checked> Ricoveri
</label>
<label class="btn btn-primary" for="visualTotPos">
<input type="radio" name="options" id="visualTotPos" checked> Totale Positivi
</label>
</div>
</div>
</div>
Hi, I have this radio button group as part of a form. The problem is that the buttons all get the "active" class applied to them when I load the webpage. I haven't written any javascript, it's just bootstrap, and this CSS applied to remove the outline when I click on the buttons:
.btn-primary.focus, .btn-primary:focus {
box-shadow: none;
}
I'm using the latest version of Firefox on macOS.
What I am noticing is that each of your <input type="radio" elements have the checked attribute attatched to them. If you remove that, then it should be fixed. I hope this helps!
I want to create a table with several informational columns and one input.
I'm using bootstrap 3.0.
This is the example:
JsFiddle
The expected result is:
6 Columns:
1st and 2nd : would be string output.
3rd would be three inputs: Number, Letter, Letter
The rest are informational columns from three buttons: A, B, C.
The problem is that size of the third column is not matching the rest of the columns: 4, 5, 6.
Is it possible to achieve that only by changing the html?
The code:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email number</label>
<input class="form-control" id="exampleInputEmail2" placeholder="Enter number" type="number">
</div>
Current wrong state with 3 rows of input:
Try using display:table-cell; for forms, and adjust width of inputs as you need, something like this:
.form-inline .form-control {
width: 50px;
display:table-cell;
}
.form-group{
display:table-cell;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<table class="table table-striped table-advance table-hover">
<tbody>
<tr>
<td>John </td>
<td>Doe</td>
<td>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email number</label>
<input class="form-control" id="exampleInputEmail2" placeholder="Enter number" type="number">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Enter Letter</label>
<input class="form-control" id="exampleInputEmail2" placeholder="Enter Letter" type="number">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Code Key</label>
<input class="form-control" id="exampleInputPassword2" placeholder="Key" type="text">
</div>
</form>
</td>
<td>
<div class="btn-row">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input name="options" id="option1" type="radio"> A
</label>
<label class="btn btn-default">
<input name="options" id="option2" type="radio"> B
</label>
<label class="btn btn-default">
<input name="options" id="option3" type="radio"> C
</label>
</div>
</div>
</td>
<td>
<div class="btn-row">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input name="options" id="option1" type="radio"> A
</label>
<label class="btn btn-default">
<input name="options" id="option2" type="radio"> B
</label>
<label class="btn btn-default">
<input name="options" id="option3" type="radio"> C
</label>
</div>
</div>
</td>
<td>
<div class="btn-row">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input name="options" id="option1" type="radio"> A
</label>
<label class="btn btn-default">
<input name="options" id="option2" type="radio"> B
</label>
<label class="btn btn-default">
<input name="options" id="option3" type="radio"> C
</label>
</div>
</div>
</td>
</tr>
</tbody>
tbody>
</table>
HI I am trying to draw a list of radio button using bootstrap 3.2, I have enclosed by buttons in a toolbar, I assumed this would draw the buttons next to each othe, with no gaps between the buttons.
Instead it draws a line of buttons with rounded edges with a gap between each button
My bowser is "Version 39.0.2171.65 Ubuntu 14.04 (64-bit)", so I assume that I have a modern layout engine. I assumed this would work 'out of the box'
There is a reference in my code to bootstrap.css
Have I missed something ?
Code is
<div class='btn-toolbar' role='toolbar' aria-label='...'>
<h2>Buttons</h2>
<div id='btn-group btn-group-justified' role='group' data-toggle='buttons' aria-label='...'>
<label class="btn btn-primary">
<input type='radio' id='layer1Button' autocomplete='off' name='options' >Fee
</label>
<label class='btn btn-primary'>
<input type='radio' id='layer2Button' autocomplete='off' name='options' >Fie
</label>
<label class='btn btn-primary'>
<input type='radio' id='layer3Button' autocomplete='off' name='options' >Foe
</label>
<label class='btn btn-primary'>
<input type='radio' id='layer4Button' autocomplete='off' name='options' >Foo
</label>
</div>
</div>
Try this:
Jsfiddle
<h2>Buttons</h2>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" id="layer1Button" autocomplete="off" name="options" > Fee
</label>
<label class="btn btn-primary">
<input type="radio" id="layer2Button" autocomplete="off" name="options" >Fie
</label>
<label class="btn btn-primary">
<input type="radio" id="layer3Button" autocomplete="off" name="options" >Foe
</label>
<label class="btn btn-primary">
<input type="radio" id="layer4Button" autocomplete="off" name="options" >Foo
</label>
</div>
In case #1 works, in case #2 it do not works. Check the code bellow:
<div class="container">
<div class="row">
<h1>Radio Group #1</h1>
<label class="radio-inline">
<input name="radioGroup" id="radio1" value="option1" type="radio"> 1
</label>
<label class="radio-inline">
<input name="radioGroup" id="radio2" value="option2" checked="checked" type="radio"> 2
</label>
<label class="radio-inline">
<input name="radioGroup" id="radio3" value="option3" type="radio"> 3
</label>
</div>
<div class="row">
<h1>Radio Group #2</h1>
<label for="year" class="control-label input-group">Year</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input name="year" value="2011" type="radio">2011
</label>
<label class="btn btn-default">
<input name="year" value="2012" type="radio">2012
</label>
<label class="btn btn-default">
<input name="year" value="2013" checked="checked" type="radio">2013
</label>
</div>
</div>
</div>
You can see it in action here: http://bootply.com/84165
Assuming you want a default button checked.
<div class="row">
<h1>Radio Group #2</h1>
<label for="year" class="control-label input-group">Year</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="year" value="2011">2011
</label>
<label class="btn btn-default">
<input type="radio" name="year" value="2012">2012
</label>
<label class="btn btn-default active">
<input type="radio" name="year" value="2013" checked="">2013
</label>
</div>
</div>
Add the active class to the button (label tag) you want defaulted and checked="" to its input tag so it gets submitted in the form by default.
A javascript fix to apply the 'active' class to all labels that are parents of checked inputs:
$(':input:checked').parent('.btn').addClass('active');
insert right after
$('.btn').button();
You have to use active in the label to make it work as mentioned above. But you can use checked="checked" and it will work too. It's not necessary but it's more legible and makes more sense as it is more html format compliance.
Use active class with label to make it auto select and use checked="" .
<label class="btn btn-primary active" value="regular" style="width:47%">
<input type="radio" name="service" checked="" > Regular </label>
<label class="btn btn-primary " value="express" style="width:46%">
<input type="radio" name="service"> Express </label>
In case you want to use bootstrap radio to check one of them depends on the result of your checked var in the .ts file.
component.html
<h1>Radio Group #1</h1>
<div class="btn-group btn-group-toggle" data-toggle="buttons" >
<label [ngClass]="checked ? 'active' : ''" class="btn btn-outline-secondary">
<input name="radio" id="radio1" value="option1" type="radio"> TRUE
</label>
<label [ngClass]="!checked ? 'active' : ''" class="btn btn-outline-secondary">
<input name="radio" id="radio2" value="option2" type="radio"> FALSE
</label>
</div>
component.ts file
#Component({
selector: '',
templateUrl: './.component.html',
styleUrls: ['./.component.css']
})
export class radioComponent implements OnInit {
checked = true;
}