How to get checkbox value through serializedarray() - javascript

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));

Related

dynamic form using javascript

I am trying to create a form similar to the image attached below, how "add the question" can be done using javascript? and I am trying to use express(nodejs framework).
Now if user clicks add question option then a similar form could be attached multiple times.
<h1>Create</h1>
<div class="main">
<form action="/handle" method="post">
<div class="option">
<label for="topic">Topic</label>
<input type="text" id="topic" name="topicname" required>
</div>
<div class="option">
<label for="question">Enter your question:</label>
<input type="text" id="question" name="questioninput" required>
</div>
<div class="option">
<label for="option1">option 1:</label>
<input type="text" id="option1" name="option1input" required>
</div>
<div class="option">
<label for="option2">option 2:</label>
<input type="text" id="option2" name="option2input" required>
</div>
<div class="option">
<label for="option3">option 3:</label>
<input type="text" id="option3" name="option3input" required>
</div>
<div class="option">
<label for="option4">option 4:</label>
<input type="text" id="option4" name="option4input" required>
</div>
<div>
<button type="submit">Send your response</button>
</div>
</div>
</form>
image representation:

Get all inputs that are not empty, checked and selected with jQuery

I have a multi-step form (form wizard) with a bunch of questions (various inputs depending on question being asked). All questions sit in one of these <div class="form-group" data-question-number="1"></div> (where the question number changes).
I keep track of what questions have been answered in an array called questionSequence. At the end of the form, I would like to know what input has been filled for each question.
I am looping through the questions that I know were answered, but then for each, is there an easy way to know what inputs were filled? Some questions are text inputs, others are checkboxes, others are radios, others are selects (drop downs) ... etc.
for (var i = 1; i < questionSequence.length; i++) {
let questionId = questionSequence[i];
let filledInInputs = getFilledInInputs(questionId);
}
Basically, I am not sure what my getFilledInInputs(questionId) would look like.
const getReadItemsForQuestion = questionId => {
// questionId is a string e.g. "1"
let questionParentDiv = getQuestionBlockAsJqueryObject(questionId);
// now that I have the parent div, is there an easy way to get all
// filled in inputs no matter the input type?
}
UPDATE
I was asked to provide a runnable snippet, so here is a Codepen. I've simplified it to the core of the problem, I only want to console.log() the filled in inputs.
let questionSequence = ["1", "3", "4", "16"];
$(".process-btn").click(function() {
for (var i = 0; i < questionSequence.length; i++) {
let questionId = questionSequence[i];
let questionParentDiv = getQuestionBlockAsJqueryObject(questionId);
let questionInputs = questionParentDiv.find(":input");
let filledInQuestionInputs = questionInputs.filter(function() {
let thisVal = $(this);
let inputValue = thisVal.val();
return $.trim(inputValue).length !== 0
});
// filledInQuestionInputs should be an object with only be the filled in inputs
console.log(filledInQuestionInputs);
}
});
const getQuestionBlockAsJqueryObject = activeQuestionId => {
return $(`[data-question-number='${activeQuestionId}']`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" data-question-number="1" data-read-label="Service type">
<fieldset class="fieldset" aria-describedby="example-hint">
<legend class="fieldset__legend fieldset__legend--l">
<h1 class="fieldset__heading">
What service type are you?
</h1>
</legend>
<select class="select" data-next-question="2" data-val="true" data-val-number="The field Setting must be a number." data-val-required="The Setting field is required." id="SettingId" name="SettingId" required="true">
<option value="1">999</option>
<option value="2">111</option>
<option value="3">Out of Hours (OOH)</option>
<option value="4">Reception Point (RP)</option>
<option value="6">Dental service</option>
</select>
</fieldset>
</div>
<div class="form-group" data-question-number="3" data-read-label="Type of enquiry">
<fieldset class="fieldset" aria-describedby="example-hint">
<legend class="fieldset__legend fieldset__legend--l">
<h1 class="fieldset__heading">
What is the nature of your enquiry?
</h1>
</legend>
<div class="radios">
<div class="radios__item">
<input class="radios__input" data-next-question="5" data-val="true" data-val-required="The NatureOfEnquiry field is required." id="RequestForChange" name="NatureOfEnquiry" type="radio" value="RequestForChange">
<label class="label radios__label" for="RequestForChange">A request for change</label>
</div>
<div class="radios__item">
<input class="radios__input" data-next-question="5" id="SharedLearning" name="NatureOfEnquiry" type="radio" value="SharedLearning" checked>
<label class="label radios__label" for="SharedLearning">A submission for shared learning</label>
</div>
<div class="radios__item">
<input class="radios__input" data-next-question="5" id="Information" name="NatureOfEnquiry" type="radio" value="Information">
<label class="label radios__label" for="Information">Requesting further information</label>
</div>
</div>
</fieldset>
</div>
<div class="form-group" data-question-number="4" data-read-label="Is Regulation 28">
<fieldset class="fieldset" aria-describedby="example-hint">
<legend class="fieldset__legend fieldset__legend--l">
<h1 class="fieldset__heading">
Does the enquiry relate to a Regulation 28?
</h1>
</legend>
<div class="radios">
<div class="radios__item">
<input class="radios__input" data-next-question="32" id="regulation-1" name="IsRegulationTwentyEight" type="radio" value="True">
<label class="label radios__label" for="regulation-1">Yes</label>
</div>
<div class="radios__item">
<input class="radios__input" data-next-question="32" id="regulation-2" name="IsRegulationTwentyEight" checked type="radio" value="False">
<label class="label radios__label" for="regulation-2">No</label>
</div>
</div>
</fieldset>
</div>
<div class="form-group" data-question-number="16" data-read-label="Enquiry relates to">
<fieldset class="fieldset" aria-describedby="area-hint">
<legend class="fieldset__legend fieldset__legend--l">
<h1 class="fieldset__heading">
Does your enquiry relate to any of the following?
</h1>
</legend>
<div class="checkboxes">
<div class="checkboxes__item">
<input class="checkboxes__input" id="site-section-1" name="SiteSections[]" type="checkbox" value="1" data-next-question="18">
<label class="label checkboxes__label" for="site-section-1">
Care Advice
</label>
</div>
<div class="checkboxes__item">
<input class="checkboxes__input" id="site-section-2" name="SiteSections[]" type="checkbox" value="2" data-next-question="18">
<label class="label checkboxes__label" for="site-section-2">
Disposition
</label>
</div>
<div class="checkboxes__item">
<input class="checkboxes__input" id="site-section-3" name="SiteSections[]" type="checkbox" value="3" data-next-question="18">
<label class="label checkboxes__label" for="site-section-3">
Pathway
</label>
</div>
<div class="checkboxes__item">
<input class="checkboxes__input" id="site-section-4" name="SiteSections[]" type="checkbox" value="4" data-next-question="18">
<label class="label checkboxes__label" for="site-section-4">
Question
</label>
</div>
<div class="checkboxes__item">
<input class="checkboxes__input" checked id="site-section-5" name="SiteSections[]" type="checkbox" value="5" data-further-info="true">
<label class="label checkboxes__label" for="site-section-5">
Other
</label>
</div>
</div>
</fieldset>
<fieldset class="fieldset fieldset--last" aria-describedby="area-hint">
<label class="label" for="other-section">
Can you provide further details?
</label><br />
<textarea class="textarea js-character-count" cols="20" data-char-limit="200" data-next-question="18" id="other-section" name="OtherSection" rows="5">Some lorem ipsum</textarea>
</fieldset>
</div>
<button class="process-btn">Process</button>
Have a look at this
The serialize shows all filled items on name
The $(':input').map(function() { if (this.name) return this.name; }).get() gets all names and then the uniqueItems = [...new Set(names)] dedups them
let questionSequence = ["1", "3", "4", "16"];
$("#myForm").on("submit", function(e) {
e.preventDefault();
const inputFilled = $(this).serialize().split("&")
const nofInputFilled = inputFilled.length;
let names = $(':input').map(function() { if (this.name) return this.name; }).get();
let uniqueItems = [...new Set(names)]
console.log(nofInputFilled,inputFilled)
console.log(uniqueItems,uniqueItems.length)
for (var i = 0; i < questionSequence.length; i++) {
let questionId = questionSequence[i];
let questionParentDiv = getQuestionBlockAsJqueryObject(questionId);
let questionInputs = questionParentDiv.find(":input");
let filledInQuestionInputs = questionInputs.filter(function() {
let thisVal = $(this);
let inputValue = thisVal.val();
return $.trim(inputValue).length !== 0
});
// filledInQuestionInputs should be an object with only be the filled in inputs
// console.log(filledInQuestionInputs);
}
});
const getQuestionBlockAsJqueryObject = activeQuestionId => {
return $(`[data-question-number='${activeQuestionId}']`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<div class="form-group" data-question-number="1" data-read-label="Service type">
<fieldset class="fieldset" aria-describedby="example-hint">
<legend class="fieldset__legend fieldset__legend--l">
<h1 class="fieldset__heading">
What service type are you?
</h1>
</legend>
<select class="select" data-next-question="2" data-val="true" data-val-number="The field Setting must be a number." data-val-required="The Setting field is required." id="SettingId" name="SettingId" required="true">
<option value="1">999</option>
<option value="2">111</option>
<option value="3">Out of Hours (OOH)</option>
<option value="4">Reception Point (RP)</option>
<option value="6">Dental service</option>
</select>
</fieldset>
</div>
<div class="form-group" data-question-number="3" data-read-label="Type of enquiry">
<fieldset class="fieldset" aria-describedby="example-hint">
<legend class="fieldset__legend fieldset__legend--l">
<h1 class="fieldset__heading">
What is the nature of your enquiry?
</h1>
</legend>
<div class="radios">
<div class="radios__item">
<input class="radios__input" data-next-question="5" data-val="true" data-val-required="The NatureOfEnquiry field is required." id="RequestForChange" name="NatureOfEnquiry" type="radio" value="RequestForChange">
<label class="label radios__label" for="RequestForChange">A request for change</label>
</div>
<div class="radios__item">
<input class="radios__input" data-next-question="5" id="SharedLearning" name="NatureOfEnquiry" type="radio" value="SharedLearning" checked>
<label class="label radios__label" for="SharedLearning">A submission for shared learning</label>
</div>
<div class="radios__item">
<input class="radios__input" data-next-question="5" id="Information" name="NatureOfEnquiry" type="radio" value="Information">
<label class="label radios__label" for="Information">Requesting further information</label>
</div>
</div>
</fieldset>
</div>
<div class="form-group" data-question-number="4" data-read-label="Is Regulation 28">
<fieldset class="fieldset" aria-describedby="example-hint">
<legend class="fieldset__legend fieldset__legend--l">
<h1 class="fieldset__heading">
Does the enquiry relate to a Regulation 28?
</h1>
</legend>
<div class="radios">
<div class="radios__item">
<input class="radios__input" data-next-question="32" id="regulation-1" name="IsRegulationTwentyEight" type="radio" value="True">
<label class="label radios__label" for="regulation-1">Yes</label>
</div>
<div class="radios__item">
<input class="radios__input" data-next-question="32" id="regulation-2" name="IsRegulationTwentyEight" checked type="radio" value="False">
<label class="label radios__label" for="regulation-2">No</label>
</div>
</div>
</fieldset>
</div>
<div class="form-group" data-question-number="16" data-read-label="Enquiry relates to">
<fieldset class="fieldset" aria-describedby="area-hint">
<legend class="fieldset__legend fieldset__legend--l">
<h1 class="fieldset__heading">
Does your enquiry relate to any of the following?
</h1>
</legend>
<div class="checkboxes">
<div class="checkboxes__item">
<input class="checkboxes__input" id="site-section-1" name="SiteSections[]" type="checkbox" value="1" data-next-question="18">
<label class="label checkboxes__label" for="site-section-1">
Care Advice
</label>
</div>
<div class="checkboxes__item">
<input class="checkboxes__input" id="site-section-2" name="SiteSections[]" type="checkbox" value="2" data-next-question="18">
<label class="label checkboxes__label" for="site-section-2">
Disposition
</label>
</div>
<div class="checkboxes__item">
<input class="checkboxes__input" id="site-section-3" name="SiteSections[]" type="checkbox" value="3" data-next-question="18">
<label class="label checkboxes__label" for="site-section-3">
Pathway
</label>
</div>
<div class="checkboxes__item">
<input class="checkboxes__input" id="site-section-4" name="SiteSections[]" type="checkbox" value="4" data-next-question="18">
<label class="label checkboxes__label" for="site-section-4">
Question
</label>
</div>
<div class="checkboxes__item">
<input class="checkboxes__input" checked id="site-section-5" name="SiteSections[]" type="checkbox" value="5" data-further-info="true">
<label class="label checkboxes__label" for="site-section-5">
Other
</label>
</div>
</div>
</fieldset>
<fieldset class="fieldset fieldset--last" aria-describedby="area-hint">
<label class="label" for="other-section">
Can you provide further details?
</label><br />
<textarea class="textarea js-character-count" cols="20" data-char-limit="200" data-next-question="18" id="other-section" name="OtherSection" rows="5">Some lorem ipsum</textarea>
</fieldset>
</div>
<button type="submit" class="process-btn">Process</button>
</form>

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

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");
}
});

hiding multiple fields in html form

I have multiple fields with same id in HTML form and I want to hide them if the value of a particular field is 1 but it only hides the first field of that id all other fields are not hidden
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input" id="g">Days of week</label>
<div class="col-md-9">
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="monday">Monday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="tuesday">Tuesday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="wednesday">Wednesday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="thursday">Thursday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="friday">Friday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="saturday">Saturday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="sunday"> Sunday
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input" id="g">Time</label>
<div class="col-md-3">
<select id="g" name="nod" class="form-control">
<?php
for($i=1;$i<=12;$i++){
echo"<option value='$i'>$i AM</option>";
}
for($i=1;$i<=12;$i++){
echo "<option value='12+$i'>$i PM</option>";
}?>
</select>
</div>
</div>
All the elements have the same id="g".Below is the javascript code
<script type="text/javascript">
var ele=document.getElementById("st").value;
if(ele==1)
document.getElementById("g").style.visibility = "hidden";
//else
//document.getElementById("g").style.visibility = "none";
</script>
But only the first element(ie the text days of week) gets hidden all others are shown.How do I hide all the others
ID should be unique in html fields,but you can have same name attribute/classname. you have to loop through the array of elements extracted using classname or name attribute.
in your case use name attribute
function hideGender(){
var ele=document.getElementById("st").value;
if(ele==1){
var elements=document.getElementsByName("gender");
for(var i=0;i<elements.length;i++)
elements[i].style.visibility = "hidden";
}
}
IDs should be unique within the document.
Change id="g" to class="g".
<label for="example-checkbox1">
<input type="checkbox" class="g" name="gender" value="saturday"> Saturday
</label>
<script type="text/javascript">
Array.filter(
document.getElementsByClassName('g'),
function(elem){
elem.style.visibility = 'hidden';
});
</script>
To select multiple fields with same id you will have to use -
$('[id="yourFieldId"]');
So in your case -
var ele=document.getElementById("st").value;
if(ele==1)
$('[id="yourFieldId"]').hide();

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