populate dropdown onload by passing php array to javascript function

Question

im trying to pass a php array to javascript function onload that will display the js array in a drop down list but now im already doing it for sometime i guess i need to pop it again

first i pass it from one php file to another using this code

header("location: Rules.php?varFields=".serialize($varFields));

secondly i transfer to another variable as it had been passed to the said php file

<?php
$varArray = unserialize($_GET['varFields']);
?>

third part is im tyring to pass it into a jS functon that will then display it to a drop down list

<body id="body"  onclick="cmbRuleField(\'' + <?php echo json_encode($varArray);?> + '\');"    >

and here is the external javascript code

function cmbRuleField(varArray)//ruleField 
{   
    var varDisplay = JSON.stringify(varArray);

        var sel = document.getElementById("ruleField") // find the drop down

        for (var i in varDisplay) 
        { // loop through all elements

            var opt = document.createElement("option"); // Create the new element
            opt.value = varDisplay [i]; // set the value
            opt.text = varDisplay [i]; // set the text
            sel.appendChild(opt); // add it to the select
        }

}

for the first two part i already tested it and it is working but for the last parts i cant make it work

quickshiftin · Accepted Answer · 2014-02-21 20:58:49Z

1

I think this part looks suspicious

<body id="body"  onclick="cmbRuleField(\'' + <?php echo json_encode($varArray);?> + '\');"    >

maybe

<body id="body"  onclick="cmbRuleField(<?php echo json_encode($varArray);?>)">

is more like it.

One more tip, you can see the output on the rendered page to determine what the written out code looks like. So if you see something like:

<body id="body"  onclick="cmbRuleField('['a', 'b']')">

you know there is a problem. You want a native Javascript array to be passed like this

<body id="body"  onclick="cmbRuleField(['a', 'b'])">

EDIT

After talking on chat it became clear the top portion of OP's code needed a tweak as well.

header("location: Rules.php?varFields=".http_build_query($varFields));

edited Feb 21, 2014 at 20:58

answered Feb 21, 2014 at 18:53

quickshiftin

70.4k12 gold badges72 silver badges99 bronze badges

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

11 Comments

quickshiftin Over a year ago

Just use the second line from my example bro. You are trying to put single quotes around the array so it's not getting passed to cmbRuleField as an array, you see what I mean?

quickshiftin Over a year ago

Also, take a look at the code in the browser, like I suggested in my update and you will see what I mean. You need to pass an array to cmbRuleField, not a string.

user3287181 Over a year ago

okay i will try it and get back to you thanks bro just a moment

quickshiftin Over a year ago

You're passing it a serialized php array instead of a json_encoded array! Take a closer look. You want to pass a Javascript array.

quickshiftin Over a year ago

Click on the link for the chat. I'm in there now, ready to help out.

|

Steve Farthing · Accepted Answer · 2014-02-21 18:52:48Z

1

The problem has to do with quotes not being terminated here:

...
<body id="body"  onclick="cmbRuleField(\'' + <?php echo json_encode($varArray);?> + '\');"    >
...

The JSON created using json_encode will have a lot of double quotes. Try this:

<script>
var array = <?php echo json_encode($varArray);?>;
</script>
<body id="body" onclick="cmbRuleField(array);">

answered Feb 21, 2014 at 18:52

Steve Farthing

7926 silver badges10 bronze badges

4 Comments

user3287181 Over a year ago

then when it is already in the jS function i just have to use the array as is bro?

user3287181 Over a year ago

ill get back to you wait

Steve Farthing Over a year ago

Any errors come up in the console? Can you post your code?

user3287181 Over a year ago

nothing show ups bro, the drop down just does not show anything

Keith · Accepted Answer · 2014-02-21 18:57:10Z

1

There is a much easier way. Encode the $varArray as direct HTML options before sending to the browser. For instance:

<select id="ruleField">
<?php for ($i = 0; $i < count($varArray); $i++) { ?>
        <option value="<?php= $varArray[$i].val ?>"><?php= $varArray[$i].name ?></option>
<?php } ?>       
</select>

answered Feb 21, 2014 at 18:57

Keith

9946 silver badges9 bronze badges

4 Comments

quickshiftin Over a year ago

That looks painful! json_encode is probably the right direction.

Keith Over a year ago

Or even better, make a dedicated php function to take any array and return a list of options. You will probably use that a lot. Then you can do thinks like `<select id="ruleField"><?php= optionsFor($varArray) ?></select>

Keith Over a year ago

@quickshiftin: painful? Sending an array as a JSON string to the browser and then using browser-specific code to build html elements on the fly is not painful? The user is already building the rest of the page (forms, select fields etc) in php. 3 lines of additional PHP vs. hours of debugging javascript sounds anything but painful.

quickshiftin Over a year ago

Yes painful. There's no need to build out a ton of extra markup when you can send an array directly as OP is trying to do. Hours of debugging, that's hilarious bro, keep the jokes coming!

springbo · Accepted Answer · 2014-02-21 18:57:00Z

0

Might be because you are calling JSON.stringify on something that is already a string?

Also what is myCars?

..
for (var i in myCars)
..

Possibly rename it to varArray.

or rename varDisplay to varArray.

and lastly try calling JSON.parse instead:

function cmbRuleField(varArray)//ruleField 
{   
    var varDisplay = JSON.parse(varArray);

        var sel = document.getElementById("ruleField") // find the drop down

        for (var i in myCars) 
        { // loop through all elements

            var opt = document.createElement("option"); // Create the new element
            opt.value = varDisplay [i]; // set the value
            opt.text = varDisplay [i]; // set the text
            sel.appendChild(opt); // add it to the select
        }

}

If that didn't work post the html output here so peeps can create a fiddle :)

edited Feb 21, 2014 at 18:57

answered Feb 21, 2014 at 18:51

springbo

1,0961 gold badge9 silver badges16 bronze badges

1 Comment

user3287181 Over a year ago

i already tried doing that one bro by the way I already change myCars to varDisplay, incase you will notice, any other idea bro? and i dont have any html error or stuffs it just does not show anything in my drop down list bro.

Collectives™ on Stack Overflow

populate dropdown onload by passing php array to javascript function

4 Answers 4

11 Comments

4 Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

11 Comments

4 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related