How to make button at inline radiobutton aligned? - javascript

I am building a CNN project for spectrogram images. The backend code is already finished, and I was told to make a GUI on HTML. I have this code for user to make a selection on epoch, learning rate, and architecture number.
<style>
label span {
display: inline-block;
margin-left: 10px;
}
</style>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<form action="{{ url_for('usertest') }}" method="post" enctype="multipart/form-data">
<h5>Choose Architecture</h5>
<hr style="width:50%;text-align:left;margin-left:0">
<p>Please choose one of the architecture below.</p>
<p>Note: We recommend you to choose two of our best architecture:</p>
<ol>
<li>Architecture 1, learning rate = 0.0001, epoch = 300</li>
<li>Architecture 4, learning rate = 0.00001, epoch = 300</li>
</ol>
<div class="form-group row">
<label for="input_arch" class="col-xl-2 col-form-label">Choose Architecture Value</label>
<div class="col-lg-10" style="padding-top:8px;">
<label class="radio-inline">
<input type="radio" name="radioarch" value="1"><span>1</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radioarch" value="2"><span>2</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radioarch" value="3"><span>3</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radioarch" value="4"><span>4</span>
</label>
</div>
</div>
<div class="form-group row">
<label for="input_epoch" class="col-md-2 col-form-label">Choose Epoch Value</label>
<div class="col-md-10" style="padding-top:8px;">
<label class="radio-inline">
<input type="radio" name="radioepoch" value="50"><span>50</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radioepoch" value="100"><span>100</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radioepoch" value="150"><span>150</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radioepoch" value="200"><span>200</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radioepoch" value="250"><span>250</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radioepoch" value="300"><span>300</span>
</label>
</div>
</div>
<div class="form-group row">
<label for="input_lr" class="col-xl-2 col-form-label">Choose Learning Rate Value</label>
<div class="col-lg-10" style="padding-top:8px;">
<label class="radio-inline">
<input type="radio" name="radiolr" value="0.001"><span>0.001</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radiolr" value="0.0001"><span>0.0001</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radiolr" value="0.0002"><span>0.0002</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radiolr" value="0.00001"><span>0.00001</span>
</label>
</div>
</div>
</div>
Based on my current output (image is attached below), I find that my radiobutton are not aligned neatly with each other. Is there any way to make the button looks aligned? If I have to add <table> tag, where should it? Or should I just omit the <div> tag and change it into another tag?
This is how my current output looks:
I want the output to look like this (this image is generated by Paint)

You can add a fixed width to each of them. Make sure that the width value considers the maximum text you have inside a radio option.
Alternatively you can consider flex-grid, they're a lot like tables, just that you don't need to add in very much HTML.
.radio-inline {
width: 100px;
}

Related

Angular2 - How can I know which radio button is selected in Angular2 application

I have the next radio buttons in my html:
<div class="col-lg-4" id="radioButtons">
<form action="">
<fieldset id="capacity">
<legend>capacity</legend>
<label for="input-ao"><input size=25 id="input-ao" type="radio" name="capacity" [value]="0-30" checked="checked" />0-30</label>
<label for="input-lo"><input id="input-lo" type="radio" name="capacity" [value]="30-60"/>30-60</label>
<label for="input-lo"><input id="input-lo" type="radio" name="capacity" [value]="60-100"/>60-100</label>
<label for="input-lo"><input id="input-lo" type="radio" name="capacity" [value]="100"/>100+</label>
<br>
</fieldset>
<fieldset id="computerFieldset">
<legend>computer</legend>
<label for="input-ao"><input size=25 id="input-ao" type="radio" name="comp" value="yes" checked="checked" />yes</label>
<label for="input-lo"><input id="input-lo" type="radio" name="comp" value="no"/>no</label>
<br>
</fieldset>
</form>
</div>
I want to know which radio button is selected, also I want to know will it cause a problem that I have a default checked="checked"? Thank you.
You need to add [(ngModel)]="YourVariableFromTsCodeBehindFile" to each radio button of your radio group.
It should look like,
<div class="col-lg-4" id="radioButtons">
<form action="">
<fieldset id="capacity">
<legend>capacity</legend>
<label for="input-ao"><input [(ngModel)]="selectedRadioBtnFrom1stGroup" size=25 type="radio" name="capacity" value="0-30" checked="checked" />0-30</label>
<label for="input-lo"><input [(ngModel)]="selectedRadioBtnFrom1stGroup" type="radio" name="capacity" value="30-60"/>30-60</label>
<label for="input-lo"><input [(ngModel)]="selectedRadioBtnFrom1stGroup" type="radio" name="capacity" value="60-100"/>60-100</label>
<label for="input-lo"><input [(ngModel)]="selectedRadioBtnFrom1stGroup" type="radio" name="capacity" value="100"/>100+</label>
<br>
{{selectedRed}}
</fieldset>
<fieldset id="computerFieldset">
<legend>computer</legend>
<label for="input-ao"><input size=25 [(ngModel)]="selectedRadioBtnFrom2ndGroup" type="radio" name="comp" value="yes" checked="checked" />yes</label>
<label for="input-lo"><input [(ngModel)]="selectedRadioBtnFrom2ndGroup" type="radio" name="comp" value="no"/>no</label>
<br>
{{blue.id}}
</fieldset>
</form>
</div>
Demo: https://stackblitz.com/edit/angular-material-radio-button-demo-ksrxbc?file=app/app.component.html
You could use a changeHandler method, for example - as it is shown in this video:
https://www.youtube.com/watch?v=Wo9nfK2fEyw
Example:
<label for="input-ao"><input size=25 id="input-ao" type="radio" name="capacity" [value]="0-30" checked="checked" (change)="radioChangeHandler($event)" />0-30</label>
radioChangeHandler(event: any){
this.selectedRadioButton = event.target.value;
}
You can make a function called radioChanged()
And within this function you can console the value of the selected radio input
radioChange(event: any){console.log(event.target.value)}
Its just an idea. Because i have no laptop right now..
If you do not understand the concept let me know i will edit the answer

