Text boxes not disappearing after upper level parent changed

Question

In my page, there are 3 levels drop-down selection boxes, children are hidden until the parent is selected.

Levels
Health test organization (Level 1) -> Test Type (Level 2) -> Test Result (Level 3)

In the end of the one route, two boxes (LDI and RDI) appear in addition to the test result at level 3. The problem is; although the boxes disappear when I change level 3, those don't disappear if I change level 1 or 2.

Here are screen shots of my problem,
No selection,

Level 1 selected,

Level 2 selected,

Level 3 selected and boxes appear,

And the problem,
Problem
I just changed Health test organization (Level 1) above and the two boxes (LDI and RDI) are still there.

By the way, here is JavaScript of that part coded within the PHP script;

function options($type)
{
    if($type== 'org')
    {
        return array('Not selected'=>'','OFA'=>'ofa','CERF'=>'cerf','CHIC'=>'chic','AHT'=>'aht','PennHip'=>'pennhip','Other'=>'other');
    }
    if($type== 'pass')
    {
        return array('Not selected'=>'','PASS'=>'1','FAIL'=>'0');
    }
    if($type== 'type')
    {
        return array('Not selected'=>'',
        'Eye (CERF)' => 'eye',
        'Cardiac (OFA)' => 'cardiac',
        'Elbow (OFA)' => 'elbow',
        'Hips (OFA)' => 'hips',
        'Patellar Luxation (OFA)' => 'pl',
        'Thyroid (OFA)' => 'thyroid',
        'DNA (OFA)' => 'dna',
        'Primary Open Angle Glaucoma (OFA)' => 'poag',
        'Other (not active yet)' => 'other',
        'Longevity (not active yet)' => 'longevity',
        'Genotype (not active yet)' => 'genotype',
        );
    }
    if($type== 'result')
    {

    }
}

function get_for_dog($id)
{
    $arr[':id'] = $id;
    $str = 'SELECT * FROM ' . $this->table . ' WHERE dog=:id';
    if ($this->obj_debug == 1 || $this->core_debug == 1)
        echo "$str<br>";
    return $this->run_query($str,$arr);
}

function resultdd($test,$result)
{
        $list = array();
        foreach($this->testresults as $txt => $val)
        {
            if(strstr($val,$test.'.') ||$val =='' )
            {
                $list[$txt] = $val; 
            }
        }
        if(sizeof($list) > 0 && $test != '')
        {
            $buf = '<select name="rating">';
            foreach($list as $txt =>$val)
            {
                $buf .= '<option value="'.$val.'" ';
                if($val == $result)
                    $buf .= ' selected ';
                $buf .= '>'.$txt.'</option>
                ';
            }
            $buf .= '</select>';
        }
    return $buf;
}

function customFields($i=0,$r='')
{
    $buf = '';
    if($this->data[$i]['rating'] =='pennhip.ldirdi' || $r =='pennhip.ldirdi')
    {
        $dft = array('ldi'=>'','rdi'=>'');
        if($this->data[$i]['rating_data'] != '')
        {
            $dat = json_decode($this->data[$i]['rating_data'],true);
            if(sizeof($dat) == 2)
                $dat=$dat;
            else
                $dat = $dft;
        }
        else
            $dat = $dft;    
        $buf .= 'LDI <input type="text" name="rating_data[]" value="'.$dat['ldi'].'" /><br><br>';
        $buf .= ' <input type="hidden" name="rating_key[]" value="ldi" />';
        $buf .= 'RDI <input type="text" name="rating_data[]" value="'.$dat['rdi'].'" /><br><br>';
        $buf .= ' <input type="hidden" name="rating_key[]" value="rdi" />';
    }
    return $buf;
}

I'm sure there are ways to get rid of those boxes, I'd appreciate any help.

score 0 · Answer 1 · answered Sep 05 '16 at 04:16

0

This actually looks really confusing, but what are you doing to make the LDI/RDI to display in the first place?

The simplest solution from a glance is to just change the styling of the inputs to display: none when you change the test type, which can be done through onchange().

answered Sep 05 '16 at 04:16

A. L

11,695
23
85
163

The thing is being done is If "Test Result" has chosen as "LDI / RDI - PennHip", those boxes are added to the page with the code I showed in the question. And, I didn't create this framework or any code in this website, I'm just adding some features and correcting som stuff like this. Unfortunately, I am good enough in JavaScript, HTML or PHP to understand your suggestion. Could you please explain how to do those changes? – Dogan Askan Sep 05 '16 at 04:29
Those 4 lines are of very little help to the overall design of the webpage. We'll need to see what happens when you click on 'test type'. Try to find the code that's related to the 'test type' select box so we can see what happens during 'onchange'. Also, does this use jquery? – A. L Sep 05 '16 at 04:32
I updated the code to explain clearer what that PHP does. I hope it helps. And, yes, its uses jquery. – Dogan Askan Sep 05 '16 at 20:05
So what's calling `customFields`? And check whether `if($this->data[$i]['rating'] =='pennhip.ldirdi' || $r =='pennhip.ldirdi')` is always being run regardless of input. Because if it is, then that's highly likely to be your problem as `$buf` is always going to return you the `` stuff. – A. L Sep 05 '16 at 23:59

score 0 · Answer 2 · answered Sep 06 '16 at 21:05

I found out that the functions that control Level 2 & 3 in JavaScript don't set that tag (cfs) as empty when those run. So, in order to solve the issue, I added lines in those functions to set that tag empty everytime those run.

Here are the code and the lines I added,

function popResults()
{
    $("#cfs").html(""); // <-- added this line
    var t = '';
    if($( "select[name='type'] option:selected" ).val().length >0)
        t = $( "select[name='type'] option:selected" ).val();
    else
        t =$( "#testtypes" ).attr("data-type");

    $.ajax({url: "ajax_results.php?test="+t+"&result=" + $( "#testresults" ).attr("data-result"), success: function(result){      
        $("#testresults").html(result);
        $("select[name='rating']").change(function() {
            $.ajax({url: "ajax_customFields.php?r="+$( "select[name='rating'] option:selected" ).val(), success: function(result){
                $("#cfs").html(result); // <-- already there
            }});
        });        
    }});
}

function popTypes()
{
    $("#cfs").html(""); // <-- added this line
    $.ajax({url: "ajax_types.php?org="+$( "select[name='org'] option:selected" ).val()+"&type=" + $( "#testtypes" ).attr("data-type"), success: function(result){
        $("#testresults").html('');
        $("#testtypes").html(result);
        $( "select[name='type']" ).val('');
        $("select[name='type']").change(function() {
            popResults();
        });     
    }});
}

Text boxes not disappearing after upper level parent changed

2 Answers2