How do i save form input in html

How do i save form data inputed by a user in html:


Repl link

How do you want to save it? (I notice you have a PHP file named form.php, however your Repl is a HTML, CSS and JS Repl. PHP files will not work unless you make a PHP Web Server Repl.)

If you do want to use PHP, then in the PHP file you’ll probably want to read the data posted using $_POST["name attribute of input"]. You might want to write this to a file using file_put_contents("file_name.extension", "content", FILE_APPEND | LOCK_EX); (You can remove FILE_APPEND | if you want to overwrite the file, not append to it).

1 Like

is there another way to do it without php

i want to save it with javascript

To a file? Unfortunately you can’t write to files with JavaScript. You could store it using the localStorage API, however data stored using localStorage is only available to the device it was stored on.
If that’s okay, then this should help:

// setting
window.localStorage.setItem(Name, Value);
// for example
window.localStorage.setItem("highscore", 468);

// getting
window.localStorage.getItem(Name, ValueToReturnIfNotSet = null);
// for example
window.localStorage.getItem("highscore"); // -> 468
window.localStorage.getItem("does_not_exists"); // -> null
window.localStorage.getItem("does_not_exists", 0); // -> 0

Here’s some more info on MDN.

Otherwise you will need a server-side language like PHP or NodeJS or Python… etc.

and browser I belive.

Well, yeah, it’s available through the browser, on the device. localStorage is stored locally and each browser likely has its own separate caches.

can i give you access to edit my repl and you can make it so that it save the data input

Did you want to save it using localStorage? If so, just to be clear, you won’t be able to see or use the data stored for other people. If you do need to be able to do that, you can use PHP to write to a file in your Repl (but you’ll have to create a PHP Web Server Repl first).

i tried doing this but for some reason it still wont save the data’
here is to link to my repl

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
	<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>
        <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>

        
        <div>
            <input type="button" id="bt" value="Save data to file" onclick="saveFile()" />
        </div>
    </div>
</body>
<script>
    let saveFile = () => {
    	
        
    	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');
        
        
        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;
        
        
        const textToBLOB = new Blob([data], { type: 'text/plain' });
        const sFileName = 'formData.txt';	   

        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>

That just saves the data to the user’s computer, not to your Repl:

If you make a PHP Web Server Repl I can help you save the data to the file you want.

yes please i would love that i cannot for the life of me get the form to save

i created a php webserver im adding you to it right now

I added some basic functionality, let me know if that suits your needs :slight_smile:

ok thank you so much

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.