PHP Javascript cant access echoed element id outside php mode

Question

Humble appologies if this is a stupid question but I cant for the life of me figure out what is wrong here.

I have an echoed element inside php mode:

echo'<select name="picks" id="winner">';
            echo'<option value="'.$row['team1'].'">'.$team1.'</option>';
            echo'<option value="'.$row['team2'].'">'.$team2.'</option>';
    echo'</select>';

Now outside php I try to do a basic javascript GET:

document.getElementById("winner");

However the elemnt is not accessible am I missing something here, is it not possible to get echoed elements Ids?

Yes it is possible but what are you trying to do with that element ? — xNeyte
– xNeyte, Commented May 4, 2015 at 9:56
simply assign it to a variable and then do something basic like get its selected value — Marilee
– Marilee, Commented May 4, 2015 at 9:59

Drakes · Accepted Answer · 2015-05-04 10:46:29Z

You should make sure your DOM has at least loaded before performing element selects. If you can use jQuery, then this is as easy as the following, and you can place this script in the head section, or anywhere in the body:

$(document).ready(function() {
    // Perform any selects on the DOM
});

JS

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
    // The DOM is loaded and ready to be selected
    var select = document.getElementById("winner");
    var optionText = select.options[select.selectedIndex].text;
    var optionValue = select.options[select.selectedIndex].value;
});
</script>

Of course you can also perform DOM selects using jQuery:

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
    // The DOM is loaded and ready to be selected
    var optionText = $("#winner option:selected").text();
    var optionValue = $("#winner option:selected").val();
});
</script>

Another possibility

If $row, $team1 or $team2 are not defined and you have PHP errors and notices turned on, then the HTML will render like so:

<select name="picks" id="winner"><b>E_NOTICE : </b> type 8 -- Undefined variable: row -- at line 4<br /><b>E_NOTICE : </b> type 8 -- Undefined variable: team1 -- at line 4<br />
    <option value=""></option><b>E_NOTICE : </b> type 8 -- Undefined variable: row -- at line 5<br /><b>E_NOTICE : </b> type 8 -- Undefined variable: team2 -- at line 5<br />
    <option value="" selected="selected"></option>
</select>

However, if you have PHP errors and warnings turned off, you would see something like this instead:

<select name="picks" id="winner">
    <option value=""></option>
    <option value="" selected></option>
</select>

If you are unable to access the value of options in your select HTML (because they are empty), this would be a good pace to start investigating.

Sagar · Accepted Answer · 2015-05-04 10:02:11Z

0

Using JQUERY you can try following:

// I have used mouse down event for demo purpose.
$(document).delegate('#winner', 'mousedown', function ()
{
  alert('hi');
});

answered May 4, 2015 at 10:02

Sagar

6473 silver badges14 bronze badges

Comments

Harigovind R · Accepted Answer · 2015-05-04 10:16:48Z

0

Try accessing the value of the selected id I am giving a demo fiddle Demo fiddle document.getElementById("winner").value;

answered May 4, 2015 at 10:16

Harigovind R

8018 silver badges19 bronze badges

Comments

Sam Arjmandi · Accepted Answer · 2015-05-04 10:25:01Z

0

Echoing JS codes is common but there are these possibilities:

1-You put document.getElementById("winner"); before php creating that element.

2-There is a syntax error in script tag which cause error and there for your select does not work.

answered May 4, 2015 at 10:25

Sam Arjmandi

1,6181 gold badge15 silver badges29 bronze badges

Comments

Suchit kumar · Accepted Answer · 2015-05-05 06:54:53Z

0

since the php part will be available before page load you can simply do like this:

<?php 
$row['team1']=1;$team1='India';$row['team2']=2; $team2='SA';
echo'<select name="picks" id="winner">';
echo'<option value="'.$row['team1'].'">'.$team1.'</option>';
echo'<option value="'.$row['team2'].'">'.$team2.'</option>';
echo'</select>';
    ?>
<script>

console.log(document.getElementById("winner"));//see this in console.

</script>

edited May 5, 2015 at 6:54

answered May 4, 2015 at 10:35

Suchit kumar

11.9k3 gold badges26 silver badges46 bronze badges

Collectives™ on Stack Overflow

PHP Javascript cant access echoed element id outside php mode

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related