JQuery help with checkboxes and their values

Question

Hi everyone. I am very new to javascript and JQuery but I managed to get my first ajax script almost working 100%. Maybe today will be my lucky day and I can finish this up. :)

Let me give you guys a sample of each file so you know what is what. I believe that my last try at figuring this out was not successful because I was confusing these files. They are all js and have the exact same syntax.

What I have are 2 javascript files. One is called ajax.js and has the folling syntax. it calls ajax.php.

$("#admEmpID").bind("change", function(e){
  $.getJSON("ajax.php?e=" + $("#admEmpID").val(),
        function(data)
        {
          $.each(data, function(i,item)
          {
            if (item.field == "admEmpStatus")
            {
              // ?? radio buttons
            }
            ............. etc

The next file I have is this script and is called admEmp.js. I think that this one is for my form validation.

$(function() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#FFDDAA"});
  });
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });

  $(".admEmpBtn").click(function() {
     // validate and process form
     // first hide any error messages
    $('.error').hide();

      var admEmpID = $("input#admEmpID").val();
    var admEmpStatus = $("input[name='admEmpStatus']:checked").val();

     $.ajax({
  type: "POST",...............etc.

What I would like to do is toggle my checkboxes according to the database results. If the result from the database is = 1 then the checkbox should be checked otherwise it should be unchecked.

These scripts that I have in place now will populate my textboxes from the values in the database so for someone like myself who has no idea what is happening with JQuery and its innerworkings, it is only natural for me to assume that the checkboxes will also be filled with the on/off values. Maybe I am incorrect. The last time I posted on SO looking for help, a guy mentioned that I needed to toggle the results with server side code. Is this correct or will JQuery do it for me?

I also have radio buttons in addition to the checkboxes that I need to show the values for as well. Just as a side note, the checkboxes are not grouped; they each have their own value.

Thanks for any help you guys can provide.

---

OK. "dz" said that I should put ('#admCustRptDly').attr('checked', true); into my script to see if that will allow me to see the checked attribute but it doesn't. The database has a 0 for that checkbox so I sould be seeing no checkmark. I put that into the ajax.js file. Here is what it looks like now.

    else if (item.field == "admCustRptDly" && item.value == "1")
    {
    //  $("checkbox#admCustRptDly").attr("checked", "checked");
      $('#admCustRptDly').attr('checked', true);
    }

---

Here is what I did that makes me think that I may be making some progress. I put an alert inside of the condition and I do NOT get an alert. If I go to a customer that does have the db value set to 1, then I do get the alert. That's more than I was getting before. But again, I am still seeing the checkmark even though the data in the db = '0'

Answer 1

If I understand correctly, you have a form that is updated asynchronously via an Ajax call when you change the value in the #admEmpID field (first js file).

The second js file contains code to post changes you made to the form back to the server. I don't think it's for form validation (at least not the part you're showing).

But I'm not sure what the problem is. The first js file gets data from the server when you change some text field (#admEmpId). Is that data not shown correctly? You mention that textboxes are filled with the correct data. Are the checkboxes and radiobuttons not selected when they should be? In that case, you must first make sure you understand what data is returned from the server (contained in the data variable in the first js file). Then you must verify that the script addresses the right elements on your page to be updated.

Answer 2

Checkboxes behave a little differently than other input fields. When you have <input type="text" name="field1" value="foo" /> for example, the text field is automatically populated with "foo".

However, if you have <input type="checkbox" name="field2" value="1" />, the checkbox doesn't have anything to populate. This is because the checkbox has a special "checked" attribute that determines whether or not it is checked by default. As such, it's very possible your script that populates your textboxes are putting in the correct value for the checkbox, but are not setting the checked attribute.

To do so with jQuery, you can do $('#checkboxid').attr('checked', true);.

Answer 3

You may just need another else if clause in your javascript for the case when you want to uncheck a box:

else if (item.field == "admCustRptDly" && item.value == "0")
{
  $('#admCustRptDly').attr('checked', false);
}

You could, however, simplify both cases into a single statement like so:

else if (item.field == "admCustRptDly")
{
  $('#admCustRptDly').attr('checked', ((item.value == "1") ? true : false));
}