I have this form and I would like to read the uploaded file and then fill out the form using this read information without refreshing the page.

For example the first word might be "Bob" and so I would want that to go in my input text "First_name." I've been trying to searching online for a way to do this using JQuery or Ajax but I can't seem to find a solution.

Can this be done using the two methods previously mentioned? If so and if not can someone point me to a link or to where I can learn how to do this? The instances I have found include where one uses JQuery to upload the file and display the size without refresh (which is not exactly what I want).

I have also found how one can use an iFrame but this again is not what I want. I suppose I could always just submit the part of the page containing the textfile related information and show the same form but with the filled out information. But I feel as if this is kind of sloppy and I want to know if there is a better way.

Thanks.

I have this form and I would like to read the uploaded file and then fill out the form using this read information without refreshing the page.

For example the first word might be "Bob" and so I would want that to go in my input text "First_name." I've been trying to searching online for a way to do this using JQuery or Ajax but I can't seem to find a solution.

Can this be done using the two methods previously mentioned? If so and if not can someone point me to a link or to where I can learn how to do this? The instances I have found include where one uses JQuery to upload the file and display the size without refresh (which is not exactly what I want).

I have also found how one can use an iFrame but this again is not what I want. I suppose I could always just submit the part of the page containing the textfile related information and show the same form but with the filled out information. But I feel as if this is kind of sloppy and I want to know if there is a better way.

Thanks.

• php
• javascript
• forms
• jquery

Share Improve this question Follow edited Jun 24, 2011 at 17:24 Lukas Knuth 25.8k1616 gold badges8686 silver badges114114 bronze badges asked Jun 24, 2011 at 17:06 xereoxereo 5111 silver badge22 bronze badges 4

• You can use php to upload csv file, read it and fill in the form. It will refresh the page but it will not submit the form unless you click the submit button. – AR. Commented Jun 24, 2011 at 17:10
• Do I understand this correctly? You want to upload a CSV file that would automatically fill in the forms, but the user could modify the forms before actually submitting the data? – Uku Loskit Commented Jun 24, 2011 at 17:10
• just out of curiosity, why is refreshing out of the question? why put the form on the initial page at all, and not just the csv upload input? then you could have a second page with all of the inputs filled out using the previous csv upload. – dqhendricks Commented Jun 24, 2011 at 17:19
• Actually that sounds like a good idea. Sorry I'm new to all this web programming stuff...do you guys mean "refreshing" or "submitting" the information and then opening up a new page with the new information. And if you mean refresh can you link or tell me how I can "refresh" the page such that the information is sent to the database? Secondly can someone link me to where I can learn to only "refresh" or "submit" part of a page? My form has three difference sections and I just want to refresh this section that is relevant. I think one cna do this with ajax but haven't been able to find out how. – xereo Commented Jun 27, 2011 at 17:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Firefox has a method to do this, the File and FileList API provide a way to get at the files selected by a file input element and have a text retrieval method.

A very basic example:

NB. Not all browsers support this code.

[I think Chrome, Firefox and Opera do at time of writing.]

HTML:

<form>
    <input type="file" name="thefile" id="thefile" />
</form>

<div id="text"></div>

JS (using jQuery):

$(document).ready(function() {
    $('#thefile').change(function(e) {
        if (e.target.files != undefined) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('#text').text(e.target.result);
            };

            reader.readAsText(e.target.files.item(0));
        }

        return false;
    });
});

Demo: http://jsfiddle/FSc8y/2/

If the selected file was a CSV file, you could then process it directly in javascript.

.split() will be useful in that case to split lines and then fields.

the only way I know would be to submit the form to a hidden iframe. this will upload teh file without refreshing the page. you can then use any returned info using javascript. this is what they use for fake ajax style image uploads that let you preview an image before uploading. the truth is it already has been uploaded via a hidden iframe. unfortunately however iframes are not xhtml 1.0 pliant.

something like this article may help: http://djpate./2009/05/24/form-submit-via-hidden-iframe-aka-fake-ajax/

The question you might ask is :

why should I use this method instead of real ajax ?

Well they’re is numereous answer to that but one good reason it that is doesnt require any type of ajax libs and you can start using it even if you never used ajax before.

So here it goes.

<form method=”post” action=”formProcess.php” target=”hiddenIFrame”> <input type=”text” name=”test” /> </form>

<iframe style=”width:0px;height:0px;border:0px;” name=hiddenIFrame />

This is just a normal form but you’ll notice the target in the form tag, this tells the form to submit in the iframe instead of the current page.

It’s works exactly as the target attribut on the A tag.

Also the iframe is hidden from the user using style=”width:0px;height:0px;border:0px;”

now the file formProcess.php is not different from your normal form processing file but if you want do something on the main page you have to use JS like that :

window.parent.whatEverYouWannaDoInParentForm();

You can also upload file with this method !

Please checkout the formphp for full example.

Cheers !

Nb : You will see the status bar acts like the page is reloading but it’s really not.