How to keep selection on radio buttons after refreshing the page

[Moderns]

Hi,

I have a php page called: radio_page.php, it contains two radio buttons. First radio button is checked as default when loading the page. I need when clicking on second radio button to refresh the page and keep selection on second radio button, I am trying that as below, but it does not work. After refreshing the page the selection returns to the first radio button. Please advise. Thanks.

////////////radio_page///////
echo "<input type=radio id=rad1 checked=checked name=rad value=radio1 onclick=SelectRadio('rad1')> ";

echo "<input type=radio id=rad2 name = rad value=radio2 onclick=SelectRadio('rad2')> Time";


//////////javascript//////////
function SelectRadio(rad){
var selected_radio = document.getElementById(rad).value; 
if(rad == 'rad2'){
     window.location.href = 'radio_page.php';
     document.getElementById(rad).checked = 'checked';

}
else{
     window.location.href = 'radio_page.php';
     document.getElementById(rad).checked = 'checked';

}

}

[scrappedcola]

You will need to maintain the selection on the server side either by setting the selected radio button when you render it or via serverside generated javascript that sets the checked attribute, as you ha

ve above. The reason why the code you have doesn't work is because the currently rendered javascript refreshes along with the page (doesn't maintain the current execution thread) when you use location.href. So you will also want to send params on the url that are looked for via the php (not really certain the php code for getting url params as I'm most familiar with ASP and Perl) and then use that param to set the checked attribute on the radio buttons that you are re-rendering.

/* javascript */
function SelectRadio(rad){
var selected_radio = document.getElementById(rad).value; 
if(rad == 'rad2'){
window.location.href = 'radio_page.php';
document.getElementById(rad).checked = 'checked';

}
else{
window.location.href = 'radio_page.php?selected=rad2';
}

///////////radio_page///////
var selected= "the url value selected here";

if(selected == "rad2")
{

   echo "<input type=radio id=rad1  name=rad value=radio1 onclick=SelectRadio('rad1')> ";

  echo "<input type=radio checked=checked id=rad2 name = rad value=radio2 onclick=SelectRadio('rad2')> Time";
}else 
{
echo "<input type=radio checked=checked id=rad1  name=rad value=radio1 onclick=SelectRadio('rad1')> ";

  echo "<input type=radio id=rad2 name = rad value=radio2 onclick=SelectRadio('rad2')> Time";
}

An even better way would be to avoid the entire page refresh and use an Ajax call to only refresh the parts of the page that are actually being changed. What you would do is send a post/get back to the server and the server would render out the parts you need and then the callback function on the client side would swap out the parts the server sent. Here is a decent tutorial on basic ajax concepts

[Moderns]

You will need to maintain the selection on the server side either by setting the selected radio button when you render it or via serverside generated javascript that sets the checked attribute, as you ha

ve above. The reason why the code you have doesn't work is because the currently rendered javascript refreshes along with the page (doesn't maintain the current execution thread) when you use location.href. So you will also want to send params on the url that are looked for via the php (not really certain the php code for getting url params as I'm most familiar with ASP and Perl) and then use that param to set the checked attribute on the radio buttons that you are re-rendering.

/* javascript */
function SelectRadio(rad){
var selected_radio = document.getElementById(rad).value; 
if(rad == 'rad2'){
window.location.href = 'radio_page.php';
document.getElementById(rad).checked = 'checked';

}
else{
window.location.href = 'radio_page.php?selected=rad2';
}

///////////radio_page///////
var selected= "the url value selected here";

if(selected == "rad2")
{

   echo "<input type=radio id=rad1  name=rad value=radio1 onclick=SelectRadio('rad1')> ";

  echo "<input type=radio checked=checked id=rad2 name = rad value=radio2 onclick=SelectRadio('rad2')> Time";
}else 
{
echo "<input type=radio checked=checked id=rad1  name=rad value=radio1 onclick=SelectRadio('rad1')> ";

  echo "<input type=radio id=rad2 name = rad value=radio2 onclick=SelectRadio('rad2')> Time";
}

An even better way would be to avoid the entire page refresh and use an Ajax call to only refresh the parts of the page that are actually being changed. What you would do is send a post/get back to the server and the server would render out the parts you need and then the callback function on the client side would swap out the parts the server sent. Here is a decent tutorial on basic ajax concepts

Thanks for your answer. I will try it and let you know :-)

[Moderns]

I do not know how to thank you! I just tried it and it worked super fine :-)

Thanks a lot and Daniweb can mark this thread as solved :)