如何将listbox的值存储到数组中，然后使用它将其数据显示到另一个页面php中

Question

I need help on how to store the data inserted in the list box. Right now I have the following code that creates list.

    <select name = "lstTerminals" size = "5" id="lstTerminals" multiple="multiple" style="width:200px;">    

    </select>

As you can see it has no option or values at all. In order to fill the list, I have a button where it can add values to it depending what is input from a text field. The following is the text field where the user can put text

<input id="txtTerminal" type="text" name="txtTerminal" style="width:115px;"/>

The code below is the button

    <input class = "buttonDesign" id="btnAddTerminal" name ="btnAddTerminal" type="button" onclick = "javaScript:addTerminal();"
        value="Add Terminal" style="width:110px; height:25px"/>

Notice it has an onclick method where when clicked, it will insert the text from the text input into my list box. The following onclick javaScript:addTerminal() has the javascript code:

function addTerminal() {
    var terminal = document.getElementById('txtTerminal');
    var terminals = document.getElementById('lstTerminals');
    var values = new Array();
    var option = document.createElement("option");

    option.value = terminal.value;
    option.text = terminal.value;

    terminals.add(option);

    return true;
}

Once the listbox is filled with text, I should be able to get those text individually and move to another page to display each in a certain way. The question I have now is how can I store all those values (without selecting) inside the list box and maybe store it into an array. Once that is done, how can I call that array and use it into another page to display its values from the previous page?

Answer 1

you can create a global var and save the data in addTerminal function then you can post it to the php or store it in the client local storage depends if the browser supports localStorage.

var selectedTerminals = [];

function addTerminal() {
    var terminal = document.getElementById('txtTerminal');
    var terminals = document.getElementById('lstTerminals');
    var values = new Array();
    var option = document.createElement("option");

    option.value = terminal.value;
    option.text = terminal.value;

    terminals.add(option);
    savedData = {'value':terminal.value,'text':terminal.text};

    selectedTerminals.push(savedData);
    return true;
}

....

you should have some event when you go to the second page within that event you have to call some js function that decides where data is stored localStorage or PHP session:

function saveBeforeNavigation(){

 if (typeof (Storage) !== 'undefined') {
    // use local storage and save selected terminals in it

  localStorage.setItem('selectedTerminals', JSON.stringify(selectedTerminals));

 } else {
    // post the data to the server and store it to DB / session / file
    $.post('secondPage.php', {'selectedTerminals': selectedTerminals},function(result){if(result.status){alert('saved in session')}else{alert('was not saved in session')}},'json');
 }
}

secondPage.php

<?php
session_start();
// saving posted selectedTerminals
if (isset($_POST['selectedTerminals'])) {
  $_SESSION['selectedTerminals'] = $_POST['selectedTerminals'];
  echo json_encode(array('status' => 1));
  die();
}

// when not posted here you get the selectedTerminal when nav executed
if (isset($_SESSION['selectedTerminals'])) {
  echo '<script type="text/javascript">var selectedTerminals = JSON.parse(\'' . json_encode($_SESSION['selectedTerminals']) . '\')</script>';
}
?>

<script type="text/javascript">
// get the selectedTerminals from the localStorage in case its exists
if(typeof(Storage) !== 'undefined'){
    selectedTerminals = JSON.parse(localStorage.getItem('selectedTerminals'))
}

</script>