I am populating combobox on checkbox checked or not click event.
Here is code. I am not solving the bug, JS runs on chrome but not in both IE and Firefox.

checkbox

<input type="checkbox" onclick="selectinactivebatch(this.value);" id="inactive_batch" name="inactive_batch" <?php if(isset($_POST)) echo "checked";?>>

AJAX Code

function selectinactivebatch(checkboxvalue)
{


var check;
if(checkboxvalue=='on')
check=1;
else
check=0;
alert(check); // Always showing value 1
xmlhttpbatch=GetXmlHttpObjectbatch(this.value);
if (xmlhttpbatch==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="selectBatch.php";
url=url+"?action=inactive_batch_collection";
url=url+"&val="+check;
xmlhttpbatch.onreadystatechange=stateChangedbatch;
xmlhttpbatch.open("GET",url,true);
xmlhttpbatch.send(null);
}


function GetXmlHttpObjectbatch()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}


function stateChangedbatch()
{
if (xmlhttpbatch.readyState==4)
{
document.getElementById("txtBatch").innerHTML=xmlhttpbatch.responseText;
}
}

Dani AI

Generated

The problem is the checked state vs the value. If you call the handler with this.value you get the checkbox's value attribute (default "on"), not whether it is checked—so your alert will always show truthy. Also calling GetXmlHttpObjectbatch(this.value) (or using this inside the function) is a second mistake: once you pass a primitive into the function this no longer refers to the element. and were on the right track: test the checked property or give the checkbox an explicit value if you need one.

A minimal, cross-browser fix (keeps your inline handler) — pass the boolean and use a local XHR, check status, and avoid caching:

<input type="checkbox" id="inactive_batch" onclick="selectinactivebatch(this.checked)">

<script>
function selectinactivebatch(isChecked) {
  var val = isChecked ? 1 : 0;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) document.getElementById('txtBatch').innerHTML = xhr.responseText;
      else console.error('AJAX error', xhr.status);
    }
  };
  var url = 'selectBatch.php?action=inactive_batch_collection&val=' + encodeURIComponent(val) + '&_=' + Date.now();
  xhr.open('GET', url, true);
  xhr.send();
}
</script>

Prefer attaching an event and using Fetch for new projects (no inline JS):

document.getElementById('inactive_batch').addEventListener('change', function () {
  var val = this.checked ? 1 : 0;
  fetch('selectBatch.php?action=inactive_batch_collection&val=' + encodeURIComponent(val), {cache:'no-store'})
    .then(r => r.ok ? r.text() : Promise.reject(r.status))
    .then(html => document.getElementById('txtBatch').innerHTML = html)
    .catch(e => console.error('Fetch error', e));
});

Quick troubleshooting: open DevTools Network/Console to see the request and any JS errors, confirm txtBatch exists, make sure server expects GET (or change to POST), and avoid global XHR variables. If you control the server-side checked state, test for the checkbox field specifically rather than testing whether any POST data exists.

Recommended Answers

All 3 Replies

Change checkboxvalue=='on' to just checkboxvalue .

<input type="checkbox" onclick="selectinactivebatch(this.value);" id="inactive_batch" name="inactive_batch" <?php if(isset($_POST)) echo "checked";?>>

Where is the value of that checkbox ? You must have already put that checkbox value. Like:

<input type="checkbox" onclick="selectinactivebatch(this.value);" id="inactive_batch" name="inactive_batch" value="<?php echo $value; ?>" <?php if(isset($_POST['inactive_batch'])) echo "checked";?>>

Hope this help.

Yes, probably you mean this.checked? If you change that and what I said before, it should work (as long as you mean checked, not value).

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.