时间戳

首页 > 解决方案 > 带有保存按钮的可编辑 HTML 表单

javascript - 带有保存按钮的可编辑 HTML 表单

问题描述

我想创建一个 HTML 申请表并通过电子邮件将其发送给申请人。每个人都必须下载文件，分别填写并寄回给我。

是否可以嵌入保存按钮并永久覆盖更改？我所能找到的只是将更改保存在本地（或作为单独的文件），这不是我想要的。这是我可以在 w3schools 上找到的一个简单表格：

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Save">
</form>

标签： javascripthtml

解决方案

我找到了这段代码。我所要做的就是将输出更改为 html 并按照我想要的方式设置它的样式。虽然它将更改保存为新文件，但没关系。我找不到其他任何东西：

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

推荐阅读