Radio button is not getting checked in angular 2

I have created two radio button for gender, I want to display radio button checked that was previously selected.
I have added below code in Template
<div class="form-group">
<label>Gender</label>
<div id="input-type">
<label class="radio-inline">
<input type="radio" formControlName="gender" [name]="'gender'" [value]="'male'"/> Male
</label>
<label class="radio-inline">
<input type="radio" formControlName="gender" [name]="'gender'" [value]="'female'"/> Female
</label>
</div>
</div>
I have added below code in Component.
console.log(this.gender); // I am getting 'male' here.
this.editProfile = new FormGroup({
gender: new FormControl(this.gender || null)
});
Other value of the form is getting displayed but radio button is not getting checked.
You can write it like
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
<label class="radio-inline">
<input type="radio" formControlName="gender" [name]="'gender'" [value]="'male'"/> Male
</label>
<label class="radio-inline">
<input type="radio" formControlName="gender" [name]="'gender'" [value]="'female'"/> Female
</label>
<button type="submit" [disabled]="form.invalid">Submit</button>
{{form.value|json}}
</form>
It should work for you
Find a PLUNK here
I have found other solution. We can use below code
<div class="form-group">
<label>Gender</label>
<div id="input-type">
<label class="radio-inline">
<input type="radio" [checked]="editProfile.value.gender == 'male'" formControlName="gender" value="male"/> Male
</label>
<label class="radio-inline">
<input type="radio" [checked]="editProfile.value.gender == 'female'" formControlName="gender" value="female"/> Female
</label>
</div>
</div>
As you are using Reactive Forms you can omit name attribute on input and because you are setting string value to input so you have to use value="male" instead of [value]="'male'".
<div class="form-group">
<label>Gender</label>
<div id="input-type">
<label class="radio-inline">
<input type="radio" formControlName="gender" value="male"/> Male
</label>
<label class="radio-inline">
<input type="radio" formControlName="gender" value="female"/> Female
</label>
</div>
</div>

Why my numbers are not updating by themselves?

