Member Avatar for Kris_2

Hello,

I'm relatively new to php and ajax. I'm missing a key concept I think, which is causing my unexpected result.

I have a php pure css navbar. User selects menu item, which is a button that launches javascript

 <script>
 function loadXMLDoc(yearurl)
 {
  var xmlhttp;
  if (window.XMLHttpRequest) // code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
  else // code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  xmlhttp.onreadystatechange=function()
  {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
     document.getElementById("elps_mainbox").innerHTML=xmlhttp.responseText;
  }
  xmlhttp.open("GET",yearurl,true);
  xmlhttp.send();
 }
 </script>

I pass to loadXMLDoc a php url that contains several variables including itog=[0 or 1]. The response goes to div element ELPS_MAINBOX. In the URL php code are two radio buttons:

 if ($itog==0)
 {
  printf("<input type=\"radio\" name=\"chk1\" id=\"Ellipse\" onclick=\"loadXMLDoc('".
         "show_data_stat.php".
         "?stat=%s&year=%4.4d&intf=%d&itog=0')\" checked=\"checked\"/>\n",$stat,$year,$intf);
  printf("<input type=\"radio\" name=\"chk1\" id=\"Uptime\" onclick=\"loadXMLDoc('".
         "show_data_stat.php".
         "?stat=%s&year=%4.4d&intf=%d&itog=1')\"/>\n",$stat,$year,$intf);
 }
 else
 {
  printf("<input type=\"radio\" name=\"chk1\" id=\"Ellipse\" onclick=\"loadXMLDoc('".
         "show_data_stat.php".
         "?stat=%s&year=%4.4d&intf=%d&itog=0')\"/>\n",$stat,$year,$intf);
  printf("<input type=\"radio\" name=\"chk1\" id=\"Uptime\" onclick=\"loadXMLDoc('".
         "show_data_stat.php".
         "?stat=%s&year=%4.4d&intf=%d&itog=1')\" checked=\"checked\"/>\n",$stat,$year,$intf);
  }

The expected behavior is that when itog=0 (defined initially by the navbar menu selection), Ellipses checkbox is checked. When itog=1, Uptime checkbox is checked instead. Once the page is loaded, the user should be able to check one of these radio buttons. When one is checked, this URL should reload displaying new div content.

What happens instead are two things:
1: when the user selects the menu item, the radio buttons are displayed, but neither is checked. The rest of the div content is displayed fine.
2: when the user selects a radio button, the div content changes as expected (itog is being interpreted correctly by the rest of the php code), but the radio buttons do not retain their check and both are unchecked again. It is as if the "checked=checked" property is not visible to the browser.

Can anyone explain to me what I'm missing?

Thank you,
Kris

Edited by JorgeM because: Move to JavaScript category
  • 2 Contributors
  • 3 Replies
  • 391 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Kris_2

Dani AI

Generated

A short expert note for (and anyone hitting the same symptom):

The behaviour described — the server prints a checked="checked" radio but, after the AJAX innerHTML replacement, neither radio shows selected (and subsequent AJAX reloads still show both unchecked) — is a common DOM/scoping/parsing interaction rather than a PHP logic error. The simplest, diagnostic-first approach is best.

Quick checklist to narrow the cause

  • Inspect the AJAX response body in DevTools → Network to confirm the checked="checked" text is actually present.
  • After the response is injected, inspect the live DOM (Elements panel) and test in the console:
    • document.getElementsByName('chk1') — verify how many inputs exist and their checked and defaultChecked values.
  • Search the whole document for other inputs with the same name="chk1" (name collisions can cause odd radio-group behavior).
  • Confirm the returned markup is valid HTML (stray tags or incorrect self-closing syntax can change how the browser parses attributes).

Practical fixes (small, reliable changes)

  • Set the radio state from JavaScript after inserting the HTML (most robust across browsers). Example pattern to run after the innerHTML update:

    (function(itog){
  var radios = document.getElementsByName('chk1');
  if (!radios.length) return;
  radios[Number(itog) ? 1 : 0].checked = true;
})('0'); // server can inject '0' or '1' or set a data-itog on the container

  • Scope the group to avoid collisions (wrap the radios in a form or give the name a unique suffix).

  • Prefer attaching listeners with addEventListener or event delegation on the container rather than inline onclick attributes; that makes it easier to re-bind handlers after each AJAX replace.

  • Alternatively, build the inputs with DOM methods (createElement, set .checked) instead of using raw innerHTML.

’s button workaround is pragmatic and works; if radio semantics/keyboard access are desired, the small JS post-insert fix or scoping the name will restore expected behavior reliably.

Recommended Answers

All 3 Replies

Member Avatar for Kris_2

I have posted this to the AJAX/DHTML forum, since I think that is probably a better place for it.

Member Avatar for JorgeM

Please, only post your thread once. I will move this thread to the JavaScript forum category for you. You can always click on "flag bad post" in the future to get a moderator's attention.

thank you.

Member Avatar for Kris_2

To answer my own question, I was not able to figure this out. But a workaround to abandon radio buttons and use <button type=buttons> instead, passing the function call and vars with onclick.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.