I want to pass the value of my span html which is the value, is from the javascript. It will count the words of the uploaded file. please help me guys for this.

Heres my first page index.php

<form name="myform" action="values.php" method="post">
   <input name="upload" type="file" id="upload" accept="text/plain" accesskey="u"> UPLOAD A FILE
   <span id="display_File_count" name="display_File_count"></span> <span>Words</span>
   <input type="submit" value="Submit">
</form>

<script type="text/javascript">

    $('#upload').change( function(event) {

        var f = event.target.files[0];
        if (f) {
            var r = new FileReader();

            r.onload = function(e) { 
                var contents = e.target.result;
                var res = contents.split(" "); 
                $("#display_File_count").text(res.length);
            }
            r.readAsText(f);
        }
    });

</script>

And heres the other page that will call the value values.php

<input type="text" name="count_upload" id="count_upload" value="<?php echo $_POST["display_File_count"] ?>" >

I want to pass the value of my span html which is the value, is from the javascript. It will count the words of the uploaded file. please help me guys for this.

Heres my first page index.php

<form name="myform" action="values.php" method="post">
   <input name="upload" type="file" id="upload" accept="text/plain" accesskey="u"> UPLOAD A FILE
   <span id="display_File_count" name="display_File_count"></span> <span>Words</span>
   <input type="submit" value="Submit">
</form>

<script type="text/javascript">

    $('#upload').change( function(event) {

        var f = event.target.files[0];
        if (f) {
            var r = new FileReader();

            r.onload = function(e) { 
                var contents = e.target.result;
                var res = contents.split(" "); 
                $("#display_File_count").text(res.length);
            }
            r.readAsText(f);
        }
    });

</script>

And heres the other page that will call the value values.php

<input type="text" name="count_upload" id="count_upload" value="<?php echo $_POST["display_File_count"] ?>" >

• javascript
• php
• jquery
• html

1 Answer 1

You could add an hidden input that will contain the file count (updated from js) and submit button to send data to the other page :

<form name="myform" action="values.php" method="post">
    <input name="upload" type="file" id="upload" accept="text/plain" accesskey="u">
    UPLOAD A FILE

    <span id="display_File_count" name="display_File_count"></span><span>Words</span>

     <input type="hidden" name="display_File_count" class='display_File_count' />

     <input type='submit' value='send data to the other page' />
</form>

To update field from js you could use :

...
r.onload = function(e) { 
    var contents = e.target.result;
    var res = contents.split(" "); 
    $("#display_File_count").text(res.length);

    $(".display_File_count").val(res.length);
}
...

When you click on submit button the parameter display_File_count will be send automatically to values.php with method post, so you should find in values.php the input filled automatically by display_File_count since you're using $_POST["display_File_count"] in the other side.

Hope this helps.