How to bring PHP array value to Javascript?

Question

<html>
<head>
<script language="javascript">
    function validatefrm(){

        for (var i= 0 ; i< 3 ; i++){

        window.alert(i+window.document.contact[i].value); 
        }

        return false; //to prevent form from submitting for debugging
    }
</script>
</head>
<body>
<form name="editform" onsubmit="return validatefrm();" method="POST">
<?php

for($i=0; $i<3; $i++){
    print "<input type='textbox' id='contact".$i."' value='".$i."'>";
}
?>
<input type="submit" value="Submit Values">
</form>
</body>
</html>

Hi, I'm new to php and javascript. I'm trying to call the form with the value of 0,1,2 with javascript but it wont work. Unless i delete the for loop in javascript function and hard code it as Window.alert (window.document.contact0.value) and so on....Anyone can help? Must appreciate.

From the title, it made me feel its a [duplicate of a question I answered](http://stackoverflow.com/questions/4885737/pass-a-php-array-to-a-javascript-function). But it seems its not, can be a little more specific what you want, and where its failing? — UltraInstinct, Nov 24 '13 at 18:46
Hi, ya i got read through your post. But i think mine is different, i'm trying to get 3 input from the form like 0,1,2 as the value...then once submit button is click...the window alert should also print out value that i have store in the form such as 0,1,2 — Marcus, Nov 24 '13 at 18:50
Yes, I understood you question after I posted that comment. And I have answered below. HTH — UltraInstinct, Nov 24 '13 at 18:52

score 1 · Answer 1 · answered Nov 24 '13 at 18:48

1

If I get your question correctly, you need to access the elements by ID. And the correct way is to use document.getElementById(...). In your case:

for (var i= 0 ; i< 3 ; i++){
    window.alert(document.getElementById('contact' +i).value); 
}

answered Nov 24 '13 at 18:48

UltraInstinct

43,308
12
81
104

Sorry for any inconvenient. – Marcus Nov 24 '13 at 18:55
No problem, glad I was able to help :-) – UltraInstinct Nov 24 '13 at 18:56

score 1 · Answer 2 · answered Nov 24 '13 at 18:49

You are setting an ID for each element with php contact0, contact1 etc.

So in javascript look for that ID

function validatefrm(){

    for (var i= 0 ; i< 3 ; i++){
        window.alert(i+ ' '+ document.getElementById('contact'+i).value); 
    }
    return false; //to prevent form from submitting for debugging
}

Krease · Answer 3 · 2013-11-24T18:59:50.017

0

The php is executed on the server side, before it makes it to the browser. The javascript is executed on the client side, in the browser. You cannot pass php values to javascript like this.

You can make the php output javascript (in a script tag), and use that in your javascript code though.

<script>
  var foo = [];
  <?php
    for($i=0; $i<3; $i++){
      print "foo[".$i."] = ".$i;
    }
  ?>
console.log(foo[0] + ", " + foo[1] + ", " + foo[2]);
<script>

edited Nov 24 '13 at 18:59

answered Nov 24 '13 at 18:44

Krease

15,805
8
54
86

I think his question is completely different. He wants to know why his for loop in javascript isn't working. – UltraInstinct Nov 24 '13 at 18:50

score 0 · Answer 4 · answered Nov 24 '13 at 18:55

Your best choice would most likely be to use json_encode. This method outputs the array as a JSON array which can be assigned to a JavaScript variable in <script> tags. Associative arrays on the PHP side would get converted into JSON objects.

json_encode in the PHP documentation

<?php
$myArr = array(0, 1, 2);
?>

<!-- somewhere in the HTML document -->
<script>
   var myArr = <?php echo json_encode($myArr); ?>;
   // do something with myArr
   console.log(myArr);
</script>

How to bring PHP array value to Javascript?

4 Answers4