running PHP code on an onclick event

Question

My function generates a table with $data from a mysqli query requesting sub forum names.

function forum_links($data){
//print_r($data);
echo "<div id = 'sub_forums'>
        <table>";
foreach($data as $name){
echo "
        <tr>
            <td id='sub_forum_image'>
            <img src='images/favicon_text.ico' alt='MWGA'>
            </td>
            <td id='sub_forum_td'>
            <a href='forum?forum={$name[0]}'>{$name[0]}</a>
            </td>
        </tr>";
}
echo "</table></div>";
}

When the text is clicked im checking if the varibale forum is set and if set I want to hide the div 'sub_forums'

<?php 
    if (isset($_GET['forum'])) {
    echo "is set";
    ?> <script>sub_forum_hide();</script> <?php
    }
?>

The error I'm getting

Uncaught TypeError: Cannot read property 'style' of null.

I figure this has something to do with the sequencing of my document because I've use the exact same hide style.display = "none" in other parts.

function sub_forum_hide(){
    document.getElementById("sub_forum").style.display = "none";
}

I've tried moving the sub_forum_hide() to the bottom of my document but I still get the same error. Just for reference the "is set" echo does work when I click the the text.

I'm noticing that in your top snippet you are setting the ID to `sub_forums` (plural) and then later trying to hide it using the ID `sub_forum` (singular). — claywhipkey, Apr 12 '16 at 16:13
[ID's Must Be Unique](http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme), specifically because it will cause problems in [JavaScript](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) and CSS when you try to interact with those elements. — Jay Blanchard, Apr 12 '16 at 16:15
Additionally (based on your title) the only way to run PHP code with JavaScript is by using AJAX. — Jay Blanchard, Apr 12 '16 at 16:17

score 1 · Answer 1 · answered Apr 12 '16 at 16:17

1

From the look of your code.. You dont have any element with ID "sub_forum" which is why it is null. Instead you have a div with ID = "sub_forums"... So your function should actually be

function sub_forum_hide(){
    document.getElementById("sub_forums").style.display = "none";
}

Probably a typo on your part.

Next time, try understanding the error first... would save you a lot of trouble and help in debugging.

answered Apr 12 '16 at 16:17

AceKYD

1,100
1
10
14

knew it had to be something simple :) thanks alot!! been staring at this for over an hour – Carl Wirkus Apr 12 '16 at 16:21
Glad to help @CarlWirkus... Dont forget to mark it as the answer :) – AceKYD Apr 12 '16 at 16:27

score 1 · Answer 2 · answered Apr 12 '16 at 16:24

1

Looks like your title doesn't really match your problem.

To solve the problem you actually described, you'll need to correct the id of your divs as others pointed out.

If you want to execute some php from javascript, you'll need to use Ajax

answered Apr 12 '16 at 16:24

Pingumask

11
4

score 0 · Answer 3 · answered Apr 12 '16 at 16:20

Change sub_forums to sub_forum.

function forum_links($data){
//print_r($data);
echo "<div id = 'sub_forum'>
        <table>";
foreach($data as $name){
echo "
        <tr>
            <td id='sub_forum_image'>
            <img src='images/favicon_text.ico' alt='MWGA'>
            </td>
            <td id='sub_forum_td'>
            <a href='forum?forum={$name[0]}'>{$name[0]}</a>
            </td>
        </tr>";
}
echo "</table></div>";
}

running PHP code on an onclick event

3 Answers3