So, I am using the jquery-calx to calculate the price of some items. I have a different price depending on the base choise and the quantity. If the user chooses a 100 peaces of a full color base the price is different from 100 pieces of a One Side Monochromatic pattern. This is all working in my code, but there is a thing; If I choose One Side Monochromatic and them 100 pieces, the price in Total area is ok, but if I change the base to Full Color, for example, the price doesn't update. In this case, if I click again in the quantity the price does update. I would like to know if it is possible to make that update smoothly. Maybe create a button to update, I don't know. Would appreciate the help! Below Follows my code:
<form class="form-horizontal" id="meishi" data-calx-identifier="CALX1452836013763">
<div class="form-group">
<label class="col-lg-1 topic text-left">Base</label>
<div class="col-lg-2">
<label class="radio-inline">
<input type="radio" name="design" data-cell="A1" value="10800">One Side Monochromatic
</label>
</div>
<div class="col-lg-3">
<label class="radio-inline">
<input type="radio" name="design" data-cell="B1" value="14040">One Side Color
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input type="radio" name="design" data-cell="C1" value="16200">Full Color
</label>
</div>
<div class="col-lg-2 col-lg-offset-2 text-right">
<label data-cell="F1" data-formula="SUM(A1:C1)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Quantity</label>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuA" type="radio" name="quantity" data-cell="A3" value="">100
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuB" type="radio" name="quantity" data-cell="B3" value="">200
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuC" type="radio" name="quantity" data-cell="C3" value="">300
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuuD" type="radio" name="quantity" data-cell="D3" value="">400
</label>
</div>
<div class="col-lg-1">
<label class="radio-inline">
<input class="maisuuE" type="radio" name="quantity" data-cell="E3" value="">500
</label>
</div>
<div class="col-lg-2 text-right">
<label data-cell="F3" data-formula="SUM(A3:E3)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Total</label>
<div class="col-lg-3 text-right col-lg-offset-8">
<label data-cell="F6" data-format="$ 0,0" data-formula="SUM(F1:F5)">$ 0</label>
</div>
</div>
</form>
Script:
$('#meishi').calx();
$('input:radio[name="design"]').change(
function() {
if ($(this).is(':checked') && $(this).val() == '10800') {
$('.maisuuA').val('2160');
$('.maisuuB').val('2484');
$('.maisuuC').val('3132');
$('.maisuuD').val('2808');
$('.maisuuE').val('3456');
} else if ($(this).is(':checked') && $(this).val() == '14040') {
$('.maisuuA').val('2808');
$('.maisuuB').val('3132');
$('.maisuuC').val('3780');
$('.maisuuD').val('3456');
$('.maisuuE').val('4104');
} else if ($(this).is(':checked') && $(this).val() == '16200') {
$('.maisuuA').val('3240');
$('.maisuuB').val('3564');
$('.maisuuC').val('4212');
$('.maisuuD').val('3888');
$('.maisuuE').val('4536');
}
});
Thank you!
I've never used jquery-calx but it really isnt necessary for something like this. If it were me, I'd do it like this:
store an array of values on the design inputs
give all of the inputs a class of update
when a any input is changed, get the array from the selected design input and the index of the selected "maisuu" input tells us which value to use from that stored array
get the quantity from the value of the selected "maisuu" elemet
do your math and set the total
Like this:
*Note that you may need to tweak the math, not 100% sure the calculations are what you intended. Also, if you insist, I'm sure you could merge this technique with the use of jquery-calx
Here's a jsFiddle with comments explaining the code
$('.update').change(function() {
var $design = $('input[name="design"]:checked');
var $maisuu = $('input.maisuu:checked');
var curMaisuu =$('.maisuu').index($maisuu);
var maisuuArr =$.map($design.data('values').split(','), function(e, i) {
return Number(e);
});
var base = $design.val() * 1000;
var upcharge = maisuuArr[curMaisuu] * 1000
var qty = $maisuu.val();
var cost = ((base + upcharge)* qty ) / 1000
if (base && qty) $('#total').text('$' + cost.toFixed(2))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form class="form-horizontal" id="meishi" data-calx-identifier="CALX1452836013763">
<div class="form-group">
<label class="col-lg-1 topic text-left">Base</label>
<div class="col-lg-2">
<label class="radio-inline">
<input class="update" type="radio" name="design" data-cell="A1" value="108.00" data-values="21.60,24.84,31.32,28.08,34.56">One Side Monochromatic
</label>
</div>
<div class="col-lg-3">
<label class="radio-inline">
<input class="update" type="radio" name="design" data-cell="B1" value="140.40" data-values="28.08,31.32,37.80,34.56,41.04">One Side Color
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="update" type="radio" name="design" data-cell="C1" value="162.00" data-values="32.40,35.64,42.12,38.88,45.36">Full Color
</label>
</div>
<div class="col-lg-2 col-lg-offset-2 text-right">
<label data-cell="F1" data-formula="SUM(A1:C1)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Quantity</label>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="A3" value="100">100
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="B3" value="200">200
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="C3" value="300">300
</label>
</div>
<div class="col-lg-2">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="D3" value="400">400
</label>
</div>
<div class="col-lg-1">
<label class="radio-inline">
<input class="maisuu update" type="radio" name="quantity" data-cell="E3" value="500">500
</label>
</div>
<div class="col-lg-2 text-right">
<label data-cell="F3" data-formula="SUM(A3:E3)" data-format="$ 0,0"></label>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 topic text-left">Total</label>
<div class="col-lg-3 text-right col-lg-offset-8">
<label id="total">$ 0</label>
</div>
</div>
</form>

Make Text Bolder By selecting radio button

I m new to jquery,I am supposed to do the simple task.If i click on the radio button means the text along with that radio button has to be bolded.please help me with this one.My HTML Markup is here
<form role="form">
<p><b>What concerns you most as you manage your business?</b>(Select all that apply.)</p>
<div class="radio active">
<label>
<input type="radio" name="optradio">IT infrastructure alignment with business goals and growth<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Controlling capital and expense<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Managing financial risk<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Data security and privacy<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Flexibility of services to meet customer needs<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Political climate for business<img /></label>
</div>
<div class="form-group radio">
<label>
<input type="radio" name="optradio">
</label>
<textarea class="form-control" rows="2" placeholder="Other(please specify)" id="comment"></textarea>
</div>
</form>
And my jquery code is here
$(document).ready(function(e) {
$(".radio label input").click(function() {
$('.radio').each(function(event) {
if ($(this).hasClass('active')) {
$(this).css("font-family", "helveticabold");
$('.radio').removeClass('active');
if ($(this).next().hasClass('radio'))
$(this).next().addClass('active');
else
$('.radio:last-child').addClass('active');
return false;
}
});
});
});
I know it needs small changes in code please help me out guys
You don't need to use each as only one radio can be selected.
This will do:
Javascript:
$('.radio').on('click', function() {
$('.bold').removeClass('bold');
$(this).addClass('bold');
});
CSS:
.bold {
font-weight: 800;
}
Demo: https://jsfiddle.net/tusharj/3zzaLre0/
You can use $(this) selector for that
$(document).ready(function(e) {
$("input[type='radio']").click(function() {
$("input[type='radio']").parent().css('font-weight','');
$(this).parent().css('font-weight','bold');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form role="form">
<p><b>What concerns you most as you manage your business?</b>(Select all that apply.)</p>
<div class="radio active">
<label><input type="radio" name="optradio"><span>IT infrastructure alignment with business goals and growth<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Controlling capital and expense<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Managing financial risk<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Data security and privacy<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Flexibility of services to meet customer needs<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Political climate for business<img /></label>
</div>
<div class="form-group radio">
<label><input type="radio" name="optradio"></label><span>
<textarea class="form-control" rows="2" placeholder="Other(please specify)" id="comment"></textarea>
</div>
</form>

How to make Input text inline with Radio Button in Button

i am new to bootstrap building a web page .my code segment of HTML page is
<form class="form-horizontal">
<div class="control-group">
<p>Create a promo code</p>
</div>
<div class="control-group">
<div> Promo description * </div>
<div class="controls">
<textarea rows="3"></textarea>
</div>
</div>
<div class="control-group">
<div>Promo Type</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked></input>
Instant Discount
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"></input>
Cash back
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionRadios3" value="option3"> </input>
Other Gratification
</label>
</div>
</div>
<div class="control-group">
<div> Promo Value * </div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="optionsRadios1" id="optionsRadios4" value="option1" checked></input>
Percentage
<label for="hello" class="inline">Upper Limit</label>
<input id="hello" type="text" class="inline" placeholder="Text input">
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios1" id="optionRadios6" value="option3"> </input>
Fixed Amount
</label>
</div>
</div>
</form>
a screen shot of page generated by this code is
as you can see percentage radio button and Upperlimit label and text input are not inline to each other .i want to make them inline.can any one please help how to accomplish this ??
Update
i tried the suggestion in the comment this time my html segment is
<form class="form-horizontal">
<div class="control-group">
<p>Create a promo code</p>
</div>
<div class="control-group">
<div> Promo description * </div>
<div class="controls">
<textarea rows="3"></textarea>
</div>
</div>
<div class="control-group">
<div>Promo Type</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked></input>
Instant Discount
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"></input>
Cash back
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionRadios3" value="option3"> </input>
Other Gratification
</label>
</div>
</div>
<div class="control-group">
<div> Promo Value * </div>
<div class="controls">
<label class="radio inline" id="label1">
<input type="radio" name="optionsRadios1" id="optionsRadios4" value="option1" checked></input>
Percentage
</label>
<label for="hello" class="inline" id="label2">Upper Limit
<input id="hello" type="text" class="inline" placeholder="Text input">
</label>
<label class="radio inline" id="label3" >
<input type="radio" name="optionsRadios1" id="optionRadios6" value="option3"> </input>
Fixed Amount
</label>
</div>
</div>
<div class="control-group">
<div> Promo-code usage count *
</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="optionsRadios2" id="optionsRadios5" value="option1" checked></input>
Unlimited
<label for="hello1" class="inline">Limited
<input id="hello" type="radio" class="radio inline">
</label>
<input id="hello" type="text" class="inline">
</div>
</div>
</form>
and main.css is
#hello,#optionsRadios4#optionRadios6#label1#label2#label3 {
display: inline-block; float: left;
}
and i am getting the screen shot and it is not the expected any other suggestions ??
Does this JSBin look like what you want?

Categories

Resources