How to customize Radio button and check box - javascript

I have created a form and fields are on different Tabs. Here is HTML
<form action="" method="post" name="post">
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container-fluid tab-pane active"><br>
<h3>Gender</h3>
<div class="row">
<input type="radio" name="gender" id="male" value="Male" />
<label for="male"><i class="fas fa-male male"></i></label>
<input type="radio" name="gender" id="female" value="Female" />
<label for="female"><i class="fas fa-female female"></i></label>
</div>
<div class="row">
<a class="btn btn-lg btn-gender" data-toggle="tab" href="#menu1">Continue</a>
</div>
</div>
<div id="menu1" class="container-fluid tab-pane fade"><br>
<h3>Activity</h3>
<input type="radio" name="activity" id="activity1" value="Activity1" />
<label for="activity1">Activity1</label>
<input type="radio" name="activity" id="activity2" value="Activity2" />
<label for="activity2">Activity2</label>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
I am having two problems :
I want to hide circles of radio button so that it only shows label and when user click on label it get selected.
When user click on any radio button, it should be selected and the page get redirected to next tab that is #menu1 automatically with needing to click on Continue button. I tried to use onclick and onchange but its not working for me.

Related

How to Create radio button group to the form to allow the selection of the smoking/non-smoking section of the restaurant?

I wish to emulate the behaviour of radio buttons withing a bootstrap form-group so a line in a form has several buttons ("btn btn-success" for example), with the buttons being able to be "selected", but only one of them can be selected at a given moment.
I want a Output like this:
But I am getting this:
Also I am not able to select the Smoking button
The Code for the Following is :
<div class="form-group row">
<label for="section" class="col-12 col-md-2">Section</label>
<div class="col-md-10">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success active">
<input type="radio" name="options" id="option1" autocomplete="off" checked>Non-
Smoking
</label>
<label class="btn btn-danger">
<input type="radio" name="options" id="option2" autocomplete="off">Smoking
</label>
</div>
</div>
</div>
Adding btn-group-toggleto your btn-group div will solve the issue.
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div class="form-group row">
<label for="section" class="col-12 col-md-2">Section</label>
<div class="col-md-10">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-success active">
<input type="radio" name="options" id="option1" autocomplete="off" checked>Non-
Smoking
</label>
<label class="btn btn-danger">
<input type="radio" name="options" id="option2" autocomplete="off">Smoking
</label>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</html>
try this
input[type="radio"] {
visibility:hidden;
}
https://jsfiddle.net/auo9Ly54/
remove autocomplete="off" checked in:
<input type="radio" name="options" id="option1" autocomplete="off" checked>

How to align input buttons vertically. Bootstrap3

Here is the code I'm using to try to render a group of button elements vertically.
<div class="btn-group" data-toggle="buttons" style="width: 80%;background-color: grey;">
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option1"> Option 1
</label>
</div>
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option2"> Option 2
</label>
</div>
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
</div>
The trouble is the buttons are rendered side-by-side, instead. Am using bootstrap3.
The only way I have managed to get them to render vertically, is by including radio styles, which I want to avoid. And I want to use input fields so I can dynamically set/reset checked values. I will be using dom-selectors to alter the state of the radio group elements.
Can anyone offer some idea as to how to do this?
According to the docs on https://getbootstrap.com/docs/3.3/components/#btn-groups you should change your first line from
<div class="btn-group" ...
to
<div class="btn-group-vertical" ...
put the buttons inside a div block they will get vertically align
<div class="btn-group" data-toggle="buttons" style="width: 80%;background-color: grey;">
<div>
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option1"> Option 2
</label>
</div>
</div>
<div>
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option2"> Option 2
</label>
</div>
</div>
<div>
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
</div>
</div>

AngularJS : binding radio buttons to ng-model with angular in ng-repeat

I'm currently learning angular.js and I'm running into a problem. I'm listing radio buttons based on the items fetched from the database and when I click on any of them my model doesn't get updated. I added an input to test and the input update the model right away.
Any idea what i'm missing?
Update: it appears that the problem comes from bootstrap and the span wrapping the radio buttons. If I remove the spans the model gets updated
<div ng-repeat="question in questionnaire">
<div class="btn-group col-xs-offset-1 col-xs-2 col-sm-2" data-toggle="buttons">
<span class="btn btn-primary">
<input type="radio" name="question{{$index}}" ng-model="formData[$index]" ng-value="false"> No
</span>
<span class="btn btn-primary">
<input type="radio" name="question{{$index}}" ng-model="formData[$index]" ng-value="true"> Yes
</span>
<input type="text" name="testEntry{{$index}}" ng-model="formData[$index]" />
</div>
{{formData}}
<span ng-bind="question.QuestionPhrase" class="message col-xs-8 col-sm-8"></span>
</div>
So it turns out that the problem was coming from the spans. I changed them to labels and it worked.
Here is the code:
<div ng-repeat="question in questionnaire">
<div class="btn-group col-xs-offset-1 col-xs-2 col-sm-2" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="question{{$index}}" ng-model="formData[$index]" value="false"> No
</label>
<label class="btn btn-primary">
<input type="radio" name="question{{$index}}" ng-model="formData[$index]" value="true"> Yes
</label>
</div>
{{formData}}
<span ng-bind="question.QuestionPhrase" class="message col-xs-8 col-sm-8"></span>
<br /><br /><br />
</div>

