Develop Reference

JavaScript.JQuery toggle and fade in

If you have one div with two radio buttons with no ids and each one disables content and displays new content if selected. Should be simple but its not working properly. When the radio button is changed, toggle off that content and fade in the new content and vice versa.
What is wrong with this code? Is it not this simple?
<div class="radios">
<div class="change__radio">
Home: <input name="change" type="radio" value="1" checked="true" />
Projects <input name="change" type="radio" value="2" />
</div>
$(":radio").change( function(e) {
$(".radios__home").toggle().fadeIn(400);
$(".radios__projects").toggle().fadeIn(400);});

Your issue is that .fadeIn always makes the element visible, regardless of what you do with .toggle. So you need to check the value of the checked radio and use that to fade in/hide the appropriate element. Something like this (but hopefully a bit prettier):
$(":radio").change(function(e) {
if ($(this).val() == 1) {
$(".radios__home").fadeIn(400);
$(".radios__projects").hide();
} else {
$(".radios__home").hide();
$(".radios__projects").fadeIn(400);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radios">
<div class="change__radio">
Home: <input name="change" type="radio" value="1" checked="true" /> Projects <input name="change" type="radio" value="2" />All
</div>
<div class="radios__home" style="display:block">Home Radio</div>
<div class="radios__projects" style="display:none">Projects Radio</div>
</div>

Hide button until two names are checked

I want to hide a button until two specific radiobuttons with two different names are checked. I'm just not sure how to go about this..
HTML
<form>
<!-- First question -->
<fieldset>
<input type="radio" name="trend1" value="Progressing">
<input type="radio" name="trend1" value="Regressing">
</fieldset>
<fieldset>
<input type="radio" name="q1" value="Good">
<input type="radio" name="q1" value="Bad">
</fieldset>
<button class="next" type="button" name="hideQ1">
<!-- Disable this button until one option on #trend1 and #q1 are checked. -->
<!-- Not a submit button, if that matters -->
<!-- Second question -->
<fieldset>
<input type="radio" name="trend2" value="Progressing">
<input type="radio" name="trend2" value="Regressing">
</fieldset>
<fieldset>
<input type="radio" name="q2" value="Good">
<input type="radio" name="q2" value="Bad">
</fieldset>
<button class="next" type="button" name="hideQ2">
<!-- Disable this button until one option on #trend2 and #q2 are checked. -->
<!-- Not a submit button, if that matters -->
</form>
I kinda know how to do it over the entire form, but what the button does is that it hides the current question, and shows the next one, so just hiding the button till specific names are checked would be the best way for me to go about it..
Any help/tips are much appreciated.
EDIT:
Hide as in, either disable or hide. Something like that.
EDIT 2:
This is what I've tried, maybe it helps you get an idea of what I want.. All it does however is disabling the next button completely.
$(document).ready(function(){
$('button[name="hideQ1"]').attr('disabled');
if ($('input[name="q1"]').is(':checked')) && ($('input[name="trend1"]').is(':checked')) {
$('button[name="hideQ1"]').removeAttr('disabled');
}
});

Maybe something like that.
var trend1 = document.getElementsByName('trend1'),
q1 = document.getElementsByName('q1'),
button1 = document.getElementsByName('hideQ1')[0],
trend2 = document.getElementsByName('trend2'),
q2 = document.getElementsByName('q2'),
button2 = document.getElementsByName('hideQ2')[0]
function checked(inputArr) {
return [].some.call(inputArr, function (input) {
return input.checked
})
}
[].forEach.call(document.querySelectorAll('input[type=radio]'), function (input) {
input.addEventListener('click', function () {
if (checked(trend1) && checked(q1)) button1.removeAttribute('disabled')
if (checked(trend2) && checked(q2)) button2.removeAttribute('disabled')
})
})
<form>
<!-- First question -->
<fieldset>
<input type="radio" name="trend1" value="Progressing">
<input type="radio" name="trend1" value="Regressing">
</fieldset>
<fieldset>
<input type="radio" name="q1" value="Good">
<input type="radio" name="q1" value="Bad">
</fieldset>
<button class="next" type="button" name="hideQ1" value="next" disabled>Next for q1</button>
<!-- Disable this button until one option on #trend1 and #q1 are checked. -->
<!-- Not a submit button, if that matters -->
<!-- Second question -->
<fieldset>
<input type="radio" name="trend2" value="Progressing">
<input type="radio" name="trend2" value="Regressing">
</fieldset>
<fieldset>
<input type="radio" name="q2" value="Good">
<input type="radio" name="q2" value="Bad">
</fieldset>
<button class="next" type="button" name="hideQ2" disabled>Next for q2</button>
<!-- Disable this button until one option on #trend2 and #q2 are checked. -->
<!-- Not a submit button, if that matters -->
</form>

Here's an approach: on every radio change, run a function that checks if the specific ones are checked, and if so, show the button. Otherwise, hide the button.
That's all there is to it, and it should be pretty easy to translate this into JS.

You can use same radio name ( Two radio ) if you added question through ajax call.
Then you can use same code for all question.
Here's is my approach bro:
$( document ).ready(function() {
// Your Code Start
var isTrend1 = false;
var isQ1 = false;
$("input[name='trend1']").on("click", function (e){
isTrend1 =$("input[name='trend1']").is(':checked');
isQ1 =$("input[name='q1']").is(':checked');
if ( isTrend1 && isQ1 ) {
$('.hideQ1').css({'display':'block'});
}
});
$("input[name='q1']").on("click", function (e){
isTrend1 =$("input[name='trend1']").is(':checked');
isQ1 =$("input[name='q1']").is(':checked');
if ( isTrend1 && isQ1 ) {
$('.hideQ1').css({'display':'block'});
}
});
$(".hideQ1").on("click", function (e){
$('.hideQ1').css({'display':'none'});
$('.question_1').css({'display':'none'});
$('.question_2').css({'display':'block'});
});
var trend2 = false;
var isQ2 = false;
$("input[name='trend2']").on("click", function (e){
isTrend2 =$("input[name='trend2']").is(':checked');
isQ2 =$("input[name='q2']").is(':checked');
if ( isTrend2 && isQ2 ) {
$('.hideQ2').css({'display':'block'});
}
});
$("input[name='q2']").on("click", function (e){
isTrend2 =$("input[name='trend2']").is(':checked');
isQ2 =$("input[name='q2']").is(':checked');
if ( isTrend2 && isQ2 ) {
$('.hideQ2').css({'display':'block'});
}
});
// Your Code End
});
// Document Ready Start
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<!-- First question -->
<div class="question_1">
<fieldset>
<input type="radio" name="trend1" value="Progressing">Progressing Q1
<input type="radio" name="trend1" value="Regressing">Regressing Q1
</fieldset>
<fieldset>
<input type="radio" name="q1" value="Good">Good Q1
<input type="radio" name="q1" value="Bad">Bad Q1
</fieldset>
</div>
<button class="next hideQ1" type="button" name="hideQ1" style="display:none;" value="Next">Next Question Q2
</button>
<!-- Disable this button until one option on #trend1 and #q1 are checked. -->
<!-- Not a submit button, if that matters -->
<div class="question_2" style="display:none;">
<!-- Second question -->
<fieldset>
<input type="radio" name="trend2" value="Progressing">Progressing Q2
<input type="radio" name="trend2" value="Regressing">Regressing Q2
</fieldset>
<fieldset>
<input type="radio" name="q2" value="Good">Good Q2
<input type="radio" name="q2" value="Bad">Bad Q2
</fieldset>
</div>
<button class="next hideQ2" type="button" name="hideQ2" style="display:none;">Next Question Q 3</button>
<!-- Disable this button until one option on #trend2 and #q2 are checked. -->
<!-- Not a submit button, if that matters -->
</form>
I think this will help you.
Thanks

Check this approach
https://jsfiddle.net/q4vvdwc5/1/
$(document).ready(function(){
var inputs = $("input[name^='trend'], input[name^='q']");
inputs.change(function(){
selected = [0, 0];
var self = $(this);
qnumber = $(this).attr('name').slice(-1);
inputs.each(function(index, element){
if ($(element).attr('name').slice(-1) == qnumber && $(element).prop('checked')) {
selected[qnumber-1] += 1;
if (selected[qnumber-1] > 1) {
$(this).closest('fieldset').siblings(".next[class$='after"+qnumber+"']").show();
}
console.log(qnumber, selected[qnumber-1]);
}
});
});
});
I also altered your DOM a bit so it's valid HTML. And added a few classes.

show and hide div on checked radio button and submit form

I have 5 radio buttons and want to show different div on selection of particular radio
button, but other div as contact form should be displayed on submitting form.
And one more thing I want next div on same location of first div ( first div show and second div hide at same place)
<p>Tell us more about Yourself</p>
<form class="request-demo-form" action="" method="post" onSubmit="e();" name="form1">
<div class="input-block">
<input name="info" class="input-radio" type="radio" value="Restaurant" /> Restaurant Chain with more than 3 Locations. ( Looking for more information )
</div>
<div class="input-block">
<input name="info" class="input-radio" type="radio" value="IndRestaurant"/> Independent Restaurant with 1-3 Locations ( Looking for more information )
</div>
<div class="input-block">
<input name="info" class="input-radio" type="radio" /> Existing Punchh Customers ( Looking For Support)
</div>
<div class="input-block">
<input name="info" class="input-radio" type="radio" /> User of Punchh Developed App ( Looking For Support)
</div>
<div class="input-block">
<input name="info" class="input-radio" type="radio" /> Others ( Marketing , Partership etc.)
</div>
<br/>
<div class="submit-btn-area">
<button type="submit" class="button button-dark">SUBMIT<span class="arrow1"></span></button>
</div>
</form>
I have not much experience in javascript so please check my code
<script type="text/javascript">
$('input:radio[value="Restaurant"]').change(
$('form').submit(function (e) {
if ($(this).is(':checked')) {
$('#main').hide();
$('#Restaurant').show();
e.preventDefault();
}
});
</script>

In the above code the $(this) refers to the form element, and not the radio input field.
I suggest, that on the submit event of the form, that we check the radio input field and hide and show the divs accordingly.
<script type="text/javascript">
$().ready(function() {
$('form').submit(function (e) {
$('input:radio[value="Restaurant"]').is(':checked')) {
$('#main').hide();
$('#Restaurant').show();
e.preventDefault();
}
});
});
</script>

Delete drop down when it is blank using Javascript or Jquery

Is it possible to write a Javascript function to delete a drop down when it is blank?
<form name="myform" method="post" enctype="multipart/form-data" action="" id="myform">
<div>
<label id="question1">1) Draw recognizable shapes</label>
<br />
<input type="radio" value="Yes" id="question1_0" name="question1_0" />
Yes
<input type="radio" value="No" id="question1_1" name="question1_1" />
No
</div>
<div>
<label id="question2">2) Competently cut paper </label>
<br />
<input type="radio" value="Yes" id="question2_0" name="question2_0" />
Yes
<input type="radio" value="No" id="question2_1" name="question2_1" />
No
</div>
<div>
<label id="question3">3) Hold a pencil</label>
<br />
<input type="radio" value="Yes" id="question3_0" name="question3_0" />
Yes
<input type="radio" value="No" id="question3_1" name="question3_1" />
No
</div>
<input type="submit" value="Delete Drop Down" onclick="return checkanddelete"/>
</form>
If somebody does not select question 2 for example, it deletes question 2 label and the drop down.

