Dynamic Array in HTML Datalist

Question

I want to dynamically refresh the php code in this datalist, without reloading the whole page.

<form id="form1" action="1.5-unterseite-nach-Eingabe.php" method="post" enctype="multipart/form-data">
    <tr>
        <td>Lecture auswählen: </td>
        <td><input list="files" name="unterlage"></td>
    </tr>
    <datalist id="files">
    <?php

        $files = array_diff( scandir("/srv/www/htdocs/share/"), array(".", "..") );
            foreach ($files as $option) {
                echo '<option value=\''.$option.'\'>';
            }
        ?>
    </datalist>

I hope you can help me out.

Use AJAX if you want to load data from server without refreshing the page. — Ropali Munshi
– Ropali Munshi, Commented Dec 11, 2018 at 9:02

Zitzabis · Accepted Answer · 2018-12-11 10:17:11Z

1

You can write your html form in a "index.html" file. And uses javascript intervals request the data which provide by PHP in data.php. The pseudo-code will be something like this:

// index.html

<html>
<form id="form1" action="1.5-unterseite-nach-Eingabe.php" method="post" enctype="multipart/form-data">
<tr><td>Lecture auswählen: </td><td><input list="files" name="unterlage"></td></tr>
<datalist id="files">
</datalist>
</form>
<script>
window.setInterval(function(){
    function request_data(){
           $.ajax({
           url: 'data.php',
           method: "post",
           success: function (data) {
              // Do something here
              $("#files").html(data);
           }
        })
    }
},2000); // 2 secends request a time
</scirpt
</html>

// data.php

<?php
    $files = array_diff( scandir("/srv/www/htdocs/share/"), array(".", "..") );
    return json_encode($files);
?>

edited Dec 11, 2018 at 10:17

Zitzabis

1788 bronze badges

answered Dec 11, 2018 at 10:04

Leon

361 bronze badge

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

Comments

Zitzabis · Accepted Answer · 2018-12-11 10:12:06Z

1

Not entirely sure what your end goal is.

But one course of action is to set up an AJAX GET method that calls that PHP snippet in it's own file. Grab all the returning data and insert it into the page using JS.

Start learning JS because that's the only way you're going to be able to pull off dynamic content without page reloads.

To fetch the data using AJAX, use something similar:

<script>
    $(document).ready(function(){
        $.ajax({                                      
            url: 'URL_TO_PHP_FILE/scanFiles.php',        
            dataType: 'text',   
            success: function(data)
            {
                $("#files").html(data);
            }
        });
    });
</script>

Now move your PHP snippet to it's own file simply as such:

$files = array_diff( scandir("/srv/www/htdocs/share/"), array(".", "..") );
    foreach ($files as $option) {
        echo '<option value=\''.$option.'\'>';
    }
?>

Provided your only echos are what you would like to receive in your AJAX call, you should be good.

Also make sure you have the jQuery library linked to your page so that you can use AJAX. Take a look into jQuery a bit more. It'll make your life a lot easier.

You will also want a method to execute your JS code either every few seconds or a trigger based on previous user interaction.

edited Dec 11, 2018 at 10:12

answered Dec 11, 2018 at 9:06

Zitzabis

1788 bronze badges

3 Comments

philipB1 Over a year ago

The user adds a file to the server and select it in the datalist. Unfortunately the datalist only refreshes, if the user reloads the page and the other input data, he already inserted gets lost.

philipB1 Over a year ago

Do you have a code example? I didn't used ajax or JS before

philipB1 Over a year ago

Thank you, i marked your answer as the most useful one, but somebody marked it as unuseful. Thank you :)

Collectives™ on Stack Overflow

Dynamic Array in HTML Datalist

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related