Proper JavaScript to show/hide inputs - javascript

I just want to know the proper function loop code for show/hide method.
This is the javascript for show/hide for the first (1) radio button:
function showHide(){
var chckbox = document.getElementById("chk");
var hiddeninputs = document.getElementsByClassName("hidden");
for(var i=0; i !=hiddeninputs.length; i++){
if(chckbox.checked){
hiddeninputs[i].style.display ="block";
}
else{
hiddeninputs[i].style.display ="none";
}
}
}
Yet I need the proper loop for having multiple objects (checkboxes) with seperated show/hide method. This is the first checkbox code:
<input type="checkbox" name="area" id="chk" onclick="showHide(this.checked);"/>
<label for="chk">Billing & Credit Management Systems</label>
<div class="hidden">
<input type="radio" name="area1" /> <label> Web Billin g </label> <br />
<input type="radio" name="area1" /> <label> CRIBS </label> <br />
<input type="radio" name="area1" /> <label> PPC </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area1" placeholder="Please Specify"/></label><br /></label> <br />
</div>
And I need the loop code in order to prompt the show/hide to the following objects:
<input type="checkbox" name="area" id="chk1" onclick="showHide(this.checked);"/>
<label for="chk1">Customer Care Systems</label>
<div class="hidden">
<input type="radio" name="area1" /> <label> CRM (Customer Relationship) </label> <br />
<input type="radio" name="area1" /> <label> MVNO CRM </label> <br />
<input type="radio" name="area1" /> <label> Self-Care Site </label> <br />
<input type="radio" name="area1" /> <label> CMS (Trouble Ticketing) </label> <br />
<input type="radio" name="area1" /> <label> IRS </label> <br />
<input type="radio" name="area1" /> <label> Online Guide </label> <br />
<input type="radio" name="area1" /> <label> TMOS </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area2" placeholder="Please Specify"/></label><br /></label> <br />
</div>
Only the first checkbox prompts while the second one doesn't whenever I checked.

Not the exact answer you're looking for, but a bit simpler (less looping). Let me know if this works for you, I'll try my best to explain what's happening here.
I implemented this solution with the intention of forcing you to change as little as possible.
1) Assign a unique attribute to the checkbox and the div it belongs to. In this case I used "data-menu". In the onclick function, pass "this" instance of the element into the function showHide.
<input data-menu="1" type="checkbox" name="area" id="chk" onclick="showHide(this);"/>
<div class="hidden" data-menu="1">
2) Use the css class 'hidden' to hide your menu options.
.hidden {
display: none;
}
3) Re-work your JS function to dynamically add the hidden class when the box is checked. Since your menus are off by default, checking on naturally turns them on.
function showHide(e){
var menu = document.querySelector('div[data-menu="'+e.getAttribute('data-menu')+'"');
menu.classList.toggle('hidden');
}
Check out the below working snippet to see it in action.
function showHide(e){
var menu = document.querySelector('div[data-menu="'+e.getAttribute('data-menu')+'"');
menu.classList.toggle('hidden');
}
.hidden {
display: none;
}
<input data-menu="1" type="checkbox" name="area" id="chk" onclick="showHide(this);"/>
<label for="chk">Billing & Credit Management Systems</label>
<div class="hidden" data-menu="1">
<input type="radio" name="area1" /> <label> Web Billin g </label> <br />
<input type="radio" name="area1" /> <label> CRIBS </label> <br />
<input type="radio" name="area1" /> <label> PPC </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area1" placeholder="Please Specify"/></label><br /></label> <br />
</div>
<input data-menu="2" type="checkbox" name="area" id="chk1" onclick="showHide(this);"/>
<label for="chk1">Customer Care Systems</label>
<div data-menu="2" class="hidden">
<input type="radio" name="area1" /> <label> CRM (Customer Relationship) </label> <br />
<input type="radio" name="area1" /> <label> MVNO CRM </label> <br />
<input type="radio" name="area1" /> <label> Self-Care Site </label> <br />
<input type="radio" name="area1" /> <label> CMS (Trouble Ticketing) </label> <br />
<input type="radio" name="area1" /> <label> IRS </label> <br />
<input type="radio" name="area1" /> <label> Online Guide </label> <br />
<input type="radio" name="area1" /> <label> TMOS </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area2" placeholder="Please Specify"/></label><br /></label> <br />
</div>

