CODEWITHSUNDEEP
javascriptphphtml
John_F
John_F

Reputation: 111

How to make select onchange event happen when page loads?

The code (below) works fine when the user chooses a dropdown option, but the first option is populated by php based on previous pages. How can I get the onchange event for the select to happen when the page loads, picking up the php added value and acting on it?

<?php
$value = $_GET["value"];
if (!$value){
    $value = 'Y';
}
?>
<html>
<head>
<style>
.inv {
    display: none;
}
</style>
<script>
function jb(){
    document.getElementById("target").value = "Y";
    document.getElementById("target").onchange();
}
window.onload = jb;
</script>
</head>
<body>
See more?&nbsp
<select name='see_more' id='target'>
    <option value='<?php echo $value; ?>'><?php echo $value; ?></option>
    <option value='Y'>Y</option>
    <option value='N'>N</option>
</select>
<div id="Y" class='inv'>
Additional content goes here
</div>
<script>
        document
                .getElementById('target')
                .addEventListener('change', function () {
                        'use strict';
                        var vis = document.querySelector('.vis'),
                                target = document.getElementById(this.value);
                        if (vis !== null) {
                                vis.className = 'inv';
                        }
                        if (target !== null ) {
                                target.className = 'vis';
                        }
                });
</script>
</body>
</html>

Upvotes: 0

Views: 3349

Answers (2)

John_F
John_F

Reputation: 111

I managed to find a solution using php:

<?php
$value = $_GET["value"];
if (!$value){
        $value = 'Y';
}
?>
<html>
<head>
<style>
.inv {
        display: none;
}
</style>
</head>
<body>
See more?&nbsp
<select name='see_more' id='target'>
        <option value='<?php echo $value; ?>'><?php echo $value; ?></option>
        <option value='Y'>Y</option>
        <option value='N'>N</option>
</select>
<?php
if ($value == 'Y'){
        echo "<!--";
}
?>
<div id="Y" class='inv'>
<?php
if ($value == 'Y'){
        echo "-->";
}
?>
<?php
if ($value == 'N'){
        echo "<!--";
}
?>
<div id="Y" class='vis'>
<?php
if ($value == 'N'){
        echo "-->";
}
?>
<br>
Additional content goes here
</div>
<script>
        document
                .getElementById('target')
                .addEventListener('change', function () {
                        'use strict';
                        var vis = document.querySelector('.vis'),
                                target = document.getElementById(this.value);
                        if (vis !== null) {
                                vis.className = 'inv';
                        }
                        if (target !== null ) {
                                target.className = 'vis';
                        }
                });
</script>
</body>
</html>

Upvotes: 1

KJ Price
KJ Price

Reputation: 5994

If you are using jQuery, you could just do $('#target').change();. So:

$(document).ready(function () {
    $('#target').change();
});

Upvotes: 1

Related Questions