How can I get the HTML form value which I entered in the form into the txt file?

Question

1.00/5 (1 vote)

See more:

 <!DOCTYPE html>
<html>
<head>
    <style>
        form * {
            display: block;
            margin: 10px;
        }
    </style>
    <script language="Javascript">
function download(filename, text) {
  var pom = document.createElement('a');
  pom.setAttribute('href', 'data:text/plain;charset=utf-8,' +

encodeURIComponent(text));
        pom.setAttribute('download', filename);

        pom.style.display = 'none';
        document.body.appendChild(pom);

        pom.click();

        document.body.removeChild(pom);

 
        }

       



    </script>
</head>
<body>
    <h1>Registration Form</h1>

      <input type="text" name="name" value="test.txt">
    <form onsubmit="download(this['name'].value, this['text'].value)">


        <p>
            <label for="fname">Name</label>
            <input type="text" id="Fullname" name="Fullname" placeholder="Your name..">
          
        </p>


        <p>
            <label for="lname">Email Id</label>
            <input type="text" id="EmailId" name="EmailId" placeholder="Enter Valid Email Id">
           
        </p>

        <p>
            <label for="City">City</label>
            <select id="City" name="City">
                <option value="Chennai">chennai</option>
                <option value="Bangalore">Bangalore</option>
                <option value="Hyderabad">Hyderabad</option>
                <option value="Delhi">Delhi</option>
                <option value="Calcutta">Calcutta</option>
                <option value="Mumbai">Mumbai</option>
            </select>
           
        </p>

        <p>
            <label for="Gender">Gender</label>
            <input type="radio" name="radio" value="Male" onclick="getElementById('problem').value=this.value;"> Male<br>
            <input type="radio" name="radio" value="Female" onclick="getElementById('problem').value=this.value;"> Female<br>

            <input type="text" name="problem" id="problem">
            
        </p>

        <label for="Queries">Queries</label>
        <textarea id="Queries" name="text" placeholder="Write your Queries"> </textarea>


        
            <input type="submit" value="SAVE">
        </form>
</body>
</html>

What I have tried:

The values which i entered in the Textarea alone is diplaying in text file.. But i should get all the values from the form into the Notepad... pls Sort out this...

Posted 26-Jul-18 20:40pm

Member 13927646

Updated 27-Jul-18 2:21am

v3

Add a Solution

Comments

dan!sh 27-Jul-18 5:04am

The question is not clear. What are you trying to do and where are you stuck? What have you tried?

OriginalGriff 27-Jul-18 5:13am

This is not a good question - we cannot work out from that little what you are trying to do.
Remember that we can't see your screen, access your HDD, or read your mind - we only get exactly what you type to work with. What notepad? What form? We have no idea what you are talking about, or what the heck you have tried.

Use the "Improve question" widget to edit your question and provide better information.

F-ES Sitecore 27-Jul-18 8:51am

What if I don't have notepad installed?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2018-07-27T02:22:00

Pass the form element to the function, and iterate over its elements collection to build the text:

HTML

<form onsubmit="download(this['name'].value, this)">

JavaScript

function download(filename, form) {
    var lines = [];
    var elements = form.elements;
    for (var i = 0; i < elements.length; i++) {
        var field = elements[i];
        if (!field.name) { continue; }

        switch (field.type) {
            case "radio":
            case "checkbox": {
                if (field.checked) {
                    lines.push(field.name + ": " + field.value);
                }
                break;
            }
            default: {
                lines.push(field.name + ": " + field.value);
                break;
            }
        }
    }
    
    var text = lines.join("\n");
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);
    pom.style.display = 'none';
    document.body.appendChild(pom);
    pom.click();
    document.body.removeChild(pom);
}

Demo[^]