function showHide(element){
var chckbox = document.getElementById(element);
var hiddeninputs = document.getElementsByClassName(element);
for(var i=0; i !=hiddeninputs.length; i++){
if(chckbox.checked){
hiddeninputs[i].style.display ="block";
}
else{
hiddeninputs[i].style.display ="none";
}
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="checkbox" name="area" id="chk" onclick="showHide(this.id);"/>
<label for="chk">Billing & Credit Management Systems</label>
<div class="chk">
<input type="radio" name="area1" /> <label> Web Billin g </label> <br />
<input type="radio" name="area1" /> <label> CRIBS </label> <br />
<input type="radio" name="area1" /> <label> PPC </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area1" placeholder="Please Specify"/></label><br /></label> <br />
</div> <br>
<input type="checkbox" name="area" id="chk1" onclick="showHide(this.id);"/>
<label for="chk1">Customer Care Systems</label>
<div class="chk1">
<input type="radio" name="area1" /> <label> CRM (Customer Relationship) </label> <br />
<input type="radio" name="area1" /> <label> MVNO CRM </label> <br />
<input type="radio" name="area1" /> <label> Self-Care Site </label> <br />
<input type="radio" name="area1" /> <label> CMS (Trouble Ticketing) </label> <br />
<input type="radio" name="area1" /> <label> IRS </label> <br />
<input type="radio" name="area1" /> <label> Online Guide </label> <br />
<input type="radio" name="area1" /> <label> TMOS </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area2" placeholder="Please Specify"/></label><br /></label> <br />
</div>
</body>
</html>
try this this will work fine for you.

You're not using the parameter you're providing in the call of your function.
var chckbox = document.getElementById("chk");
will always find the first checkbox only to know if the other fields should be hidden or not and
var hiddeninputs = document.getElementsByClassName("hidden");
will allways hide all elements with class hidden. I think that
<input type="checkbox" name="area" id="chk" onclick="showHide(this);"/>
(i.e. change the parameter to the element rather than the .checked) in combination with
function showHide(elem){
var selector = "#" + elem.id + " ~ .hidden";
document.querySelector(selector).style.display = elem.checked ? 'block' : 'none';
}
will do more of what you want

call onchange function in input type checkbox
example
<input type="checkbox" name="area" id="chk" onchange="valueChanged(this.id)"/>Billing & Credit Management Systems
<input type="checkbox" name="area" id="chk1" onchange="valueChanged(this.id)"/> Customer Care Systems
<script type="text/javascript">
$(document).ready( function(){
$(".hidden").hide();
$(".hidden2").hide();
});
function valueChanged(id){
if(id== "chk"){
if($('#chk').is(":checked"))
$(".hidden").show();
else
$(".hidden").hide();
}
if(id== "chk1"){
if($('#chk1').is(":checked"))
$(".hidden2").show();
else
$(".hidden2").hide();
}
}
</script>
<div class="hidden">
<input type="radio" name="area1" /> <label> Web Billin g </label> <br />
<input type="radio" name="area1" /> <label> CRIBS </label> <br />
<input type="radio" name="area1" /> <label> PPC </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area1" placeholder="Please Specify"/></label><br /></label> <br />
</div>
<div class="hidden2">
<input type="radio" name="area1" /> <label> CRM (Customer Relationship) </label> <br />
<input type="radio" name="area1" /> <label> MVNO CRM </label> <br />
<input type="radio" name="area1" /> <label> Self-Care Site </label> <br />
<input type="radio" name="area1" /> <label> CMS (Trouble Ticketing) </label> <br />
<input type="radio" name="area1" /> <label> IRS </label> <br />
<input type="radio" name="area1" /> <label> Online Guide </label> <br />
<input type="radio" name="area1" /> <label> TMOS </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area2" placeholder="Please Specify"/></label><br /></label> <br />
</div>

Related

Show only Checked Options using Jquery

How to show only those options which are checked and hide all those which are not checked?
My code just shows checkbox, and not the label.
$("#checked_show").click(function() {
$("input").hide();
$("label").hide();
$("input:checked").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>
How to show only those options which are checked and hide all those which are not checked?
My code just shows checkbox, and not the label.
You can use input:checked combined with :not() to select the inputs that aren't checked.
$("#checked_show").click(function() {
$("input:not(:checked)").each((i, el) => {
$(el).next().hide();
$(el).hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>
You should use :checked to select the checked input and negate that with :not(), also to hide the labels you have to loop through all elements and select the next element using .next(), here is a working snippet:
$("#checked_show").click(function () {
if ($("input[type='checkbox']:checked").length) {
$("input[type='checkbox']:not(:checked)").each(function (idx, el) {
$(el).next().hide();
$(el).hide();
});
} else {
console.log('Please select an input!');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>

Vue.js: The required fields get highlighted even before submitting in firefox

In macOS Sierra Version 10.12.6 and Firefox Version 56.0.2 (64-bit), the required fields get highlighted even before submitting, any help to fix this issue will be great help.
This works fine as the data radioInputVal is string:
var vm = new Vue({
el: '#app',
data: {
radioInputVal: ''
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
<form>
<label for="input1">1:</label>
<input type="radio" name="test" id="input1" required value="1" v-modal="radioInputVal" />
<br />
<label for="input2">2:</label>
<input type="radio" name="test" id="input2" value="2" v-modal="radioInputVal" />
<br />
<label for="input3">3:</label>
<input type="radio" name="test" id="input3" value="3" v-modal="radioInputVal" />
<br />
<input type="submit" value="send" />
</form>
</div>
This doesn't work fine as it's data radioInputObj is an object.
var vm = new Vue({
el: '#app',
data: {
radioInputObj: {
val: ''
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
<form>
<label for="input1">1:</label>
<input type="radio" name="test" id="input1" required value="1" v-model="radioInputObj.someVal" />
<br />
<label for="input2">2:</label>
<input type="radio" name="test" id="input2" value="2" v-model="radioInputObj.someVal" />
<br />
<label for="input3">3:</label>
<input type="radio" name="test" id="input3" value="3" v-model="radioInputObj.someVal" />
<br />
<input type="submit" value="send" />
</form>
</div>
Below code is not linked to VUE.js and the required fields doesn't get highlighted until submitted.
<form>
<label for="input1">1:</label>
<input type="radio" name="test" id="input1" required value="1" />
<br />
<label for="input2">2:</label>
<input type="radio" name="test" id="input2" value="2" />
<br />
<label for="input3">3:</label>
<input type="radio" name="test" id="input3" value="3" />
<br />
<input type="submit" value="send" />
</form>

How to create button to check uncheckable checkbox

I have 10 checkboxes and as an example i checked only two of them and i need to create a button to check the another 8 box and uncheck the other two (that already checked before) How i can do this?
<input id="test1" type="checkbox" />test1 <br />
<input id="test2" type="checkbox" />test1 <br />
<input id="test3" type="checkbox" />test1 <br />
<input id="test4" type="checkbox" />test1 <br />
<input id="test5" type="checkbox" />test1 <br />
<input id="test6" type="checkbox" />test1 <br />
<input id="test7" type="checkbox" />test1 <br />
<input id="test8" type="checkbox" />test1 <br />
<input id="test9" type="checkbox" />test1 <br />
<input id="test10" type="checkbox" />test1 <br />
here simple example for your code
$('input.check11').click(function(){
$('input.check21').prop('checked',this.checked)
$('input.check22').prop('checked', false)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-inline" role="form">
<div class="col-xs-3">
<div class="pic-container">
<label>
<span><input type="checkbox" name="discounting" class="check11" value="">all</span><br>
</label>
</div>
</div>
<div class="col-xs-3">
<div class="pic-container">
<label>
<span><input type="checkbox" checked name="discounting" class="check22" value="">test1</span><br>
</label>
<label>
<span><input type="checkbox" checked name="discounting" class="check22" value="">test1</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" class="check21" value="">test1</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" class="check21" value="">test1</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" class="check21" value="">test1</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" class="check21" value="">test1</span><br>
</label>
</div>
</div>
</form>
I thing the best approach is to add class to every checkbox that you want to invert, and for each checkbox with that class invert 'checked' property
$('button').on('click', function(){
$('.invert').each(function(){
var $this = $(this);
$this.prop('checked', !$this.prop('checked'));
});
});
$(document).ready(function(){
$('#button').click(function(){
$('input[type="checkbox"]').each(function(){
if($(this).prop("checked") == true){
$(this).prop('checked', false);
}
else if($(this).prop("checked") == false){
$(this).prop('checked', true);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test1" type="checkbox" />test1 <br />
<input id="test2" type="checkbox" />test1 <br />
<input id="test3" type="checkbox" />test1 <br />
<input id="test4" type="checkbox" />test1 <br />
<input id="test5" type="checkbox" />test1 <br />
<input id="test6" type="checkbox" />test1 <br />
<input id="test7" type="checkbox" />test1 <br />
<input id="test8" type="checkbox" />test1 <br />
<input id="test9" type="checkbox" />test1 <br />
<input id="test10" type="checkbox" />test1 <br />
<input type="button" id="button" value="click">
Please check the Code will help you out
thanks
$(document).ready(function () {
$('#btnClick').click(function () {
$('input[type="checkbox"]').each(function () {
var $this = $(this);
$this.prop('checked', !$this.prop('checked'));
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test1" type="checkbox" />test1 <br />
<input id="test2" type="checkbox" />test1 <br />
<input id="test3" type="checkbox" />test1 <br />
<input id="test4" type="checkbox" />test1 <br />
<input id="test5" type="checkbox" />test1 <br />
<input id="test6" type="checkbox" />test1 <br />
<input id="test7" type="checkbox" />test1 <br />
<input id="test8" type="checkbox" />test1 <br />
<input id="test9" type="checkbox" />test1 <br />
<input id="test10" type="checkbox" />test1 <br />
<br />
<input type="button" id="btnClick" value="Click" >
Check This answer , you need to loop in all check box and vice versa check
$('#copyButton2').on('click',function(){
$('#AllCheckbox input').each(function(){
$(this).prop('checked', !$(this).prop("checked"));
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='AllCheckbox'>
<input id="test1" type="checkbox" />test1 <br />
<input id="test2" type="checkbox" />test1 <br />
<input id="test3" type="checkbox" />test1 <br />
<input id="test4" type="checkbox" />test1 <br />
<input id="test5" type="checkbox" />test1 <br />
<input id="test6" type="checkbox" />test1 <br />
<input id="test7" type="checkbox" />test1 <br />
<input id="test8" type="checkbox" />test1 <br />
<input id="test9" type="checkbox" />test1 <br />
<input id="test10" type="checkbox" />test1 <br />
</div>
<button id="copyButton2">CheckOther</button>

How to differentiate the names of each group of radio buttons?

I'm using formvalidation.io plugin to do the validation. By default, it validates the name of the radio buttons. But I can not do it that way. I need to know somehow / logic to differentiate each name of each radio buttons group.
Can someone help me?
EXAMPLE:
<div>
<div id="perguntas">
<label>1 - Pergunta 1</label>
<input type="hidden" name="pergunta[]" value="$pergunta->id" />
<div id="respostas">
<input type="radio" name="resposta[$pergunta->id]" value="1" /> Male
<input type="radio" name="resposta[$pergunta->id]" value="2" /> Female
<input type="radio" name="resposta[$pergunta->id]" value="3" /> Other
</div>
<div>
<textarea name="mensagem[$pergunta->id]" rows="3" />
</div>
</div>
<div id="perguntas">
<label>2 - Pergunta 2</label>
<input type="hidden" name="pergunta[]" value="$pergunta->id" />
<div id="respostas">
<input type="radio" name="resposta[$pergunta->id]" value="1" /> Male
<input type="radio" name="resposta[$pergunta->id]" value="2" /> Female
<input type="radio" name="resposta[$pergunta->id]" value="3" /> Other
</div>
<div>
<textarea name="mensagem[$pergunta->id]" rows="3" />
</div>
</div>
<div id="perguntas">
<label>3 - Pergunta ...</label>
<input type="hidden" name="pergunta[]" value="$pergunta->id" />
<div id="respostas">
<input type="radio" name="resposta[$pergunta->id]" value="1" /> Male
<input type="radio" name="resposta[$pergunta->id]" value="2" /> Female
<input type="radio" name="resposta[$pergunta->id]" value="3" /> Other
</div>
<div>
<textarea name="mensagem[$pergunta->id]" rows="3" />
</div>
</div>
<div id="perguntas">
<label>16 - Pergunta 16</label>
<input type="hidden" name="pergunta[]" value="$pergunta->id" />
<div id="respostas">
<input type="radio" name="resposta[$pergunta->id]" value="1" /> Male
<input type="radio" name="resposta[$pergunta->id]" value="2" /> Female
<input type="radio" name="resposta[$pergunta->id]" value="3" /> Other
</div>
<div>
<textarea name="mensagem[$pergunta->id]" rows="3" />
</div>
</div>
</div>

radio button hide and show form content

I would like create registration form based on which country.
default address form is the default visible input
when customer click on the non-uk radio button then automatically hide uk form and oppen non-uk address form
I think I need to use javascript or JQuery for this function.
could any one give me an advice for this function.
if you think my question is not acceptable could you please don't decrease my rate.
I can remove my question if u don't like.
here is my form code
<form action="sent.php" name="form1" method="post">
Name
<input type="text" name="name" />
<br />UK
<input type="radio" name="from" value="UK">
<br />Address Line 1
<input type="text" name="ad1" />
<br />Address Line 2
<input type="text" name="ad2" />
<br />Town
<input type="text" name="town" />
<br />Post Code
<input type="text" name="post_code" />
<br />EU
<input type="radio" name="from" value="UK">
<br />Address Line 1
<input type="text" name="ad1" />
<br />Address Line 2
<input type="text" name="ad2" />
<br />Town
<input type="text" name="town" />
<br />Post Code
<input type="text" name="post_code" />
<br />Country
<input type="text" name="post_code" />
<br />
</form>
You can wrap all the input elements except the radiobuttons in two different divs so you can catch the change event for the radio buttons and show and hide two divs accordingly.
You can either add a class to represent which elements are UK address elements and which are EU or, as Élodie Petit, answered wrap them in a div and then either show or hide them depending on which radion button was selected.
Here is a JSFiddle using the latter option.
I don't think you need to show or hide the elements necessarily as the form elements seem to be the same on both 'forms', consider :
<form action="sent.php" name="form1" method="post">
Name <input type="text" name="name" /><br/>
UK <input type="radio" name="from" value="UK" > / EU <input type="radio" name="from" value="EU" ><br />
Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />
</form>
And then when you request the "from" parameter, you'll know which country they're from?
I found simple solution for it with JQuery
With JQuery support
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Here is the javascript code
$(document).ready(function() {
$("input[name$='from']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#c" + test).show();
});
});
</script>
here is the html code suppurated with div
<form action="sent.php" name="form1" method="post">
<label>UK <input type="radio" name="from" value="1" ></label><br />
<label>EU <input type="radio" name="from" value="2" ></label><br />
<div id="c1" class="desc">
Name <input type="text" name="name" /> <br />
Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />
</div>
<div id="c2" class="desc" style="display:none;">
Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />
Country <input type="text" name="post_code" /> <br />
</div>
</form>

Categories

Resources