CODEWITHSUNDEEP
javascripthtmldom
Joel
Joel

Reputation: 895

How do I get the content of a <td> using JavaScript?

My HTML 

<tr class="g1">
    <td id="saveursqte_box[]">
        <div class="t">
            xxxxxxxxxxxxx
            <div class="r">
                <div class="a">
                </div>
                <img src="images/saveurs/saveur_test.jpg" width="125" border=0>
            </div>
        </div>
    </td>
    <td class="i">
        <input type="text" name="saveursqte[]" alt="2.95" value="" size="3" onBlur="__sumform();">
    </td>
</tr>

What I'm trying to do

I want to get the contents of: <td id="saveursqte_box[]"> using javascript.

which is:

<div class="t">
    xxxxxxxxxxxxx
    <div class="r">
        <div class="a">
        </div>
        <img src="images/saveurs/saveur_test.jpg" width="125" border=0>
    </div>
</div>

I tried this javascript:

var saveursqte_box = document.getElementsById('saveursqte_box[]');

and then

htmltotal = htmltotal + saveursqte_box[i].innerHTML;

but javascript doesn't seem to like me :-(

Upvotes: 0

Views: 7300

Answers (4)

Joel
Joel

Reputation: 895

Thanks to all! I know my Javascript skills are low but by combining your answers together I came with this and it works perfectly :

htmltotal += document.getElementById('saveurmoisqte_box_' + i).innerHTML;

As per your answer, I removed the "s" of getElementById. My bad: I copied getElementsByName and then replaced the Name by Id... This is why there was a "s" there. The kind of mistake that can waste you a week to debug... 

After that, I rename my <td id="extrasqte_box[]"> with <td id="extrasqte_box_0">. I thought you could write ids arrays like you do with names (ex: name="xxxx[]") and then iterate but I was wrong.

With that in place it works perfectly! Not bea-u-tiful but it works.

What I'm actually doing with this is:

I have an order form with many items and when you fill an input (quantity), an hover image of the product appears to its right... and when you move away (onBLur), the form total is updated, AND using the function here above, I get the content of the <td> (including the hover image) and put a summary of the items chosen in the "checkout section". The result is super-clean for the user and user-friendly. The inconvenient is I hope this makes sense to you.

Upvotes: 0

Mouse Food
Mouse Food

Reputation: 231

Also: saveursqte_box[i] i is not defined. Just use saveursqte_box

Upvotes: 0

Adam Franco
Adam Franco

Reputation: 86108

In addition to @scrappedcola's note about there being no 's' in getElementById, you may also be having problems using square brackets in the element id.

I ran your example in Firefox 4 with <td id="saveursqte_box"> and it worked, whereas using <td id="saveursqte_box[]"> I got NULL as the result of getElementById().

Upvotes: 1

scrappedcola
scrappedcola

Reputation: 10572

It is document.getElementById no "s". This document.getElementById('saveursqte_box[]'); returns a single dom element not an array like jQuery.So the code to get the innerHTML would be:

htmltotal += saveursqte_box.innerHTML;

Upvotes: 1

Related Questions