Javascript and dynamic variables... Again

So I'm a total JS newb. I've read a hundred other posts, tried their solutions, and I can't seem to get it to work to save my life.

Here's the problem:

I have JS and ajax that work. But only on explicitly expressed values. The minute I try to abstract it to handle all the variables it stops working.

I'm also open to a better way of doing this, but this is what I've figured out so far based on my limited knowledge.

I have a very very large form. Nearly 400 hundred fields for "in the field" data acquisition on mobile phones. Bandwidth isn't an issue, but stability and reliability are, so the form is supposed to send each piece of data over as it's entered, allowing for changes and alterations, until it's ready to be submitted. Until that time it sends back the same info which is then used to display a green dot to verify that the data has in fact been stored. So for every form field, there is a <span> with an id named after it in the form FormFieldAStatus. I've included it below.

Form snippet:

<input type="text" class="form-textbox validate[required]" id="input_1" name="formFieldA" size="20" onchange="saveData(); readData()" />
<span class="ajax-success" id="formFieldAStatus"></span>

Here's the code that works:

function readData() {
  new Ajax.Request('AjaxRead.php', {
    method: 'post',
    parameters: $('Worksheet').serialize(true),
    onSuccess: function(transport) {
      var icon = '<img src="images/greendot.png" align="bottom" style="margin-right:5px;">';
      if (transport.responseText) {
        var json=transport.responseText.evalJSON();
        if(json.formFieldA) { 
          var status = $('formFieldAStatus'); 
          status.update(icon); } 
        if(json.formFieldB) { 
          var status = $('formFieldBStatus'); 
          status.update(icon); } 
        if(json.formFieldC) { 
          var status = $('formFieldCStatus'); 
          status.update(icon); } 
      }
    },
    onFailure:function(){ alert('Something went wrong...') }
  });
}   

Seriously. I'm not putting 400 of those lines in to check every field. That's nuts.

Here's the code that should work but doesn't.

function readData() {
  new Ajax.Request('AjaxRead.php', {
    method: 'post',
    parameters: $('Worksheet').serialize(true),
    onSuccess: function(transport) {
      var icon = '<img src="images/greendot.png" align="bottom" style="margin-开发者_如何学Pythonright:5px;">';
      if (transport.responseText) {
        var json=transport.responseText.evalJSON();
        for(var key in json) {
          if(!json[key]=='') {
            var statusName=key+'Status';

// Take your pick of the following. I've tried them all.                

            var status = $(statusName);
            var status = $(window[statusName]);
            var status = $(key+'Status');
            var status = $(window[key+'Status']);
            eval("var status = $('"+key+"Status');");

// Did any of them work ever?

            status.update(icon); }
        }
      }
    },
    onFailure:function(){ alert('Something went wrong...') }
  });
}   

Any assistance would be greatly appreciated. And if there is a better way to do this, then I'm all ears.

Cheers.

Latest details:

I added this:

console.log('statusname: '+statusName);
console.log('status: '+status);
console.log('status Object: '+Object.inspect(status));

And it spat out:

statusname: fieldNameAStatus 
status: [object HTMLElement] 
status Object: <span id="fieldNameAStatus" class="ajax-success"> 

for each of the methods I was trying...

the minute I uncomment this:

status.update(icon); 

I get this instead:

statusname: formIDStatus 
status: null 
status Object: null

That's weird, right?

Ok. So now that I have the console.log thing down, (personal aside, thankyouthankyouthankyouthankyouthankyouthankyouthankyouthankyou for educating me about it), I decided to take a look at what it shows when I use the working manually specified code for each field.

status: [object HTMLElement]
status Object: <span id="fieldNameAStatus" class="ajax-success">

Here's what we have:

Working code: keys are read, status object created, which is an html string defining the <span> it should, and updates with no problems.

Non-working: keys are read, status object created, which is an html string defining the <span> it should but the call to update the object kills it on the first iteration of the loop.

What now?

Try:

var statusName=json[key]+'Status';

It looks like you're just grabbing the key and trying to use that as opposed to the value. Also make sure to perform a json.hasOwnProperty(key) when using "for in". If you console.log(!json[key]=='') after the for what is the output?

var statusName = json[key] + 'Status';

Ok. It works. I figured it out. Turns out that it was dying when one of the fields on the form was getting passed but there was no span for it to put anything. It just so happened that the very first one it came across was the form itself. I don't particularly need the form name but the JS functionality the form came with breaks if it's not there. I couldn't get my if statement that looks to see if the field is empty or not to ignore it, so it stays. No biggy.

I wouldn't have been able to figure that out with out the clue in to console.log. Saved my bacon.

Thanks again. Here's the final code:

function readData() {
  new Ajax.Request('AjaxRead.php', {
    method: 'post',
    parameters: $('Worksheet').serialize(true),
    onSuccess: function(transport) {
      var icon = '<img src="images/success.png" align="bottom" style="margin-right:5px;">';
      var noicon = '';
      if (transport.responseText) {
        var json=transport.responseText.evalJSON();
        for(var key in json) {
          var statusName=key+'Status';
          var status = $(statusName); 
          if(!json[key]=='') {
            status.update(icon); }
          else {
            status.update(noicon); }
        }
      }
    },
    onFailure:function(){ alert('Something went wrong...') }
  });
}

Where this is the HTML to update;

<span class="ajax-success" id="fieldNameAStatus"></span>

Cheers