running PHP code on an onclick event [duplicate]

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
– claywhipkey, Commented Apr 12, 2016 at 16:13
ID's Must Be Unique, specifically because it will cause problems in JavaScript and CSS when you try to interact with those elements. — Jay Blanchard
– Jay Blanchard, Commented Apr 12, 2016 at 16:15
Additionally (based on your title) the only way to run PHP code with JavaScript is by using AJAX. — Jay Blanchard
– Jay Blanchard, Commented Apr 12, 2016 at 16:17

AceKYD · Accepted Answer · 2016-04-12 16:17:34Z

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, 2016 at 16:17

AceKYD

1,1402 gold badges10 silver badges14 bronze badges

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

2 Comments

Carl Wirkus Over a year ago

knew it had to be something simple :) thanks alot!! been staring at this for over an hour

AceKYD Over a year ago

Glad to help @CarlWirkus... Dont forget to mark it as the answer :)

Pingumask · Accepted Answer · 2016-04-12 16:24:29Z

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, 2016 at 16:24

Pingumask

114 bronze badges

Comments

Roger · Accepted Answer · 2016-04-12 16:20:50Z

0

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>";
}

answered Apr 12, 2016 at 16:20

Roger

3,2661 gold badge25 silver badges38 bronze badges

Collectives™ on Stack Overflow

running PHP code on an onclick event [duplicate]

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related