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?
Related
I have created one HTML/JS application in which i have created 5 questions with radio button answer.i have given user to do click NA for not applicable questions.but i want to put condition that user only able to grey out 3 questions.Not more than that here i am confused how to do it.below is the code.Also i have put Next button with condition so each question which is not grey out should be answer :-
HTML :-
<div class="section-1-questions">
<div style="background-color:greenyellow;"> <b>Section 1:</b> </div><br>
<fieldset class="form-group">
<div class="row1">
<div class = "question1">
<legend id="q1" class="col-form-label col-sm-8 pt-0"><b>1) Question 1</b></legend>
<div class="col-sm-10">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios1" value="1" >
<label class="form-check-label" for="gridRadios1">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios2" value="2">
<label class="form-check-label" for="gridRadios2">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios3" value="3">
<label class="form-check-label" for="gridRadios3">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios4" value="4">
<label class="form-check-label" for="gridRadios4">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios5" value="5">
<label class="form-check-label" for="gridRadios5">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q1Remark" value="Remark" onclick="onButtonClick(1)" />
<input class="hide" type="text" id="textInput1" value="" oninput="updateTextBox()" />
<p>Remaining Characters: <span id="chars-left">100</span></p>
</div>
<div class="form-group">
<input type="button" name="disable1" id = "na1" value="N/A"/>
</div>
</div></div>
</div>
{{!-- <input type="button" id="remarks" value="Remarks" /> --}}
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q2" class="col-form-label col-sm-8 pt-3"><b>2) Question 2</b></legend>
<div class="col-sm-10">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios6" value="1">
<label class="form-check-label" for="gridRadios6">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios7" value="2">
<label class="form-check-label" for="gridRadios7">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios8" value="3">
<label class="form-check-label" for="gridRadios8">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios9" value="4">
<label class="form-check-label" for="gridRadios9">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios10" value="5">
<label class="form-check-label" for="gridRadios10">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q2Remark" value="Remark" onclick="onButtonClick(2)" />
<input class="hide" type="text" id="textInput2" value="" />
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q3" class="col-form-label col-sm-8 pt-3"><b>3) Question 3</b></legend>
<div class="col-sm-10">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios11" value="1">
<label class="form-check-label" for="gridRadios11">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input " type="radio" name="question3" id="gridRadios12" value="2">
<label class="form-check-label" for="gridRadios12">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios13" value="3">
<label class="form-check-label" for="gridRadios13">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios14" value="4">
<label class="form-check-label" for="gridRadios14">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios15" value="5">
<label class="form-check-label" for="gridRadios15">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q3Remark" value="Remark" onclick="onButtonClick(3)" />
<input class="hide" type="text" id="textInput3" value="" />
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q4" class="col-form-label col-sm-8 pt-3"><b>4) Question 4</b></legend>
<div class="col-sm-10">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios16" value="1">
<label class="form-check-label" for="gridRadios16">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios17" value="2">
<label class="form-check-label" for="gridRadios17">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios18" value="3">
<label class="form-check-label" for="gridRadios18">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios19" value="4">
<label class="form-check-label" for="gridRadios19">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios20" value="5">
<label class="form-check-label" for="gridRadios20">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q4Remark" value="Remark" onclick="onButtonClick(4)" />
<input class="hide" type="text" id="textInput4" value="" />
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q5" class="col-form-label col-sm-8 pt-3"><b>5) QUESTION 5</b></legend>
<div class="col-sm-10">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios21" value="1">
<label class="form-check-label" for="gridRadios21">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios22" value="2">
<label class="form-check-label" for="gridRadios22">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios23" value="3">
<label class="form-check-label" for="gridRadios23">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios24" value="4">
<label class="form-check-label" for="gridRadios24">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios25" value="5">
<label class="form-check-label" for="gridRadios25">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q5Remark" value="Remark" onclick="onButtonClick(5)" />
<input class="hide" type="text" id="textInput5" value="" />
</div>
</div>
</div>
</fieldset>
<div class="form-group">
<label for="remarks"><b>Remarks / Observations </b></label>
<input type="name" class="form-control" name="Remarks1" id="remarks1" aria-describedby="nameHelp" placeholder="Please enter your Remarks / Observations">
<small id="nameHelp" class="form-text text-muted">Please enter your Remarks / Observations about these questions.</small>
</div>
</div>
<br>
<a class="btn btn-primary btnPrevious" >Previous</a>
<a class="btn btn-primary btnNextS1" >Next</a>
</div>
JS :-
$(document).ready(function () {
$("#na1").click(function() {
console.log("na is working");
$(".question1 input").attr('disabled', true);
})
});
$('.btnNextS1').click(function(){
if($('div.row1:not(:has(:radio:checked))').length){
$('div.row1:not(:has(:radio:checked))').parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please Answer this question</div>");
}else {
// e.stopPropagation();
$('ul.nav-tabs li.nav-item a.active').closest('li').next('li').find('a').trigger('click');
}});
As each question has identical information, why not do it once and repeat.
For the NA button, we just add a class onto the enclosing div which helps us with styling and also gives us a selector to test for legnth. When it's over 3 we prevent it from continuing.
Sorry I changed the code, but hopefully this will give you some insight on how to make your code more lean, managable and responsive. Now if you want to update the answers, you can do it once and it works for them all.
$(document).ready(function() {
let ctr = 1;
$('.answers').each(function(index) {
let i = index + 1
let html = ` <div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="1">
<label class="form-check-label" for="gridRadios${ctr}"> Never</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="2">
<label class="form-check-label" for="gridRadios${ctr}">Rarely</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="3">
<label class="form-check-label" for="gridRadios${ctr}">Occasionally</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="4">
<label class="form-check-label" for="gridRadios${ctr}">Often</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="5">
<label class="form-check-label" for="gridRadios${ctr}">Always</label>
</div>
<div class="form-group">
<input type="button" name="q${i}Remark" value="Remark" onclick="onButtonClick(${i})" />
<input class="hide" type="text" id="textInput${i}" value="" oninput="updateTextBox()" />
<p>Remaining Characters: <span id="chars-left">100</span></p>
</div>
<div class="form-group">
<button name="disable${i}" id="na${i}" class='btn-na'>N/A</button>
</div>
`
$(this).html(html);
ctr++;
})
$(".btn-na").click(function() {
let n = $('.answers.disabled').length
if (n >= 3) {
alert('You can only disable 3');
return
}
$(this).closest('.answers').find("input").attr('disabled', true);
$(this).closest('.answers').addClass('disabled')
})
});
$('.btnNextS1').click(function() {
if ($('div.row1:not(:has(:radio:checked))').length) {
$('div.row1:not(:has(:radio:checked))').parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please Answer this question</div>");
} else {
// e.stopPropagation();
$('ul.nav-tabs li.nav-item a.active').closest('li').next('li').find('a').trigger('click');
}
});
.answers.disabled {
opacity: .5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-1-questions">
<div style="background-color:greenyellow;"> <b>Section 1:</b> </div><br>
<fieldset class="form-group">
<div class="row1">
<div class="question1">
<legend id="q1" class="col-form-label col-sm-8 pt-0"><b>1) Question 1</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q2" class="col-form-label col-sm-8 pt-3"><b>2) Question 2</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q3" class="col-form-label col-sm-8 pt-3"><b>3) Question 3</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q4" class="col-form-label col-sm-8 pt-3"><b>4) Question 4</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q5" class="col-form-label col-sm-8 pt-3"><b>5) QUESTION 5</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</fieldset>
<div class="form-group">
<label for="remarks"><b>Remarks / Observations </b></label>
<input type="name" class="form-control" name="Remarks1" id="remarks1" aria-describedby="nameHelp" placeholder="Please enter your Remarks / Observations">
<small id="nameHelp" class="form-text text-muted">Please enter your Remarks / Observations about these questions.</small>
</div>
</div>
<br>
<a class="btn btn-primary btnPrevious">Previous</a>
<a class="btn btn-primary btnNextS1">Next</a>
</div>
You want to use the disabled html attribute along with the jquery prop function.
$(".class").prop( "disabled", true );
It's important to note that using disabled and required on the same element can cause problems for users. This is because they won't be able to submit the form because a input is disabled, preventing input, but it's also required.
EDIT
You'll want to define a "counter" variable var disableCount = 0; which will increment every time a question is disabled. Once the counter variable is incremented three times. The click function should 1 Stop incrementing the counter and 2 stop disabling questions.
Something like this should work:
var disableCount = 0;
$("#na1").click(function() {
if(disableCount >= 3) return;
console.log("na is working");
$(".question1 input").attr('disabled', true);
disableCount++;
});
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;
}
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");
}
});
<div id="1" style="display:block">
<div class="radio">
<label><input type="radio" name="o1"> <input type="text" class="form-control" id="opt1"></label>
</div>
<div class="radio">
<label><input type="radio" name="o2"><input type="text" class="form-control" id="opt2"></label>
</div>
<div class="radio">
<label><input type="radio" name="o3"><input type="text" class="form-control" id="opt3"></label>
</div>
<div class="radio">
<label><input type="radio" name="o4"><input type="text" class="form-control" id="opt4"></label>
</div>
</div>
At the moment, it appears to the left of the screen. Please have a look. Thank you.
Try adding some CSS code
#mydiv{
text-align:center
}
<div id="mydiv">
<div class="radio">
<label><input type="radio" name="o1"><input type="text" class="form-control" id="opt1"></label>
</div>
<div class="radio">
<label><input type="radio" name="o2"><input type="text" class="form-control" id="opt2"></label>
</div>
<div class="radio">
<label><input type="radio" name="o3"><input type="text" class="form-control" id="opt3"></label>
</div>
<div class="radio">
<label><input type="radio" name="o4"><input type="text" class="form-control" id="opt4"></label>
</div>
</div>
First of all, if you want to center the div with id='1', it needs a parent element
HTML
<div id='parent'>
<div id="myDiv" style="display:block">
<div class="radio">
<label>
<input type="radio" name="o1">
<input type="text" class="form-control" id="opt1">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o2">
<input type="text" class="form-control" id="opt2">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o3">
<input type="text" class="form-control" id="opt3">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o4">
<input type="text" class="form-control" id="opt4">
</label>
</div>
</div>
</div>
CSS
#parent {
display: flex;
justify-content: center;
}
jsfiddle https://jsfiddle.net/g8oLjnus/
learn more about flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
if you use one of the following you can use it to centre it 50% will put the start of text or input box. px means you have to aline manually. insert this into or the css file under #mydiv. to do this change your id to mydiv or something else.
left:50px;
left:50%
I've changed the id to myid; and added a parent div
<div class="parent">
<div id="myid" style="display:block">
<div class="radio">
<label><input type="radio" name="o1"> <input type="text" class="form- control" id="opt1"></label>
</div>
<div class="radio">
<label><input type="radio" name="o2"><input type="text" class="form-control" id="opt2"></label>
</div>
<div class="radio">
<label><input type="radio" name="o3"><input type="text" class="form-control" id="opt3"></label>
</div>
<div class="radio">
<label><input type="radio" name="o4"><input type="text" class="form-control" id="opt4"></label>
</div>
</div>
</div>
The .parent class must be:
.parent{position: relative;}
And the #myid must be
#myid{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Hope is works :)
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));