How to merge this PHP, Javascript and HTML document into one?

Question

I am attempting to upload a CSV file ONLY, using a HTML form, then using PHP and Javascript to save it in an array.

I have some code, that is working perfectly as separate files. Although, when I try to merge them into the one file, it refuses to work and the Javascript array ends up just alerting as null.

I am trying to only call the PHP if the form has been posted, and then calling the Javascript only when the submit button has been pressed.

The separated version - WORKING

The HTML

<form action="yourscript.php" method="post" enctype="multipart/form-data">
 <input type="file" name="upload_file" />
 <input type="submit" />
</form>

The Javascript and PHP

<?php
$csv_array = Array();
$file = fopen($_FILES['upload_file']['tmp_name'], 'r');
if($file){
    while (($line = fgetcsv($file)) !== FALSE) {
      //$line is an array of the csv elements
      array_push($csv_array,$line);
    }
    fclose($file);
}
?>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>var your_array = <?php echo json_encode($csv_array); ?></script>
</head>
<body>

</body>
</html>

The merged version - NOT WORKING

<?php

if(isset($_POST['savecsv']))
{
    $csv_array = Array();
    $file = fopen($_FILES['upload_file']['tmp_name'], 'r');
    if($file)
    {
        while (($line = fgetcsv($file)) !== FALSE) 
        {
            //$line is an array of the csv elements
            array_push($csv_array,$line);
        }
        fclose($file);
    }
}

?>


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
    function saveArray()
    {
        var your_array = <?php echo json_encode($csv_array); ?>

        alert(your_array);
    }
    </script>
</head>
<body>

<form action="<?php $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
 <input type="file" name="upload_file" />
 <input type="submit" name="savecsv" onClick="saveArray();"/>
</form>

</body>
</html>

And also use htmlspecialchars on $_SERVER['PHP_SELF'] — Hassan Khodadadeh
– Hassan Khodadadeh, Commented Aug 22, 2013 at 3:04
Another approach is to use the new Javascript FileReader to read the CSV file into a string on the browser and parse to an array, without all the back and forth. Needs a newer browser -- I also have an early working version of a library that uses FileReader and a few other tricks to manipulate and analyze CSV format data in the browser. html5csv — Paul
– Paul, Commented Aug 22, 2013 at 3:13

quietmint · Accepted Answer · 2013-08-22 03:11:20Z

3

It's failing because onclick fires when you click the button, before the forms submits to the server. In order for this to work, you need to submit the form to the server. You can do this with a true form submission (which will reload the page), you can submit the form into an <iframe>, or you can use AJAX to submit the form.

The first time the page loads, of course your_array is null because no file was uploaded. When the onclick fires (before the form is submitted), it simply alerts this null value from the initial page load.

To make your current solution work (reloading the whole page), trigger the JavaScript from inside the PHP code instead of onclick:

<?php
if (isset($csv_array)) {
    $json = json_encode($csv_array);
    echo <<<HTML
    <script>
        var your_array = $json;
        alert(your_array);
    </script>
HTML;
}

edited Aug 22, 2013 at 3:11

answered Aug 22, 2013 at 2:59

quietmint

14.2k7 gold badges50 silver badges77 bronze badges

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

Comments

jayzantel · Accepted Answer · 2013-08-22 03:31:59Z

0

Really?You can just put the whole html form into a variable then when the user visits the page,php checks if the form is submited.If it is submitted,it does nothing but instead it leaves the rest to javascript.If it is not submitted,it displays the form that is in the variable and halts the execution of the script.This way,you dont have to remove onclick or all the other cool stuff you got there.

 <html>
 <?php $form=<form>...</form>;
 if (!isset($_GET['submit']))
{die ("$form");} 

<script>...</script>
</html>

This way your javascript will not be executed unless the form is submitted.

answered Aug 22, 2013 at 3:31

jayzantel

911 silver badge4 bronze badges

Collectives™ on Stack Overflow

How to merge this PHP, Javascript and HTML document into one?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related