CODEWITHSUNDEEP
javascripthtml
Lilly Shk
Lilly Shk

Reputation: 147

Retaining the radio button even after the submit button is clicked

I have 2 radio buttons 1.)Visit log and 2.)Case history. And a submit button "GET Report".

When I click on Case history I get 2 other sub radio buttons saying "incident" and "sources", My problem is after making selection among these sub radio buttons and clicking on submit, the sub radio buttons vanish.

I need the radio sub radio buttons to stay even after clicking on submit.

This is my code:

<head>
      <script type="text/javascript">
        function show() { document.getElementById('area').style.display = 'block'; }
        function hide() { document.getElementById('area').style.display = 'none'; }

      </script>
    </head>
    <body>        
      <form name="radios" method="GET">
        <INPUT TYPE=RADIO NAME="X" VALUE="visitlog" onclick="hide();"/>Visit Log
        <INPUT TYPE=RADIO NAME="X" VALUE="Case" onclick="show();"/>Case History
        <div id="area" style="display: none;">
        <INPUT TYPE=RADIO NAME="Y"   VALUE="incident" />Incident
        <INPUT TYPE=RADIO NAME="Y"  VALUE="Source"   />Sources
        </div>
       <input type="submit" name="GETREPORT" value="Get Report" />
      </form>
    </body>

How can I Retain my 2 sub radio buttons with selected radio option even after the submit button? plz help

Upvotes: 0

Views: 1535

Answers (2)

gmo
gmo

Reputation: 9000

You need to READ the form values sent with $_GET method in PHP.

PHP (at the top of your php file)

<?php

// default values
$area_display     = "none";
$checked_visitlog = "";
$checked_case     = "";
$checked_incident = "";
$checked_source   = "";

// only if $_GET is not empty
if ( !empty($_GET) ) {
    // "x" value
    switch ( $_GET["X"] ) {
        case "visitlog":
            $checked_visitlog = "checked";
            break;
        case "Case":
            $area_display = "block";
            $checked_case = "checked";
            break;
    }
    //"y" value
    switch ( $_GET["Y"] ) {
        case "incident":
            $checked_incident = "checked";
            break;
        case "Source":
            $checked_source = "checked";
            break;
    }
}

?>

Then, when you set up the HTML write those values and add the property.

HTML

<head>
    <script type="text/javascript">
    function show() {
        document.getElementById('area').style.display = 'block';
    }

    function hide() {
        document.getElementById('area').style.display = 'none';
    }
    </script>
</head>

<body>
    <form name="radios" method="GET">
        <input <?php echo $checked_visitlog;?> type="radio" name="X" value="visitlog" onclick="hide();" />Visit Log
        <input <?php echo $checked_case;?> type="radio" name="X" value="Case" onclick="show();" />Case History
        <div id="area" style="display: <?php echo $area_display;?>;">
            <input <?php echo $checked_incident;?> type="radio" name="Y" value="incident" />Incident
            <input <?php echo $checked_source;?> type="radio" name="Y" value="Source" />Sources
        </div>
        <input type="submit" name="GETREPORT" value="Get Report" />
    </form>
</body>
</head>

Upvotes: 1

maxeh
maxeh

Reputation: 1583

Just check on your page if the submit button was clicked and then echo style ="display:block". Otherwise you echo style="display:none".

Of course your javascript disappears after reloading the page.

   <body>        
  <form name="radios" method="POST">
    <INPUT <?php if (isset($_POST["X"]) && $_POST["X"] == "visitlog") echo "checked ";?> TYPE=RADIO NAME="X" VALUE="visitlog" onclick="hide();"/>Visit Log
    <INPUT <?php if (isset($_POST["X"]) && $_POST["X"] == "Case") echo "checked ";?>TYPE=RADIO NAME="X" VALUE="Case" onclick="show();"/>Case History
    <?php if (isset($_POST["submit"])) echo "<div id=\"area\" style=\"display:block\">"; else echo "<div id=\"area\" style=\"display:none\">"; ?> 
    <INPUT TYPE=RADIO NAME="Y"   VALUE="incident" />Incident
    <INPUT TYPE=RADIO NAME="Y"  VALUE="Source"   />Sources
    </div>
   <input type="submit" name="submit" value="Get Report" />
  </form>
</body>

Upvotes: 0

Related Questions