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>
Related
In my code I use a bootstrap accordion for extra option. When click start, I want to collapse (close) it. I tried
$('#accordion2').collapse({
hide: true
});
But the accordion close and then reopen. A second click do not do anything more. What I miss here? As written in the Bootstrap documentation I use the data-parent to close it.
The code is:
<div id="accordion2" style="width:802px;">
<div class="card">
<div class="card-header" id="headingImgOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseImgOne" aria-expanded="true" aria-controls="collapseImgOne">
Testrun Optionen
</button>
</h5>
</div>
<div id="collapseImgOne" class="collapse" aria-labelledby="headingImgOne" data-parent="#accordion2">
<div class="card-body">
<div class="form-group row">
<label for="text" class="col-4 col-form-label">Server</label>
<div class="col-7">
<div class="input-group">
<div class="form-check">
<label>
<input type="checkbox" name="c06" id="c06" checked> <span class="label-text">c06</span>
</label>
<label>
<input type="checkbox" name="c07" id="c07" checked> <span class="label-text">c07</span>
</label>
<label>
<input type="checkbox" name="c08" id="c08" checked> <span class="label-text">c08</span>
</label>
<label>
<input type="checkbox" name="c09" id="c09"> <span class="label-text">c09</span>
</label>
<label>
<input type="checkbox" name="c10" id="c10"> <span class="label-text">c10</span>
</label>
<label>
<input type="checkbox" name="c11" id="c11"> <span class="label-text">c11</span>
</label>
<label>
<input type="checkbox" name="c12" id="c12"> <span class="label-text">c12</span>
</label>
<label>
<input type="checkbox" name="c13" id="c13"> <span class="label-text">c13</span>
</label>
<label>
<input type="checkbox" name="c14" id="c14"> <span class="label-text">c14</span>
</label>
<label>
<input type="checkbox" name="c15" id="c15"> <span class="label-text">c15</span>
</label>
<label>
<input type="checkbox" name="c16" id="c16"> <span class="label-text">c16</span>
</label>
<label>
<input type="checkbox" name="c17" id="c17"> <span class="label-text">c17</span>
</label>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="select" class="col-4 col-form-label">Server Domain</label>
<div class="col-7">
<select id="imgdomain" name="select" class="custom-select">
<option value="domain.com" selected>domain.com</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<br/>
In the example below, I'm trying to show a specific div only when i check the radio button "yes".
It's ok for one div but when I try to do this for two separate panes, checking the second radio button also expands the first field.
How can I fold/unfold each container separately?
https://jsfiddle.net/vsf7mph8/3/
$('.row .otherRowinput').hide();
$('[type=radio]').on('change', function () {
if($('.form-radio input:nth-child(1)').val() == $(this).val() ||$('.form-radio input:nth-child(2)').val() == $(this).val())
$('.otherRowinput').toggle('fast');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="one">question A</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="one" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="one">
<i class="helper"></i>no
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control">
</textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="two">question B</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="two" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="two">
<i class="helper"></i>two
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control" required></textarea>
</div>
</div>
</div>
Your mistake is that $('.otherRowinput').toggle('fast'); applies to all text fields. However, you only want to apply it to the nearest text field.
For this, don't use the $(selector) function which applies to all objects in the DOM, but traverse the DOM starting from the checkbox that was modified. Starting from the currently checked box, traverse the DOM upwards until you find a common parent of the checkbox and the textarea, then traverse it downwards to the text area and toggle that.
You find the parent that includes both the checkbox and the text field with $(this).closest(selector). Then, starting from that parent object, select the text area that is a child of that element using find(selector). In total:
$(this).closest(".row").find(".otherRowinput").toggle('fast');
Below is your updated example.
$('.row .otherRowinput').hide();
$('[type=radio]').on('change', function () {
if($('.form-radio input:nth-child(1)').val() == $(this).val() ||
$('.form-radio input:nth-child(2)').val() == $(this).val()){
$(this).closest(".row").find(".otherRowinput").toggle('fast');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="one">question A</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="one" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="one">
<i class="helper"></i>no
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control">
</textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="two">question B</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="two" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="two">
<i class="helper"></i>two
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control" required></textarea>
</div>
</div>
</div>
I am using an accordion angularjs library. It has transclude:true on it.
I have a scope variable that I display using the interpolation {{variable}}. When I click on the radio buttons, the value it displays is supposed to change.
I set a default radio button and default variable value on load. But it does not show the respective values in the interpolation when I click on other radio buttons.
This worked before using it with the library. I read that transclude creates a new scope.
How do I make this work?
<collapsible-item item-title="Configure Maintenance Bill">
<div class="col-md-3">
<!-- Group of material radios - option 1 -->
<div class="form-check">
<input type="radio" class="form-check-input" id="x" name="groupOfMaterialRadios" ng-checked="maintenance_bill_rate_type ==='3' && maintenance_bill_rate_type==='4'"
ng-model="type" value="expense" ng-change="setCorpusFundDetFn('expense')">
<label class="form-check-label" for="materialGroupExample1">Expenses</label>
</div>
</div>
<div class="row">
<div class="col-md-3">
<label>
<input type="radio" name="optradio" ng-model="maintenance_bill_rate_type" ng-disabled="type!='expense'"
value="3" ng-change="setCorpusFundDetFn()">
</label>
<span class="align-middle">Per Flat</span>
</div>
<div class="col-md-3">
<label>
<input type="radio" name="optradio" ng-model="maintenance_bill_rate_type" value="4" ng-disabled="type!='expense'"
ng-change="setCorpusFundDetFn()">
</label>
<span class="align-middle">Per Sqft</span>
</div>
<div class="col-md-4">
<div ng-class="{'has-error': maintenanceBillForm.corpusFundnm.$invalid && maintenanceBillForm.$submitted}">
<div class="input-group mb-3">
<input type="text" class="form-control" ng-model="carpus_fund" ng-pattern="/^(\d)+$/" placeholder="Enter Corpus Fund"
aria-describedby="basic-addon2 " name="corpusFundnm" required >
<div class="input-group-addon">
<span class="input-group-text" id="basic-addon3">{{corpusFundDet || 'wt'}}</span>
</div>
</div>
</div>
</div>
</div>
<collapsible-item>
I have a form which is in many tabs like tab1, tab2, tab3. It just bunch of inputs form. I want to submit all the form content as one. But the problem is my second tab is starting from where the first form stops. So I have huge black space at top of second tab. I have attached the JSfiddle link below. Let me know if you have any questions.
<div class="col-sm-12">
<h1>
My Heading
</h1>
<div class="panel panel-default">
<ul class="nav nav-tabs">
<li class="active">Info 1</li>
<li class="">Info 2</li>
</ul>
<div class="panel-body no-padding">
<div class="tab-content">
<form action="ACTION URL" method="PUT" id="idforthis" class="smart-form" novalidate="novalidate">
<div id="info1" class="tab-pane fade active in">
<fieldset>
<div class="col col-sm-4">
<section>
<label class="input">Name
<input type="text" name="name" value="">
</label>
</section>
<section>
<label class="input">Age
<input type="text" name="" value="">
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">Sex
<input type="text" name="address1" value="">
</label>
</section>
<section>
<label class="input">Location
<input type="text" name="address2" value="">
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">City
<input type="text" name="city" value="">
</label>
</section>
<section>
<label class="input">State
<input type="text" name="state" value="">
</label>
</section>
</div>
</fieldset>
</div>
<div id="info2" class="tab-pane fade">
<fieldset>
<div class="col col-sm-4">
<section>
<label class="input">Input 1 tab 2
<input type="text"/>
</label>
</section>
<section>
<label class="input">Input 2 tab 2
<input type="text"/>
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">Input 3 tab 2
<input type="text"/>
</label>
</section>
<section>
<label class="input">Input 3 tab 2
<input type="text"/>
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">Input 4 tab 2
<input type="text"/>
</label>
</section>
<section>
<label class="input">Last Input
<input type="text"/>
</label>
</section>
</div>
</fieldset>
</div>
<footer>
<button type="submit" class="btn btn-primary">Submit</button>
</footer>
</form>
</div>
</div>
</div>
JSFiddle for Bootstrap tab form
Here the problem is with the css. In bootstrap the css for tab is written as
.tab-content > .tab-pane {
display: none;
}
.tab-content > .active {
display: block;
}
here .tab-pane should be direct child (In your case it is form)
Inorder to solve you issue You should change ur css in bootstrap or you have to write in your custom.css like below :
.tab-content .tab-pane {
display: none;
}
.tab-content .active {
display: block;
}
The issue is caused by your use of fade and in on the tab-panes.
If you remove those and also reposition your form tag so that it is not an element inside tab-content then I think this is the result you are looking for.
<div class="panel panel-default">
<ul class="nav nav-tabs">
<li class="active">Info 1</li>
<li class="">Info 2</li>
</ul>
<div class="panel-body no-padding">
<form action="ACTION URL" method="PUT" id="idforthis" class="smart-form" novalidate="novalidate">
<div class="tab-content">
<div id="info1" class="tab-pane active">
<fieldset>
<div class="col col-sm-4">
<section>
<label class="input">Name
<input type="text" name="name" value="">
</label>
</section>
<section>
<label class="input">Age
<input type="text" name="" value="">
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">Sex
<input type="text" name="address1" value="">
</label>
</section>
<section>
<label class="input">Location
<input type="text" name="address2" value="">
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">City
<input type="text" name="city" value="">
</label>
</section>
<section>
<label class="input">State
<input type="text" name="state" value="">
</label>
</section>
</div>
</fieldset>
</div>
<div id="info2" class="tab-pane">
<fieldset>
<div class="col col-sm-4">
<section>
<label class="input">Input 1 tab 2
<input type="text"/>
</label>
</section>
<section>
<label class="input">Input 2 tab 2
<input type="text"/>
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">Input 3 tab 2
<input type="text"/>
</label>
</section>
<section>
<label class="input">Input 3 tab 2
<input type="text"/>
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">Input 4 tab 2
<input type="text"/>
</label>
</section>
<section>
<label class="input">Last Input
<input type="text"/>
</label>
</section>
</div>
</fieldset>
</div>
<footer>
<button type="submit" class="btn btn-primary">Submit</button>
</footer>
</div>
</form>
</div>
</div>
Updated JSFiddle
The content of tab1 is actually in tab2, it's just invisible - as you probably know from your question. On tab1, the content of tab2 is there too - meaning, you can see the space for it at the bottom.
Are you using the Javascript library needed for this to work?
https://getbootstrap.com/docs/3.3/components/
Using navs for tab panels requires JavaScript tabs plugin For tabs
with tabbable areas, you must use the tabs JavaScript plugin. The
markup will also require additional role and ARIA attributes – see the
plugin's example markup for further details.
and that links to: https://getbootstrap.com/docs/3.3/javascript/#tabs
Are you customizing any CSS or following Bootstrap to the T to test this?
I have an asp core form that transfers data to my "Create" action. I have inputs with "asp-for" attribute to initialize specific columns in my db and i have a "Content" column which i want to initialize by fetching innerText from element. So how can i send innerText at the time when i submit form and to send it all together to the action? And is it possible to create custom asp core tag that would fetch innerText? Thanks.
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="row">
<div class="container">
<div class="row" id="preview">
<div id="result">
</div>
<div class="settings">
<label><input type="button" id="myBtn" />Додати кнопку</label>
#Html.Partial("_ModalBoxPartial")
<label><input type="checkbox" checked="checked" id="auto-generate" />Auto-generate</label>
<label><input type="checkbox" checked="checked" id="save-as-practice" />Save for practice</label>
</div>
</div>
<div class="row">
<div class="col-md-12" id="editor-wrapper" style="background-
color:pink;">
</div>
</div>
<div class="col-md-4">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="text" id="" name="module" />
<div class="form-group">
<div class="col-md-10">
<textarea id="translation" name="translation"></textarea>
</div>
</div>
<div class="form-group">
<label asp-for="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="KeyWords" class="control-label"></label>
<input asp-for="KeyWords" class="form-control" />
<span asp-validation-for="KeyWords" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CategoryId" class="control-label"></label>
<select asp-for="CategoryId" class="form-control" asp-items="ViewBag.CategoryId"></select>
</div>
<div class="form-group">
<label asp-for="ShowCaseText" class="control-label"></label>
<input asp-for="ShowCaseText" class="form-control" />
<span asp-validation-for="ShowCaseText" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ExprId" class="control-label"></label>
<select asp-for="ExprId" class="form-control" asp-items="ViewBag.ExprId"></select>
</div>
<div class="form-group">
<label asp-for="Image" class="control-label"></label>
<input asp-for="Image" class="form-control" />
<span asp-validation-for="Image" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" id="submitBtn" />
</div>
</div>
</div>
ASP.NET MVC, and I could say most MVCs frameworks, performs post using HTTP Posts (I know it sounds redundant). It means that it will only post values from enabled input elements. So, from the browser point of view, your div is not different from any other div.
One possible solution is just adding a hidden input with that very same value:
<input asp-for="Foo" class="form-control" type="hidden" />