Jquery Generically, show/Hide division within division in Yes/No Radio button - javascript

Basically, I wanted to show/hide the div by clicking Yes/No Radio button. I have also done a sample types in the fiddle link below. I want to make this Generic, like one function can do for all the yes/no questions. and i want to avoid the multiple if condtion in jquery.
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="well well-sm">
<label class="control-label">1) Are you a Student??</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="student" id="studentYes" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="student" id="studentNo" value="no"> No
</label>
</div>
<div id="stdTypes" class="studentsType">
<label class="control-label">1.1) Are you a Graduate Student?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd1" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd2" value="no"> No
</label>
</div>
<div class="departName">
<label class="control-label">1.2) Please Enter your Department?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="well well-sm">
<label class="control-label">2) Are you earning for your living?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="living" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="living" value="no"> No
</label>
</div>
<div class="earning">
<label class="control-label">2.1) How much do you earn?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
My jquery look this.
$('input[name="student"]:radio').change(function () {
var radio_value = ($('input:radio[name="student"]:checked').val());
if (radio_value == 'yes') {
$('.studentsType').slideDown("fast");
}
else if (radio_value == 'no') {
$('.studentsType').slideUp("fast");
}
});
$('input[name="gradstd"]:radio').change(function () {
var radio_value = ($('input:radio[name="gradstd"]:checked').val());
if (radio_value == 'yes') {
$('.departName').slideDown("fast");
}
else if (radio_value == 'no') {
$('.departName').slideUp("fast");
}
});
$('input[name="living"]:radio').change(function () {
var radio_value = ($('input:radio[name="living"]:checked').val());
if (radio_value == 'yes') {
$('.earning').slideDown("fast");
}
else if (radio_value == 'no') {
$('.earning').slideUp("fast");
}
});
Links for Fiddle:
http://jsfiddle.net/mgrgfqfd/
Please help !!


You can use a data attribute in the radio buttons to indicate which DIV should be toggled.
$(':radio[data-rel]').change(function() {
var rel = $("." + $(this).data('rel'));
if ($(this).val() == 'yes') {
rel.slideDown();
} else {
rel.slideUp();
rel.find(":text,select").val("");
rel.find(":radio,:checkbox").prop("checked", false);
}
});
.studentsType,
.departName,
.earning {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="well well-sm">
<label class="control-label">1) Are you a Student??</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="student" id="studentYes" value="yes" data-rel="studentsType">Yes
</label>
<label class="radio-inline">
<input type="radio" name="student" id="studentNo" value="no" data-rel="studentsType">No
</label>
</div>
<div id="stdTypes" class="studentsType">
<label class="control-label">1.1) Are you a Graduate Student?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd1" value="yes" data-rel="departName">Yes
</label>
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd2" value="no" data-rel="departName">No
</label>
</div>
<div class="departName">
<label class="control-label">1.2) Please Enter your Department?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="well well-sm">
<label class="control-label">2) Are you earning for your living?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="living" value="yes" data-rel="earning">Yes
</label>
<label class="radio-inline">
<input type="radio" name="living" value="no" data-rel="earning">No
</label>
</div>
<div class="earning">
<label class="control-label">2.1) How much do you earn?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="panel-footer">Panel footer</div>
</div>
</div>


If you keep this sort of structure it can be achieved with a tiny bit of code:
http://jsfiddle.net/mgrgfqfd/2/
HTML:
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="well well-sm">
<label class="control-label">1) Are you a Student??</label>
<div class="control-group" data-target="gruduate">
<label class="radio-inline">
<input type="radio" name="student" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="student" value="no"> No
</label>
</div>
<div class="optional">
<label class="control-label">1.1) Are you a Graduate Student?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd1" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd2" value="no"> No
</label>
</div>
<div class="optional">
<label class="control-label">1.2) Please Enter your Department?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="well well-sm">
<label class="control-label">2) Are you earning for your living?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="living" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="living" value="no"> No
</label>
</div>
<div class="optional">
<label class="control-label">2.1) How much do you earn?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="panel-footer">Panel footer</div>
</div>
</div>
JS:
$('input:radio').on('change', function() {
$(this).parents('.control-group').next('div.optional').toggle( $(this).val() == 'yes' );
});
Just ensure that your yes/no buttons are within a control-group and you put the optional elements directly after it inside a div with a class of .optional


Below code will find next div and perform sliding in jquery this helps you to avoid multiple redundant lines of code and ifs.
$('input:radio').on('change', function () {//Register change event for all radio button
if ($(this).val() == 'yes') {//check value of selected radio is yes
$(this).parent().parent().next('div').slideDown("fast");
}
else if ($(this).val() == 'no') {//check value of selected radio is no
$(this).parent().parent().next('div').slideUp("fast");
}
});

Related

jQuery: show Div when check first radio button

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>

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 get checkbox value through serializedarray()

how to get checkbox value in array format like [{abc:[1,2,3]}]
now i am getting like [{abc[]:1,abc[]:2,abc[]:3}]...
for getting serializedarray i am using var form = $('.wpc_contact').serializeArray();
here this is my html form which is get generating dynamic (i am using drag and drop for creating dynamic form)
<form method="POST" name="1" class="form-horizontal wpc_contact" novalidate="novalidate">
<fieldset>
<div id="legend" class="">
<legend class="">Demo</legend>
<div id="alert-message" class="alert hidden" style="color: red;"></div>
</div>
<div class="control-group">
<label class="control-label">Checkboxes</label>
<div class="controls" name="wpc_chkbox" req="yes">
<label class="checkbox">
<input type="checkbox" value="Option one" id="wpc_chkbox_0" name="wpc_chkbox[]" req="yes"> Option one
</label>
<label class="checkbox">
<input type="checkbox" value="Option two" id="wpc_chkbox_1" name="wpc_chkbox[]" req="yes"> Option two
</label>
</div>
<p class="help-blocksp" style="display:none;">wpc_chkbox</p>
<p class="help-block1" style="display:none;" checked="checked"></p>
</div>
<div class="control-group">
<label class="control-label">Inline Checkboxes</label>
<div class="controls" name="wpc_inline_chkbox" req="yes">
<label class="checkbox inline">
<input type="checkbox" value="1" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_0" req="yes"> 1
</label>
<label class="checkbox inline">
<input type="checkbox" value="2" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_1" req="yes"> 2
</label>
<label class="checkbox inline">
<input type="checkbox" value="3" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_2" req="yes"> 3
</label>
</div>
<p class="help-block" style="display:none;">wpc_inline_chkbox</p>
<p class="help-block1" style="display:none;" checked="checked"></p>
</div>
<div class="control-group">
<div class="controls">
<button class="btn btn-success">Button</button>
</div>
</div>
</fieldset>

To create an array use this -
var arr = $("input[name='checkboxname[]']:checked").map(function() {
return this.value;
}).get();
Alernate Solution :
<input type="checkbox" class="selector" value="{value}"/> //add as many as you wan't
JS
var checked='';
$('.selector:checked').each(function(){
checked=checked+','+$(this).val();
});
PHP
$ids=explode(',',substr($_GET['param_with_checked_values'],1));

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