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..

Answer 1

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

Answer 2

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'

Answer 3

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()

Answer 4

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

Answer 5

<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>