Dynamic PHP array with accordingly added onchange scripts

Question

So the code below works for this particular example, and I would like to make it work in scenario where the amount of forms select + input type is dynamic determined by user on previous page. So now we have in php array of $champion[] = ("Aatrox", "somethingelse", "somethingelse2"); so now we loop the amount of select and input fields. Every champion has different spells so now when you choose Q for first champion AAtrox in input you will see "Spell1" below in somethingelse input user might want to choose E and he will see the name of the spell for that champion in the input form

<?php 
    $champion = "Aatrox"
?>
    <select id="spell" name="spell" onchange="val()">
        <option value="Passive">Passive</option>
        <option value="Q" selected>Q</option>
        <option value="W">W</option>
        <option value="E">E</option>
        <option value="R">R</option>
    </select>
<input type="text" id="spellname" disabled>
<script>    
    var champions = {
        "Aatrox":["Passive", "spell1", "spell2", "spell3", "spell4"],
        "Ahri":["Passive", "spell1", "spell2", "spell3", "spell4"]
    };  
    function change(x){
        if(x==="Passive"){x=0;}
        if(x==="Q"){x=1;}
        if(x==="W"){x=2;}
        if(x==="E"){x=3;}
        if(x==="R"){x=4;}
        return x;
    }
    function val(d) {
        if(typeof d === "undefined"){
        d = document.getElementById("spell").value;}
        var spellname = document.getElementById("spellname");
        spellname.value=champions["<?php echo $champion; ?>"][change(d)];
    }
    val("Q");   
</script>

I can't really figure out dynamic how to check dynamic array from PHP in this javascript script

Perhaps you should read [What is the difference between client-side and server-side programming?](http://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) first. — cmbuckley, May 28 '15 at 13:15
There must be a way to achieve this since the form was sent on a previous page — Higeath, May 28 '15 at 13:21
So maybe you can do `$champion = $_POST['champion'];` or whatever the name of the form field is on the previous page? I can't be sure as it's not clear from your question what you're trying to do. — cmbuckley, May 28 '15 at 13:32
Yeah you would have an array $champ[] = $_POST['champno'][]; I just don't know how to execute the rest of the code in JS — Higeath, May 28 '15 at 13:35
Try not to mix PHP and JavaScript together - you'll leave yourself with a nightmare of code to maintain. Keep the two separate. — cmbuckley, May 28 '15 at 13:36

Devin H. · Accepted Answer · 2015-05-28T15:34:23.200

Not sure if I fully understand what you're trying to accomplish here, but here's a go at it.

<?php 
    $champions = array("Aatrox","Ahri");
    foreach($champions as $champion){
?>
    <select id="spell-<?php echo $champion ?>" 
            name="spell" onchange="val('<?php echo $champion ?>')">
        <option value="Passive">Passive</option>
        <option value="Q" selected>Q</option>
        <option value="W">W</option>
        <option value="E">E</option>
        <option value="R">R</option>
    </select>
<input type="text" id="spellname-<?php echo $champion ?>" disabled>
<?php } //end foreach ?>

<script>    
    var champions = {
        "Aatrox":["Passive", "spell1", "spell2", "spell3", "spell4"],
        "Ahri":["Passive", "spell1", "spell2", "spell3", "spell4"]
    };  
    function change(x){
        if(x==="Passive"){x=0;}
        if(x==="Q"){x=1;}
        if(x==="W"){x=2;}
        if(x==="E"){x=3;}
        if(x==="R"){x=4;}
        return x;
    }
    function val(championName) {

        d = document.getElementById("spell-" + championName).value;
        var spellname = document.getElementById("spellname-" + championName);
        spellname.value=champions[championName][change(d)];
    }
    <?php foreach($champions as $champion) { 
        echo "val(" . $champion . ");";
    } ?>
</script>

Keep in mind it is generally bad practice to mix server side code with client side code. Although, at this point it would require a restructure of how you're handling everything (using AJAX to load JSON for example). I highly encourage you to research the topic.

one last thing how to simply loop through every champion like you did val("aatrox"); val("Ahri"); the same way? just with a loop — Higeath, May 28 '15 at 13:57
Yeah, basically. However, as mentioned before, mixing javascript and php can make maintenance difficult. So keep that in mind. — Devin H., May 28 '15 at 14:23
I actually wanted to ask how that loop would actually look like — Higeath, May 28 '15 at 15:26

Dynamic PHP array with accordingly added onchange scripts

1 Answers1