Javascript throwing TypeError, document.getElementById when passed PHP variable

Question

I'm trying to write a function that will dynamically display a form (inside a div, of which there will be several instances, thus the weird "id" name) when you click a button. Then, it should POST to a separate PHP file. Here's the code I have so far:

function add_comment_url($table, $id) {
    $html = '<div id="comment' . $id . '" name="comment_box" style="display: none">
        <form action="cgi-bin/add_comment.php" method="post">
            <textarea id="comment" name="comment"></textarea>
            <input type="hidden" name="id" value="' . $id . '">
            <input type="hidden" name="table" value="' . $table . '">
            <input type="submit" name="submit" value="Submit Comment">
        </form></div>
        <input type="button" value="Add Comment" onclick="showComment();">
        <script>
    var id= ' . json_encode($id) . ';
    showComment(id);
    </script>';

    return($html);
}

The "Add Comment" button shows up fine, but I can't get the to display, and the Firefox console shows a "TypeError: div is null" error when I click on the button.

I'm guessing I screwed up the JS variable assignment, but I'm at a loss as to how to fix it. Any thoughts?

EDIT - Final code

I figured out what I did wrong... I was defining the var when I didn't need to! Here's the new function, which works:

function add_comment_url($table, $id) {
$html = '<div id="comment' . $id . '" name="comment_box" style="display: none">
    <form action="cgi-bin/add_comment.php" method="post">
        <textarea id="comment" name="comment"></textarea>
        <input type="hidden" name="id" value="' . $id . '">
        <input type="hidden" name="table" value="' . $table . '">
        <input type="submit" name="submit" value="Submit Comment">
    </form></div>
    <input type="button" value="Add Comment" onclick="showComment(' . $id . ');">';

return($html);

}

If you had looked at the page source your browser receives, you would have noticed that var id= "<?php echo json_encode($id); ?>"; does not produce the expected output. — user1233508
– user1233508, Commented Sep 2, 2013 at 10:56
I did notice that, which is why I knew it was a variable issue. Thanks! — jmd9qs
– jmd9qs, Commented Sep 2, 2013 at 11:21

Barmar · Accepted Answer · 2013-09-02 11:02:26Z

3

You can't use <?php inside PHP strings. You should use string concatenation or interpolation:

function add_comment_url($table, $id) {
    $html = '<div id="comment' . $id . '" name="comment_box" style="display: none">
        <form action="cgi-bin/add_comment.php" method="post">
            <textarea id="comment" name="comment"></textarea>
            <input type="hidden" name="id" value="' . $id . '">
            <input type="hidden" name="table" value="' . $table . '">
            <input type="submit" name="submit" value="Submit Comment">
        </form></div>
        <input type="button" value="Add Comment" onclick="showComment();">
        <script>
        function showComment() {
        var id= ' . json_encode($id) . ';
        div = document.getElementById(\'comment\' + id);
        div.style.display = "block";}</script>';
    return($html);
}

Are you repeating this function definition for every comment block? I would recommend just defining showComment() once, and make it take the commentID as an argument.

edited Sep 2, 2013 at 11:02

answered Sep 2, 2013 at 10:55

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user1233508 Over a year ago

You don't need the double quotes in the JS code surrounding json_encode.

Barmar Over a year ago

@DCoder Good point. And if $id is always a number, you don't really need json_encode.

jmd9qs Over a year ago

@Barmar - Thanks, that cleared up the JS error! However, the <div> doesn't appear when the button is clicked....

Barmar Over a year ago

Are there multiple copies of this code on the page? If so, the showComment function will only be the last one defined. You really should do what I suggested: define the function once, and pass the ID in the argument.

Barmar Over a year ago

There shouldn't be any var id in the comment blocks now.

|

Collectives™ on Stack Overflow

Javascript throwing TypeError, document.getElementById when passed PHP variable

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related