CODEWITHSUNDEEP
phpjavascripthtml
Micheal
Micheal

Reputation: 2322

Simulate on click feature with javascript disabled

I have the following input radio button in my page(among other things) which displays a select input box upon checking that radio button.

This is implemented using javascript. Now the client also wants this select box to be displayed on clicking the radio button if javascript is disabled.

Is that even possible without javascript? The only other way i see is have an intermediate form submit button which does handling? I am not sure how to go about it. Any help would be appreciated!

here is my code so far:

<td style="visibility:<?= $Visible;?>" id="rmark1"><span>Mark question?</span></td>
<td style="visibility:<?= $Visible;?>" id="rmark2" nowrap>
<input type="radio" id="mail1" name="mail" value="GE" onClick="showMark();" <?= $check;?> >
            <select id="ReturnMarkings" name="ReturnMarkings">
                <option value=''>Please Choose One:</option>
                <option value='1' <?= $Array[1];?>>Mark 1</option>
                <option value='2' <?= $Array[2];?>>Mark 2</option>

            </select>

function showMark() {
    var pcRMark1=document.getElementById('rmark1');
    var pcRMark2=document.getElementById('rmark2');

    pcRMark1.style.visibility="visible";
    pcRMark2.style.visibility="visible";
}

Upvotes: 0

Views: 233

Answers (4)

Jeff
Jeff

Reputation: 12418

@bfavaretto and @lostsource answers are great-- but this doesn't require PHP and works in Chrome:

<style type="text/css">
    #ReturnMarkings {
        display: none;
    }
    :target {
        display: inline !important;
    }
</style>

<input type="radio" id="mail1" name="mail" value="GE"><a style='width:12px; height:12px; display:inline-block; margin-left:-12px;' href='#ReturnMarkings'></a>  

<select id="ReturnMarkings" name="ReturnMarkings">
                <option value=''>Please Choose One:</option>
                <option value='1'>Mark 1</option>
                <option value='2'>Mark 2</option>
            </select>

props to @lostsource for the radio button link code

demo @ http://jsfiddle.net/MT5db/

edit:

As pointed out in the comments, this doesn't actually 'check' the radiobutton. Here's a cheap hack to fix, untested outside jsfiddle:

http://jsfiddle.net/MT5db/1/

Upvotes: 2

lostsource
lostsource

Reputation: 21830

To achieve a similar effect you would need to use a combination of PHP and CSS. The following changes will have to be applied. (hold on tight, this will NOT be pretty)

The radio button needs to be changed to a link, assuming your page is called form.php the link will have to become like this:

<a href='form.php?showmark=true'>Show Mark</a>

Just below your select box add the following logic, by which PHP will inject CSS which will make your drop down visible:

<select id="ReturnMarkings" name="ReturnMarkings">
     <option value=''>Please Choose One:</option>
     <option value='1' <?= $Array[1];?>>Mark 1</option>
     <option value='2' <?= $Array[2];?>>Mark 2</option>
</select>

<?
   if(isset($_GET["showmark"])) {
?>

        <style type='text/css'>
        #ReturnMarkings {
            visibility:visible!important;
        }​
        </style>
<?
   }
?>

I do not particularly suggest mixing PHP / Markup / CSS, but this might be your only solution

Upvotes: 3

bfavaretto
bfavaretto

Reputation: 71939

Depending on the browser's CSS support, this could work:

#ReturnMarkings{ display: none; }
#mail1:checked+#ReturnMarkings { display:inline; }​

See jsfiddle demo.

It relies on the CSS adjacent sibling selector, which is supported by IE8+ according to caniuse.com. I also relies on the :checked pseudo-class, which is IE9+ according to MDN.

Upvotes: 4

Madbreaks
Madbreaks

Reputation: 19549

No, not possible without JavaScript.

Upvotes: -1

Related Questions