how to write text field values into a text file before form submission using javascript

Question

I'm new to Java script.

I'm implementing some web pages.
Now, i have TextBox fileds (for users to enter server ip,username and password),upload file button and a Submit button .i want to call a Javascipt script function which takes the values from the textbox and saves it to a .txt file on server before clicking submit button.

Using java script I'm able to read values but when I'm trying to write values into a file, it is not working. When i searched in net i found solution with ActiveXObject which workes only in IE.But I'm looking for the solution which works in all browsers.

My environment supports only javascript and PHP.

Please help me..

look for jquery ajax and send all the data via post to server. this is not possible to do with javascript alone. — Meenesh Jain, Nov 30 '15 at 05:00
Possible duplicate of [Javascript: Uploading a file... without a file](http://stackoverflow.com/questions/2198470/javascript-uploading-a-file-without-a-file) — winner_joiner, Nov 30 '15 at 05:04
@winner_joiner Above link is for uploading a file without a file. I need to write text filed values in to a file on the server before clicking submit button. — Sai, Nov 30 '15 at 05:19
You could bind an onchange event to the form so you save the data to a text file any time there is a change. If you'd like I can explain how to implement this. — jaggedsoft, Nov 30 '15 at 05:23
@sai when you trigger the function mentioned in the other post, is totally up to you. You could use a timeout, a blur , a change or other event check this out for your options https://developer.mozilla.org/en-US/docs/Web/Events — winner_joiner, Nov 30 '15 at 05:26
@winner_joiner I think above solution is writing something to file based on http respons obtained. But my case user will enter the values in text filed and then i need to write those values into a file to verify ssh is enabled or not using user input values (ip,username,password)..before clicking submit button. — Sai, Nov 30 '15 at 05:48

score 1 · Answer 1 · answered Nov 30 '15 at 05:03

<form id="addnew">
    <input type="text" class="id">
    <input type="text" class="content">
    <input type="submit" value="Add">
</form>
<script>
    jQuery(function($) {
        $('#form_addjts').submit(function(){
            writeToFile({
                id: $(this).find('.id').val(), 
                content: $(this).find('.content').val()
            });
            return false;
        }); 
        function writeToFile(data){
            var fso = new ActiveXObject("Scripting.FileSystemObject");
            var fh = fso.OpenTextFile("D:\\data.txt", 8);
            fh.WriteLine(data.id + ',' + data.content);
            fh.Close(); 
        } 
    }); 
</script>

I think **ActiveXObject** works only in IE.I need solution which works in all browsers. — Sai, Nov 30 '15 at 05:12

score 0 · Answer 2 · answered Nov 30 '15 at 05:46

Why not post all data to the server and let php handle file creation.

// init var to prevent notices
$text = "";
// loop through the post array
foreach($_POST as $key=>$value){
    // create file contents and put all results on it's own line
    $text .= $key."=".$value."\n";
}
// path to where you would like the files to end up and which name they shoud have
$path = "/files/{$sessid}.txt";
// open a file. If it does not exist, a new file will be created
$file = fopen($path, 'x'); //returns false if the file already exists
if(!$file){
    $time = time();
    $path = "/files/{$sessid}_{$time}.txt"; // create an alternative path
    $file = fopen($path, 'x');
}
fwrite($file, $text);
fclose($file);

// go do other stuffx

winner_joiner · Answer 3 · 2015-12-15T11:18:50.350

If I understand your Problem correct
1) user, Password, IP should be writen to a file on a server
2) Values should be submitted

First of all you cannot write directly onto the server, from a browser. The data will always have to be send/posted in some form.

One option could be to:

send the data on an Event to the server in background (with ajax or so)
validated the data on the server and after validation enable the Submit button

Here is a demo(which is only client side, the server Side you will have to implement)

document.getElementById("password")
.addEventListener("blur", function(){

   // enter here the AJAX code Post to a write-to-file.php

   // the callback of the Ajax call could execute this code
   // Or take the response of the ajax post-back
   document.getElementById('submit').disabled = 
     (document.getElementById("password").value!="123")
  });

