How do I get an array from PHP and use the values in the array?

Question

I have a dropdown menu and javascript inside index.html. For clarity I removed most of the options (there're over 20). It sends the dropdown menu selection to engine.php

index.html

<script>
function refreshpage(e)
{   
    var e = document.getElementById("sr");
    var snk = e.options[e.selectedIndex].value;
    window.location.href = "engine.php?selectedOption=" + snk;
}
</script>

<h4>Select your option</h4>
    <form action="" id="optionform" onsubmit="return false;">
        <select class="item_options" id="sr" name='sr' onchange="refreshpage(this);">
             <option value="None">Select option</option>
             <option value="Option1">Option 1</option>
             <option value="Option1">Option 2</option>
             <option value="Option1">Option 3</option>
        </select>
    </form>

---

When you select an option, it sends the option to engine.php

engine.php

<?php
$option1 = 5;
$option2 = 10;
$final = array($option1, $option2);
if($_GET["selectedOption"] == 'Option1')
{
    $option1 = 20;
    $option2 = 20;

}
?>

How can I send $final back into index.html and use javascript to use the values in the $final array ( $option1 and $option2 ). I basically want to refresh index.html and use the new, updated values ( $option1 = 20; $option2 = 20; )

Answer 1

You can use ajax as @Hackerman suggested and is likely the approach I would use.

Alternatively, you can add a redirect to the end of your engine.php page and send the user back to the index page.

$newURL = "index.php?values=$newValues";
header('Location: '.$newURL);

To take this approach, your index page will need to process the values argument upon load.

Answer 2

If you don't care what the URL is you can require the index.html in your engine.php :

<?php
$option1 = 5;
$option2 = 10;
$final = array($option1, $option2);
if($_GET["selectedOption"] == 'Option1')
{
    $option1 = 20;
    $option2 = 20;

}
require('index.html')
?>

And so some PHP stuff in your index.html :

<script>
function refreshpage(e)
{   
    var e = document.getElementById("sr");
    var snk = e.options[e.selectedIndex].value;
    window.location.href = "engine.php?selectedOption=" + snk;
}
</script>

<?php if ( isset($final) { print_r($final); } ?>

<h4>Select your option</h4>
    <form action="" id="optionform" onsubmit="return false;">
        <select class="item_options" id="sr" name='sr' onchange="refreshpage(this);">
             <option value="None">Select option</option>
             <option value="Option1">Option 1</option>
             <option value="Option1">Option 2</option>
             <option value="Option1">Option 3</option>
        </select>
    </form>

You can use <?php ?> tags anywhere, just remember this part will process on the server and send only HTML and JavaScript down to the browser.

Answer 3

You could use ajax instead to send data back and forth. With jquery , you'd do something like:

var final;
$.ajax({
    url: 'engine.php',
    data: { selectedOption: $('#optionform').find(":selected").text() },
    dataType: 'json',
    success: function(data) {
        final = data;
    }
});

Then in engine.php , echo json_encode($final);

Answer 4

This can only be done using AJAX. Send AJAX to somepage.php where return json with $final. After do something.