Having issue with Javascript

Question

Here is my code: JS PART

$(document).ready(function(){
 $("#parent").hide();
 $(".parentcheck").click(function(){
 if($(this).val()==="1") 
 {
 $("#parent").show();
 $('#switch').attr('disabled', '');
 }
 else {
 $("#parent").hide();
 $('#switch').attr('disabled', 'disabled');
 }
 });
 $("#switch").change(function () {
 var selectedSwitch = $("#switch").val();
 var parentcheck = $(".parentcheck:checked").val();
 if (selectedSwitch!='' && selectedSwitch!='0'){
 $.ajax({
 type: "POST",
 url : "optionsgenerator.php",
 data: {menu: selectedSwitch},
 success: function(result, status, xResponse){
 if (result!=''){
 if($('#parentcheck').attr('checked')){
 $("#parent").hide();
 }
 else {
 $("#parent").html(result);
 $("#parent").show();
 }
 }
 else{
 alert('Error occured.');
 $("#parent").hide();
 }
 },
 error: function(e){
 alert(e);
 }
 });
 }
 else
 $("#parent").hide();
});
});

And HTML Markup

<select name="switch" id="switch">
<option value="" selected="selected">Select one...</option>
<option value="1">a</option>
<option value="2">b</option>
<option value="0">no one</option>
</select>
<div class="parent">
<input type="radio" class="parentcheck" name="parentcheck" value="0"/>
<input type="radio" class="parentcheck" name="parentcheck" value="1"/>
<select name="parent" id="parent"></select>
</div>

The problems is

If value of radio button with class "parentcheck" is 1, my js shows selectbox without checking if it has something to show (in my case options returned from backend php code) or not

I'm trying to achieve following

If value of radio button with class "parentcheck" is 1 then show selectbox #parent ONLY if ajax has already returned something, enable selectbox #switch

• LeeR: For the selected switch part of it not working. YOu need to do the && operate rather then or. Because it will get to the selectedSwitch!='' and realise that it equals 0 and it will pass it. So try using && and that should fix that part
• dm03514: can your first problem be solved by using && instead of ||. if the value is '0' this condition will evaluate to be true.

Answer 1

You are trying to get parentcheck by id, but parentcheck is a class:

var parentcheck = $("#parentcheck:checked").val();

try to change it to

var parentcheck = $(".parentcheck:checked").val();

EDIT: for the unselecting:

 if($(this).val()==="1") 
 {
 if ($("#parent option").length > 0) {
 $("#parent").show();
 }
 $('#switch').attr('disabled', '');
 }
 else {
 $("#parent").hide().find('option:selected').removeAttr('selected');
 $('#switch').attr('disabled', 'disabled').find('option:selected').removeAttr('selected');
 }

• demonoid: Thx for fast reply. ok. it was typo too but doesn't resolve anything. please help to resolve last 2 problems. updated question. Take a look
• demonoid: It doesn't deselect currently selected option of #switch and #parent selectbox
• demonoid: ok. second problem has gone too. left last third one. i'm gratefull. thx. BTW upvote my question so that i can upvote your answer too
• demonoid: Editor gives message if $("#parent option").length > 0) { syntax error. @Jlange suggested to set a boolean flag in AJAX function, and then in the click listener only enable the selectbox if(flag). It sounds like good idea. Can you please realize it.. I'm newbie to js. Can't figure it out
• Alon Eitan: i wrote "if $("#parent option").length > 0) {".... change to "if ($("#parent option").length > 0) {"

Answer 2

Solutions:

1)

 if(selectedSwitch != '' && selectedSwitch !=0)

• you are shorting your OR statement, needs to be an AND.

2)

$(".parentcheck").click(function(){
 if($(this).val() == "1") 
 {
 $('#parent).show();
 $('#switch').attr('disabled', '');
 }
 else {
 $('#parent').val('');
 $('#parent').hide();
 $('#switch').val("Select one...");
 $('#switch').attr('disabled', 'disabled');
 }
});

• To set the value of the select, you need to give it the actual value of the index you want.

3) Set a boolean flag in your AJAX function, and then in the click listener only enable the selectbox if(flag).

• demonoid: 3 doesn't change. WHy not to set $('#switch').val(""); too? and 3rd answer is not clear. i'm newbie to js
• demonoid: ok. second problem has gone too. left last third one. i'm gratefull. thx. BTW upvote my question so that i can upvote your answer too
• demonoid: Are you there? Your idea sounds good. PLease help to realize it for 3rd problem
• mozillanerd: Looks like they have directed you in the right direction. Please pastebin your current state and your current question(s)