Visual Studio - How to save info from a form to a txt file in my computer

Question

I have a form in visual studio that asks for feedback, name and their order number. I'd like to save all this information into a txt file when they click Submit so that I can review it later on.

return (
    <>
        <Typography variant="h6" gutterBottom>Feedback</Typography>
        <FormProvider  {...methods}>
            <form onSubmit=''>
                <Grid container spacing={3}>
                   <FormInput required name='fullName' label='Full Name' />
                    <FormInput required name='orderNumber' label='Order Number' />
                    <FormInput required name='message' label='Message' />
         


                </Grid>
            </form>

        </FormProvider>

        <div>
             <Button component= className={classes.checkoutButton} size="large" type="button" variant="contained" color="primary">Submit</Button>
             
        </div>
        
    </>

I've just added the code, hope it helps. I'm not experienced at all so I apologize if the question is too basic but I can't figure out how to make it work. — Alex Nic, Mar 16 '21 at 13:05
Do you mean something like this maybe? [Writing html form data to a txt file without the use of a webserver](https://stackoverflow.com/questions/16870876/writing-html-form-data-to-a-txt-file-without-the-use-of-a-webserver) — Vincent, Mar 16 '21 at 13:08
I think so, can you help me implement it into the code above? — Alex Nic, Mar 16 '21 at 13:14

score 0 · Answer 1 · answered Mar 16 '21 at 14:05

Try this code:

<!DOCTYPE html>
<html>
<head>
    <title>Save form Data in a Text File using JavaScript</title>
    <style>
        * {
            box-sizing: border-box;
        }
        div {
            padding: 10px;
            background-color: #f6f6f6;
            overflow: hidden;
        }
        input[type=text], textarea, select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        input[type=button]{ 
            width: auto;
            float: right;
            cursor: pointer;
            padding: 7px;
        }
    </style>
</head>
<body>
    <div>
        
        <!--Add few elements to the form-->

        <div>
            <input type="text" id="txtName" placeholder="Enter your name" />
        </div>
        <div>
            <input type="text" id="txtAge" placeholder="Enter your age" />
        </div>
        <div>
            <input type="text" id="txtEmail" placeholder="Enter your email address" />
        </div>
        <div>
            <select id="selCountry">
                <option selected value="">-- Choose the country --</option>
                <option value="India">India</option>
                <option value="Japan">Japan</option>
                <option value="USA">USA</option>
            </select>
        </div>
        <div>
            <textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
        </div>

        <!--Add to button to save the data.-->
        <div>
            <input type="button" id="bt" value="Save data to file" onclick="saveFile()" />
        </div>
    </div>
</body>
<script>
    let saveFile = () => {
        
        // Get the data from each element on the form.
        const name = document.getElementById('txtName');
        const age = document.getElementById('txtAge');
        const email = document.getElementById('txtEmail');
        const country = document.getElementById('selCountry');
        const msg = document.getElementById('msg');
        
        // This variable stores all the data.
        let data = 
            '\r Name: ' + name.value + ' \r\n ' + 
            'Age: ' +age.value + ' \r\n ' + 
            'Email: ' + email.value + ' \r\n ' + 
            'Country: ' + country.value + ' \r\n ' + 
            'Message: ' + msg.value;
        
        // Convert the text to BLOB.
        const textToBLOB = new Blob([data], { type: 'text/plain' });
        const sFileName = 'formData.txt';      // The file to save the data.

        let newLink = document.createElement("a");
        newLink.download = sFileName;

        if (window.webkitURL != null) {
            newLink.href = window.webkitURL.createObjectURL(textToBLOB);
        }
        else {
            newLink.href = window.URL.createObjectURL(textToBLOB);
            newLink.style.display = "none";
            document.body.appendChild(newLink);
        }

        newLink.click(); 
    }
</script>
</html>

Thank you for the answer! This creates a file that's downloaded on the user's computer, but that does me no good, how can I have access to that file? — Alex Nic, Mar 17 '21 at 15:47

Visual Studio - How to save info from a form to a txt file in my computer

1 Answers1