FORM
I am creating a form like this but i dont know how to place all radio buttons serially in a row. Could someone help me with this.
No. Of Guests
1
<input type="radio" name="opt2" class="form-control" id="opt2">
<label for="opt1">2</label>
<input type="radio" name="opt3" class="form-control" id="opt3">
<label for="opt3">3</label>
<input type="radio" name="opt4" class="form-control" id="opt4">
<label for="opt4">4</label>
<input type="radio" name="opt5" class="form-control" id="opt5">
<label for="opt5">5</label>
</div>
</div>
</form>
This is my code for the radio buttons.When i run this code all buttons are placed vertically.
please don't report this question. I am a noob on this platform so, i dont know exactly how it works.
Thank you in advance.
Use this code :
<div>
<div class="row">
<div class="form-check form-check-inline">
<input name="gruppo2" type="radio" id="radio4" checked>
<label for="radio4">Opzione 1</label>
</div>
<div class="form-check form-check-inline">
<input name="gruppo2" type="radio" id="radio5">
<label for="radio5">Opzione 2</label>
</div>
</div>
</div>
What change? if you use form-check-inline class input radio will display in one row.
Related
I am trying to show validation message below horizontally aligned radio buttons in Bootstrap 4.1.3. Below is the default render:
<hr>
<div class="">
<div class="col-sm text-center">
Please confirm that your eye color is:<br>
<span class="response" id="eye_color"></span>
</div>
<div class="col-sm text-center">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_yes" value="yes" name="eye_color" required>
<label class="form-check-label" for="eye_color_yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_no" value="no" name="eye_color" required>
<label class="form-check-label" for="eye_color_no">No</label>
<div class="invalid-feedback">
Please select an option.
</div>
</div>
</div>
</div>
<hr>
I tried adding a break <br> and got this:
<hr>
<div class="">
<div class="col-sm text-center">
Please confirm that your eye color is:<br>
<span class="response" id="eye_color"></span>
</div>
<div class="col-sm text-center">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_yes" value="yes" name="eye_color" required>
<label class="form-check-label" for="eye_color_yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_no" value="no" name="eye_color" required>
<label class="form-check-label" for="eye_color_no">No</label>
<div class="invalid-feedback">
<br>Please select an option.
</div>
</div>
</div>
</div>
<hr>
But what I would really like is for the validation message to appear directly under the two horizontal radio buttons. I am using Bootstrap 4.1.3's validation for ease but for some reason can't figure this part out. Thanks!
I was just struggling with the same thing. This answer is probably too late for you, but hopefully it helps someone else. The validation message is displaying where it is because Bootstrap adds display: inline-flex; on a parent element when displaying horizontal forms, preventing it from dropping down to the next line.
I was able to relocate the invalid-feedback validation message outside the flex layout element, and have it continue to react to the validation (without any extra javascript) by placing a dummy radio button with the same name before it and hiding it with CSS. A bit hacky, but it works.
<div class="col-sm text-center">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_yes" value="yes" name="eye_color" required>
<label class="form-check-label" for="eye_color_yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_no" value="no" name="eye_color" required>
<label class="form-check-label" for="eye_color_no">No</label>
</div>
<input type="radio" name="eye_color" style="display:none;" required>
<div class="invalid-feedback">
Please select an option.
</div>
</div>
I created a form only using Bootstrap 4 class. You can use this snippet for your desired result.
<div class="container">
<form >
<div class="col-sm-6">
Please confirm that your eye color is:
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio1">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Blue
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio2">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Black
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input">Grey
</label>
</div>
<div class="text-danger">
Please select color.
</div>
</form>
</div>
On the place of below code:
<div class="text-danger">
Please select color.
</div>
You can use below snippet it will look better for showing error messages:
<div class="alert alert-danger">
<strong>Warning!</strong> Please select color.
</div>
The page is working perfectly in Chrome, IE or Firefox, but in Safari I have a weird problem. The (click) events that are inside the radio buttons are not working, the event is not fired. I have another (click) in a button later and it works fine. The problem happens on iPhone/iMac so is not device related.
The page is nothing more than a survey with some questions. Here is an example of html code:
<div class="col" *ngIf="!valueSelection">
<h4 for="">1.- Question 1</h4>
<div class="form-check">
<input class="form-check-input" type="radio" name="questionRMG1" id="questionRMG1_1" value="answerRMG1_1" [(ngModel)]="valueSelection"
(click)="onSelect(0.25)">
<label class="form-check-label" for="questionRMG1_1">Answer a.</label>
</div>
<br>
<div class="form-check">
<input class="form-check-input" type="radio" name="questionRMG1" id="questionRMG1_2" value="answerRMG1_2" [(ngModel)]="valueSelection"
(click)="onSelect(0.10)">
<label class="form-check-label" for="questionRMG1_2">Answer b./label>
</div>
<br>
<div class="form-check">
<input class="form-check-input" type="radio" name="questionRMG1" id="questionRMG1_3" value="answerRMG1_3" [(ngModel)]="valueSelection"
(click)="onSelect(0)">
<label class="form-check-label" for="questionRMG1_3">Answer c. </label>
</div>
<br>
<div class="form-check">
<input class="form-check-input" type="radio" name="questionRMG1" id="questionRMG1_4" value="answerRMG1_4" [(ngModel)]="valueSelection"
(click)="onSelect(0,50)">
<label class="form-check-label" for="questionRMG1_4">Answer d. </label>
</div>
<p>
<ngb-progressbar [value]="0" type="info">0%</ngb-progressbar>
</p>
</div>
Here is the code of the (click) that works fine:
<div class="container">
<div class="row">
<div class="col">
<h4>Text</h4>
<br>
<form #mailForm="ngForm">
<div class="form-group">
<label for="exampleInputName1">Name</label>
<input type="text" class="form-control" id="exampleInputName1" [(ngModel)]="inputName" name="inputName" placeholder="nombre empresa">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Mail</label>
<input type="email" class="form-control" id="exampleInputEmail1" [(ngModel)]="inputEmail" name="inputEmail" aria-describedby="emailHelp"
placeholder="mail">
<small id="emailHelp" class="form-text text-muted">Text</small>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" [(ngModel)]="inputCheck" name="inputCheck">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary" (click)="onSend()" ng-disabled="sending">Enviar</button>
</form>
</div>
</div>
</div>
I really have no idea of what the problem could be.
After more research, i found a similar question: Angular2 radio button not working in Production
I tried changing the environment production variable to false, and now everything works on Safari.
It´s a solution, but i don´t understand why this happens, doesn´t make sense.
I have an HTML form and I need to save the inserted data on a mongo database. What I have difficulties is to save data inserted by radio button and ckeckboxes.
Here is my HTML code:
<div class="form-group">
<label>Foto:</label>
<input class="form-control" type="text" name="animal[foto]" placeholder="image url">
</div>
<div class="form-group">
<label>Animal:</label>
<div class="form-check">
<label class="form-check-label"><input class="form-check-input" name="animal[tipo]" type="radio" value="dog" > Dog</label>
</div>
<div class="form-check">
<label class="form-check-label"><input class="form-check-input" name="animal[tipo]" type="radio" value="cat"> Cat</label>
</div>
<div class="form-check">
<label class="form-check-label"><input class="form-check-input" name="animal[tipo]" type="radio" value="other"> Other:</label>
<input type="text" class="form-control" name="animal[tipo]" placeholder="Which?">
</div>
</div>
<div class="form-group">
<label>Gender:</label>
<div class="form-check">
<label class="form-check-label"><input class="form-check-input" name="animal[sexo]" type="radio" value="Male"> Male</label>
</div>
<div class="form-check">
<label class="form-check-label"><input class="form-check-input" name="animal[sexo]" type="radio" value="Female"> Female</label>
</div>
How can I save what is select in radio btn?
First you have to get the value from the radio buttons.
If you are using a javascript library like jQuery, it's very easy:
alert($('input[name=animal[tipo]]:checked').val());
This code will select the checked input with animal[tipo] name, and gets it's value. Simple isn't it?
Then you can save it as you normally do
currently i have 3 radio buttons that i am trying to place next to my 2 input fields using bootstrap. i want to place them in the same row as my input fields, however it keeps getting aligned with the labels of those input fields.
Anyone have an idea on how i can bump down the alignment?
my html:
<div class="container">
<div class="row">
<div class="form-group col-xs-5">
<label for="costDescription">Description</label>
<input class="form-control input-group-lg" type="text" name="costDescription" ng-model="attendees.formData.scenarios[0].scenarioItems[0].costDescription"/>
</div>
<div class="form-group col-xs-2">
<label for="cost">Amount</label>
<input class="form-control input-group-lg" type="number" name="cost" ng-model="attendees.formData.scenarios[0].scenarioItems[0].cost"/>
</div>
<label class="radio-inline"><input type="radio" name="optradio">Option 1 </label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2 </label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3 </label>
</div>
here is my plunkr:
https://embed.plnkr.co/YIFin0fUchhSyZHiWUO6/
Why not change the code where the radio buttons are as follows:
<div class="form-group col-xs-5" style="margin-top:40px">
<label class="radio-inline"><input type="radio" name="optradio">Option 1 </label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2 </label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3 </label>
</div>
Add it to a column and then add a margin-top css style to it
No extra classes. Just some HTML change. Use another column for the radio buttons:
<div class="container">
<div class="row">
<div class="col-sm-5">
<label for="costDescription">Description</label>
<input class="form-control input-group-lg" type="text" name="costDescription" ng-model="attendees.formData.scenarios[0].scenarioItems[0].costDescription"/>
Hello
</div>
<div class="col-sm-2">
<label for="cost">Amount</label>
<input class="form-control input-group-lg" type="number" name="cost" ng-model="attendees.formData.scenarios[0].scenarioItems[0].cost"/>
</div>
<div class="col-sm-5">
<label class="radio-inline"><input type="radio" name="optradio"> Option 1 </label><br />
<label class="radio-inline"><input type="radio" name="optradio"> Option 2 </label><br />
<label class="radio-inline"><input type="radio" name="optradio"> Option 3 </label>
</div>
</div>
</div>
Preview
Removing the <br /> will give you this:
I'm creating a database using XAMPP localhost. My problem is that I don't know what's the type of radio button in DB. please help me to solve it
Here's my code :
<div class="form-group form-group-sm">
<label style="margin-top: 3px" class="col-sm-2 control-label" for="formGroupInputSmall">Priority</label>
<label style="margin-left: 15px; margin-bottom: 10px">
<label class="radio-inline">
<input type="radio" name="priority" id="high" value="">High</label>
<label class="radio-inline">
<input type="radio" name="priority" id="medium" value="">Medium</label>
<label class="radio-inline">
<input type="radio" name="priority" id="low" value="">Low</label>
</label>
</div>
It looks like you're just trying to build a form to submit to a database, so a radiobutton is just a radio button as far as type goes.
<input type="radio" name="radioOne" value="yes">Yes <br> <input type="radio" name="radioOne" value="no">No
Are you referring to your form or whats being submitted to the db?