Parsing for 2+ attributes of the same name in JavaScript

[mbewers980]

Hi, this request is sort of 2 questions in 1 but both are related.

Is there a way to parse the HTML of a page, after a user has made changes to the controls on that page (e.g. checking a checkbox that was originally un-checked, or typing text in a text box, etc.), using innerHtml??

I know that using the document.getElementById is only able to return the attributes of a page on load but that it cannot deal with changes to control values once it has loaded.

I have been able to parse the html using innerHtml OK and I know that the .search() method is able to cater for finding the first appearance of a string.

However, I have several checkbox controls on the same page, whose attribute I need to retrieve, in the most efficient way.

Is anyone familiar with this issue and can give me advice on how to do that>?

Many Thanks
Matt

[Rabbit]

I know that using the document.getElementById is only able to return the attributes of a page on load but that it cannot deal with changes to control values once it has loaded.

You have that backwards. document.getElementById is definitely the way to get the value as it currently stands. The innerHTML attribute does not change based on the control's current value. I'm not sure what code you were using but what you have stated is the opposite of what happens.

[gits]

the efficiency of such a code depends a bit on the page and its dynamics, which means can the number of elements to check vary a lot or are there different elements depending on user-interactions etc.

it would help to see some code to give some advice if you have issues with your code.

[mbewers1]

Hi Rabbit & gits, thankyou for your prompt reply. Thanks!

OK so Rabbit, you say that getElementById picks up the current state of the controls on the webpage. Well, what I am attempting to do is test the value of the "checked" attribute on a checkbox and run the method that contains this logic, from a button on my webpage.

The testing logic method for the checkbox in my .js file is:

function TestInpatientBenefitsTry2() {
 
    // test that we are calling this correctly
    alert('Test run started');
 
    var inpatientHarmony5M = "12644_HasBenefit_0";
    var myObjHarmony5M = txt.getElementById(inpatientHarmony5M).attributes("checked");
 
    var inpatientHarmony2M = "12581_HasBenefit_1";
    var myObjHarmony2M = txt.getElementById(inpatientHarmony2M).attributes("checked");
 
    if (myObjHarmony5M == "checked") {
        alert('Harmony 2M is disabled \n because Harmony 5M is selected');
    }
 
    if (myObjHarmony2M == "checked") {
        alert('Harmony 5M is disabled \n because Harmony 2M is selected');
    }
 
    if (myObjHarmony5M != "checked" || myObjHarmony2M != "checked") {
            alert('No outpatient benefits are enabled because no inpatient benefit has been selected');
        }
 
        alert("Test Run Completed");
}
 

And, in case you want to see it, in my vbhtml web page, I call it like so:

    @<input type="button" value="Run Tests" onclick='RunTests()' />
 
function RunTests()
    {
        TestInpatientBenefitsTry2();
    }
 

The test still isn't working as expected - if I have the inpatientHarmony5M box checked then, I would expect to see the alert box; 'Harmony 2M is disabled \n because Harmony 5M is selected' and similarly, I would expect to see the second alert box in my code passage, for the Harmony 5M checkbox.

If I take out the 2nd and 3rd if statement, and have the Harmony 2M checkboxes checked, the relevant checkbox is displayed. However, if I put all three if statements in the function to check the attributes of the checkboxes given the 3 possible scenarios, then none of the messages are displaying.

So I would like to know 2 things:

1. Am I calling and checking the attribute values of the checkboxes correctly in the condition of my 'if' statements?
2. Have I structured my if statements correctly or am I missing some logic?

Thanks again
Matt

[mbewers1]

I've partially resolved the problem as I noticed that I should have been calling the document element to interact with the getElementById operation rather than the txt variable that I had created myself.

However, the correct message doesn't show whether you change the value of the check box on the page and the 3rd if statement, with the != comparisons too look for the possibility that either checkbox is disabled, shows every time.

So it still appears that the latest state of the page is not picked up when the user changes their options!

[gits]

yea - the problem is the wrong basereference for the getElementById-method which is a method of the document-object. a simple basic example to work with is this:

<html>
<script type="text/javascript">
 
function run_test() {
    var id = 'foo';
 
    var test = document.getElementById('foo').checked;
 
    alert(test);
}
 
</script>
<body onload="run_test();">
    <form name="myform"  >
        <input type="checkbox" id="foo">foobar-text</input>
        <input type="checkbox" id="bar">bar-text</input>
        <input type="button" onclick="run_test();" value="Run Test again"/>
    </form>
</body>
</html>
 

glad to hear you already solved your issue.

[Rabbit]

You will see from line 7 of gits post that the value of a checked checkbox is not equal to the string "checked". Rather, the value of a checkbox is stored in the checked property of the object.

So yes, your first question, as it were, in post #4 is answered with yes, you care incorrectly retrieving the value of the checkbox, hence the impression that it is not being updated according to user input.