// Test on Win7 with Chrome 46+

<form id="form" action="different-script.php">
    IP <input type="text" id="ip"><br/>
    Username <input type="text" id="username"><br/>
    Password <input type="text" id="password"><br/>
    <input type="submit" id="submit" value="save" disabled="disabled">  
</form>

in this demo the button is activated, when the value 123 is entered it to the password field an the field is left again.

The Event on which to ajax can execute, can be blur, change, click, ... Or you could die the info with a interval very few seconds.

For event infos checkout this link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

For infos for Ajax: https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

I hope this helps

jaggedsoft · Accepted Answer · 2015-11-30T07:49:10.777

You could use the onchange event bound to the form and save the data to a text file any time there is a change. This is done by silently submitting the form through an AJAX request to your server.

Javascript and PHP solution:

<form id="stackoverflow" method="POST" action="" onchange="save()">
<input name="subject" type="text" value="Hello World" style="width:222px"><br/>
<textarea name="message" style="width:220px;height:100px">This is an example of sending an AJAX request to PHP and writing it to file.</textarea><br/>
<button type="button" onclick='save()'>Submit</button>
</form><script>
function save() {
    var form = document.querySelector('#stackoverflow');
    var data = new FormData(form);
    var req = new XMLHttpRequest();
    req.open("POST", "form-write.php", true);
    req.send(data);
    console.log("..saved");
}
</script>

This method will send data to your server's PHP file every time someone changes something on one of your forms. A simple keypress will fire this event. The PHP file can do whatever you'd like, in this case we're just going to write the contents of your form fields to a simple text file.

PHP Code:

$subject = $_POST['subject'];
$message = $_POST['message'];
$output = "Subject: {$subject}\n";
$output.= "Message: {$message}";
file_put_contents("form.txt",$output);

_{Example output:

Subject: Hello World

Message: This is an example of sending an AJAX request to PHP and writing it to file.}

jQuery and PHP solution:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<form id="stackoverflow" method="POST" action="">
<input name="subject" type="text" value="Hello World" style="width:222px"><br/>
<textarea name="message" style="width:220px;height:100px">This is an example of sending an AJAX request to PHP and writing it to file.</textarea><br/>
<button type="button" onclick='save()'>Submit</button>
</form><script>
$("#stackoverflow").change(function(){
    save();
});
function save() {
    $.post("form-write.php", $('#stackoverflow').serialize() );
    console.log("..saved");
}
</script>

Here we're going to store the contents of your form in JSON format because it is the easiest for us to work with. The JSON file will contain all of the fields in the form, and we can read it later with PHP using json_decode()

PHP Code:

file_put_contents("form.txt",json_encode($_POST));

_{An example of a JSON save would look like this:}

{"subject":"Hello World","message":"This is an example of what JSON looks like."}

Read more about jQuery.post()

@Sai let us know if you have any more questions, we'd be glad to help. — jaggedsoft, Nov 30 '15 at 23:36
I have tried to implement **Javascript and PHP solution** solution,when I'm testing my code changes i'm not seeing any errors (used firebug) but file is creating with null data. — Sai, Dec 01 '15 at 08:28
@Sai did you give your form an ID or a class? in my example I gave my form an id of "stackoverflow" and we're accessing it using `document.querySelector('#stackoverflow');` - if you only have one form on your page you could just change it to **`document.querySelector('form');`** - Also, make sure you set the permissions on your text file to be writable. — jaggedsoft, Dec 01 '15 at 09:39

score 0 · Answer 5 · answered Nov 30 '15 at 08:38

You can use ajax to post the form to the server, save the data to a temp file, and return url that points to the file. When browser receive the ajax response containing the file url, redirect browser to the url. Browser will download the file after.

For ajax you can use jQuery http://api.jquery.com/jquery.ajax/ To use ajax to post form take a look at this answer jQuery Ajax POST example with PHP

To redirect browser from the client you can write for example window.location.href = 'myurl.com/foo/bar'

how to write text field values into a text file before form submission using javascript

5 Answers5