Assuming you actually meant radio button groups (and not drop down lists) then firstly your HTML is incorrect, you need to set the name values of each group of radio buttons to be the same:
<input type="radio" value="Yes" id="question1_0" name="question1" /> Yes
<input type="radio" value="No" id="question1_1" name="question1" /> No
Then you need to loop through the list of radio buttons, if none in the group are selected then delete the parent div:
$('input[type=submit]').on('click', function() {
var radioArr = [];
$(':radio').each(function(){
var radName = this.name;
if($.inArray(radName, radioArr) < 0 && $(':radio[name='+radName+']:checked').length == 0)
{
radioArr.push(radName);
$(this).closest("div")
.remove();
}
});
return false; //to stop the form submitting for testing purposes
});
While you are there, you might want to add some <label for=""> tags around your text.
Here is a jsFiddle of the solution.

If your dropdown has an id of DropDown, and you are looking to hide the dropdon on submit click:
function checkanddelete()
{
if ( $('#question2_0.=:checked, #question2_1:checked').length )
$('#dropdown').hide() // Or $('#dropdown').remove() if you do not plan on showing it again.
return false; // if you plan on not submitting the form..
}
Optimization for use in a module for a page include adding appropriate ids and classes to the divs, which I'm assuming that in full code are there, but if you are planning on making UI adjustments I would advise against using a submit button in the mix..

