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

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 — LeeR
– LeeR, Commented Sep 29, 2011 at 23:57
can your first problem be solved by using && instead of ||. if the value is '0' this condition will evaluate to be true. — dm03514
– dm03514, Commented Sep 29, 2011 at 23:58

Alon Eitan · Accepted Answer · 2011-09-30 00:40:10Z

2

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

edited Sep 30, 2011 at 0:40

answered Sep 30, 2011 at 0:04

Alon Eitan

12k8 gold badges51 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

demonoid Over a year ago

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 Over a year ago

It doesn't deselect currently selected option of #switch and #parent selectbox

demonoid Over a year ago

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 Over a year ago

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 Over a year ago

i wrote "if $("#parent option").length > 0) {".... change to "if ($("#parent option").length > 0) {"

|

RestingRobot · Accepted Answer · 2011-09-30 00:15:40Z

1

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

answered Sep 30, 2011 at 0:15

RestingRobot

2,9881 gold badge25 silver badges36 bronze badges

4 Comments

demonoid Over a year ago

3 doesn't change. WHy not to set $('#switch').val(""); too? and 3rd answer is not clear. i'm newbie to js

demonoid Over a year ago

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 Over a year ago

Are you there? Your idea sounds good. PLease help to realize it for 3rd problem

mozillanerd Over a year ago

Looks like they have directed you in the right direction. Please pastebin your current state and your current question(s)

Collectives™ on Stack Overflow

Having issue with Javascript

2 Answers 2

12 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related