如何在JavaScript中从纯文本读取/写入

Question

I don't know much about JS, I'm new in this world, I know about HTML and CSS but this time I was asked to make an aplication where I have to receive data from a plain text to my formulary using JS.

Here's my Plain Text data.txt:

Interfaces: test1,
IP: 192.168.1.1,
Mask : test,
Gateway : test,
DNS 1: test,
DNS 2: test,
Broadcast: test

Here's my Div:

<div class="col-md-12">
            <div class="form-panel">
            <h4><i class="fa fa-angle-right"></i> Formulario </h4>
            <hr />
            <form method="post">
                <div class="form-group">
                    <label class="col-sm-3 col-sm-3 control-label">Interfaces:</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" 
                    </div>      
                </div>  
                 <div class="form-group ">
                    <label class="col-sm-3 col-sm-3 control-label">IP: </label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control"
                    </div>
                </div>
                 <div class="form-group">
                    <label class="col-sm-3 col-sm-3 control-label">Mask : </label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" 
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 col-sm-3 control-label"> Gateway : </label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" 
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" 
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" 
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 col-sm-3 control-label">Broadcast : </label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" 
                    </div>
                </div>
                <br><br>
                <div class="form-group">
                    <button type="submit" name="Save" class="btn btn-success btn-sm" " title="Save"><i class="fa fa-save"></i> Save</button>
                </div>
            </form>
        </div>

That's the script I got from you guys, because I was looking for code to do it and that's what I got.

The point is the data that contains "data.tx" should be on my formulary and if I modify any field there and I hit "save" button it has to write on my plain text as well.

Is there a way to make it work? thanks!

Entire code bellow.

 var mytext; var connection = new XMLHttpRequest(); connection.open('GET', '/data.txt'); connection.onreadystatechange = function() { mytext=connection.responseText; } connection.send(); 

 <div class="col-md-12"> <div class="form-panel"> <h4><i class="fa fa-angle-right"></i> Formulario </h4> <hr /> <form method="post"> <div class="form-group"> <label class="col-sm-3 col-sm-3 control-label">Interfaces:</label> <div class="col-sm-9"> <input type="text" class="form-control" </div> </div> <div class="form-group "> <label class="col-sm-3 col-sm-3 control-label">IP: </label> <div class="col-sm-9"> <input type="text" class="form-control" </div> </div> <div class="form-group"> <label class="col-sm-3 col-sm-3 control-label">Mask : </label> <div class="col-sm-9"> <input type="text" class="form-control" </div> </div> <div class="form-group"> <label class="col-sm-3 col-sm-3 control-label"> Gateway : </label> <div class="col-sm-9"> <input type="text" class="form-control" </div> </div> <div class="form-group"> <label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label> <div class="col-sm-9"> <input type="text" class="form-control" </div> </div> <div class="form-group"> <label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label> <div class="col-sm-9"> <input type="text" class="form-control" </div> </div> <div class="form-group"> <label class="col-sm-3 col-sm-3 control-label">Broadcast : </label> <div class="col-sm-9"> <input type="text" class="form-control" </div> </div> <br><br> <div class="form-group"> <button type="submit" name="Save" class="btn btn-success btn-sm" " title="Save"><i class="fa fa-save"></i> Save</button> </div> </form> </div> </div> 

Answer 1

I don't know ia more efficient solution exists, but below code is working.

Here is how I achieved it, using jQuery .load()

$(document).ready(function(){
    // Load the file in an hidden div element.
    $("#hiddenFileLoad").load("data.txt", function(){
        // Callback executes when content is loaded

        // Place the content in a var
        var loadedText = $("#hiddenFileLoad").text();
        console.log("loadedText:\n\n"+loadedText);

        // Split into an array
        var loadedTextSplitted = loadedText.split(",");

        // Remove the label part for each
        for (i=0;i<loadedTextSplitted.length;i++){
            temp = loadedTextSplitted[i].split(": ");
            loadedTextSplitted[i] = temp[1];
        }

        // Place each info in the HTML form
        $(".form-panel").find("input").each(function(index){
            $(this).val( loadedTextSplitted[index] );
        });

    }); // End of .load callback
});

I used and hidden div , in order to load the .txt file content, which I gave the "hiddenFileLoad" id .

I made absolutely no change to your HTML (except the hidden div add) and I used your txt file content.

I assume you know how to save to file... I didn't make the save button to work.

Here is a live example on my server.