Select only one option in bootstrap radio

below is my code for my radio selection:
<div id="box" class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" id="ph">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
<div class="radio">
<label>
<input type="radio" id="anynum">Any number
</label>
<label>
<input type="radio" id="issuenum" >Issue number
</label>
</div>
<button class="btn btn-success" onclick="">Apply</button>
</div>
</div>
</div>
How do we have to do so that we can select only one option from the two?
Currently I can select both option.
Names should be same for radio buttons -
<div id="box" class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" id="ph">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
<div class="radio">
<label>
<input type="radio" name="anynum" id="anynum">Any number
</label>
<label>
<input type="radio" name="anynum" id="issuenum">Issue number
</label>
</div>
<button class="btn btn-success" onclick="">Apply</button>
</div>
</div>
Add the same name attribute to both the radio button
Edited:
<input type="radio" name="number">Any number
<input type="radio" name="number">Any other number
assign same name for both of the radio buttons
<label>
<input type="radio" name="name" id="anynum">Any number
<label>
<input type="radio" name="name" id="issuenum" >Issue number
When using radio button you should name them same for eg. in your case put
name="anynum" which will prevent you from selecting both the buttons
add name attribute to input tag and both your radio buttons should have same name value to make them a group like below
<div id="box" class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" id="ph">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
<div class="radio">
<label>
<input type="radio" id="anynum" name="group1">Any number
</label>
<label>
<input type="radio" id="issuenum" name="group1">Issue number
</label>
</div>
<button class="btn btn-success" onclick="">Apply</button>
</div>
</div>
</div>
When you clicks on a radio-button, it becomes checked,
and all other radio-buttons with equal name become unchecked
<div id="box" class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" id="ph">
<h3 class="panel-title">Title</h3>
</div>
<div class="panel-body">
<div class="radio">
<div class="btn-group">
<label>
<input type="radio" id="anynum" name="any">Any number
</label>
<label>
<input type="radio" id="issuenum" name="any">Issue number
</label>
</div>
</div>
<button class="btn btn-success" onclick="">Apply</button>
</div>
</div>
</div>

How to get a UIKit Button Group to function as radio buttons in a form

Yoothemes UIKit (http://getuikit.com) provides a way of making a button group appear to function like radio buttons. See about half way down on this page: http://getuikit.com/docs/button.html
But the documentation is entirely missing on how to make the button group actually function like radio buttons in a form. Grateful for advice on this.
Currently if I use them in a form any button clicked submits the form. example form for iphone ordering options:
<form>
<div class="uk-button-group uk-margin-bottom" data-uk-button-radio>
<button class="uk-button uk-button-large">16gb</button>
<button class="uk-button uk-button-large">32gb</button>
<button class="uk-button uk-button-large">64gb</button>
</div>
<div class="uk-button-group uk-margin-bottom" data-uk-button-radio>
<button class="uk-button uk-button-large">Space Gray</button>
<button class="uk-button uk-button-large">Gold</button>
<button class="uk-button uk-button-large">Silver</button>
</div>
<button type="submit" class="uk-button uk-button-large uk-button-primary"><i class="uk-icon-magnifier"></i> Review and Order</button>
</form>
This worked for me:
<div class="uk-button-group" data-uk-button-radio>
<label class="uk-button">
<input type="radio" name="gender" value="0" style="display:none;"/>
Male
</label>
<label class="uk-button">
<input type="radio" name="gender" value="1" style="display:none;"/>
Female
</label>
</div>
Alternatively you could do something like this too:
<div class="uk-button-group" data-uk-button-radio>
<label class="uk-button" for="male">Male</label>
<label class="uk-button" for="female">Female</label>
<input type="radio" id="male" name="gender" value="0" style="display:none;"/>
<input type="radio" id="female" name="gender" value="1" style="display:none;"/>
</div>
Hope it helps.

Categories

Resources