I don't know, what do you mean under "dropdown menu", but here some info, that can help you.
You can set a class name for the all Objects, you want to delete. E.g.
HTML
<div>
<label class='question2' id="question2">2) Competently cut paper </label>
<br />
<input class='question2' type="radio" value="Yes" id="question2_0" name="question2_0" />
Yes
<input class='question2' type="radio" value="No" id="question2_1" name="question2_1" />
No
</div>
JS
$(".question2").remove();
As an another solution you can set an ID for the DIV Tag above all of this elements
<div id='block_to_remove'>
<label id="question2">2) Competently cut paper </label>
<br />
<input type="radio" value="Yes" id="question2_0" name="question2_0" />
Yes
<input type="radio" value="No" id="question2_1" name="question2_1" />
No
</div>
And then remove it in JS
$("#block_to_remove").remove();

Jquery how to check checkbox on div click, change class and show div

I am trying to checkbox when the div.menuitem is clicked and then it should change class and show the content in the div with class of hidediv. When the div.menuitem is again clicked it should remove the class and hide the div again and uncheck the checkbox.
Want I want to do:
Only show the content of the hidediv when the menuitem is pressed. (checkbox should be checked)
When the menuitem is pressed the checkbox should be checked
When the menuitem is clicked again the hidediv should be hidden again. (checkbox unchecked)
And the checkbox should be uncheched
Illustration of my menu form:
<div class="menuitem">
1.Company1
</div>
<div class="hidediv">
1.1 Company 1.1
1.2 Company 1.2
</div>
<div class="menuitem">
1.Company2
</div>
<div class="hidediv">
1.1 Company 2.1
1.2 Company 2.2
</div>
My previous Jquery code, which only is trigger when the checkbox is clicked. I want pretty
similar function to this, the checkbox should also be trigghed when the div is clicked:
$('.menuitem input:checkbox').change(function(){
if($(this).is(':checked')) {
$('div.hidediv').addClass('someclass').show(200); // not needed it there is another way of identifying the div later to add to hidediv class again.
$('div.hidediv').removeClass('hidediv');
} else {
$('div.someclass').addClass('hidediv').hide(200);
}
});
});
My Jquery so far(not working):
$('.menuitem').click(function(e){
$(this).addClass('menuclicked');
$('div.hidediv').addClass('clicked').show(200);
$('div.hidediv').removeClass('hidediv');
} else {
$('div.someclass').addClass('hidediv').hide(200);
}
$('.menuclicked').click(function(e){
$('div.someclass').addClass('hidediv').hide(200);
});
My HTML:
<form accept-charset="UTF-8" action="/" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<div class="menuitem">
<label for="search_company1">company1</label>
<input name="search[company1_is_true]" type="hidden" value="0" /><input id="search_company1_is_true" name="search[company1_is_true]" type="checkbox" value="1" />
</div>
<div class="menuitem">
<label for="search_company3">company3</label>
<input name="search[company3_is_true]" type="hidden" value="0" /><input id="search_company3_is_true" name="search[company3_is_true]" type="checkbox" value="1" />
</div>
<div class="hidediv">
<div class="menuitem">
<label for="search_company2">company2</label>
<input name="search[company2_is_true]" type="hidden" value="0" /><input id="search_company2_is_true" name="search[company2_is_true]" type="checkbox" value="1" />
<div>
</div>
<input id="search_submit" name="commit" style="display:none;" type="submit" value="Submit" />
</form>

I can help. I think you are structuring this wrong. You have three fields in your html, with the third being hidden. I assume when you fill in the first one you want nothing to happen, but clicking the second one should show the third field?
Try this:
//Use toggle instead of .click()
$('.menuitem').toggle(function(){
$('div.hidediv').addClass('clicked').show(200);
}, function(){
$('div.hidediv').removeClass('clicked').hide(200);
});
This will effect all divs with the "menuitem" class, meaning when you click on any of the three it will toggle showing/hiding the div with the "hidediv" class.
edit you have a couple valid answers here, but I think you're approaching this wrong. If you go try the jsfiddle posted by another user, whos' javascript does the same as mine - it reveals the problem I talked about above. You cannot select all three boxes without some clever clicking. Each click will toggle showing/hiding the third check box. Might I suggest modifying your code like so:
//Use toggle instead of .click()
$('.toggleMenuItem').toggle(function(){
$('div.hidediv').addClass('clicked').show(200);
}, function(){
$('div.hidediv').removeClass('clicked').hide(200);
});
<form accept-charset="UTF-8" action="/" method="get">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
</div>
<div class="menuitem">
<label for="search_company1">company1</label>
<input name="search[company1_is_true]" type="hidden" value="0" />
<input id="search_company1_is_true" name="search[company1_is_true]" type="checkbox" value="1" />
</div>
<div class="menuitem toggleMenuItem">
<label for="search_company3">company3</label>
<input name="search[company3_is_true]" type="hidden" value="0" />
<input id="search_company3_is_true" name="search[company3_is_true]" type="checkbox" value="1" />
</div>
<div class="hidediv">
<div class="menuitem">
<label for="search_company2">company2</label>
<input name="search[company2_is_true]" type="hidden" value="0" />
<input id="search_company2_is_true" name="search[company2_is_true]" type="checkbox" value="1" />
<div>
</div>
<input id="search_submit" name="commit" style="display:none;" type="submit" value="Submit" />
</form>
This will make it so only clicking the checkboxes with the class ".toggleMenuItem" will show the third checkbox.

try something like this:
$('.menuitem').click(function(e){
if($(this).hasClass('menuClicked')){
// Already clicked
$(this)
.removeClass('menuclicked')
.html("");
}else{
// First click
$(this)
.addClass('menuclicked');
.html($('#hidediv').html());
}
})

This may do what you're looking for:
$('.menuitem').click(function(e){
$(this).toggleClass('clicked');
$('div.hidediv').toggle(200);
});
Let me know if it is missing a feature.
http://jsfiddle.net/citizenconn/2bCdR/