提交后如何清除表单输入？

debugcn 发表于 Dev

维基

已经尝试了来自不同引用的所有内容，但我无法使其正常工作。我打算将其用于Google照片提交表单。我只希望我的文本输入和textarea在成功上传所有内容后清除。

这是完整的HTML代码。

<form id="uploaderForm">
        <label for="uploaderForm">Photo Upload Form</label>
        <div>
            <input type="text" name="applicantName" id="applicantName"
                placeholder="Your Name">
        </div>
        <div>
            <input type="text" name="gradesection" id="gradesection"
                placeholder="Your Grade Level & Section">
        </div><br>
        <div>
            You can select multiple Photos upload!<br>
            <br>
            <input type="file" name="filesToUpload" id="filesToUpload" multiple>
            <br><br>
            <input type="button" value="Submit" onclick="uploadFiles()"> 
        </div>
    </form>
    <br>
    <br>
    <div id="output"></div>
    <script>
        var rootFolderId = 'xxxxxxxxxxxxxxxxxxx';
        var numUploads = {};
        numUploads.done = 0;
        numUploads.total = 0;
        // Upload the files into a folder in drive
        // This is set to send them all to one folder (specificed in the .gs file)
        function uploadFiles() {
            var allFiles = document.getElementById('filesToUpload').files;
            var applicantName = document.getElementById('applicantName').value;
            if (!applicantName) {
                window.alert('Missing applicant name!');
            }
            var gradesection = document.getElementById('gradesection').value;
            if (!gradesection) {
                window.alert('Missing Grade & Section!');
            }
            var folderName = applicantName + ' - ' + gradesection;
            if (allFiles.length == 0) {
                window.alert('No file selected!');
            } else {
                numUploads.total = allFiles.length;
                google.script.run.withSuccessHandler(function(r) {
                    // send files after the folder is created...
                    for (var i = 0; i < allFiles.length; i++) {
                        // Send each file at a time
                        uploadFile(allFiles[i], r.folderId);
                    }
                }).createFolder(rootFolderId, folderName);
            }
        }

        function uploadFile(file, folderId) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var content = reader.result;
                document.getElementById('output').innerHTML = 'uploading '
                        + file.name + '...';
                //window.alert('uploading ' + file.name + '...');               
                google.script.run.withSuccessHandler(onFileUploaded)
                        .uploadFile(content, file.name, folderId);
            }
            reader.readAsDataURL(file);
        }

        function onFileUploaded(r) {
            numUploads.done++;
            document.getElementById('output').innerHTML = 'uploaded '
                    + r.fileName + ' (' + numUploads.done + '/'
                    + numUploads.total + ' files).';
            if (numUploads.done == numUploads.total) {
                document.getElementById('output').innerHTML = 'All of the '
                        + numUploads.total + ' files are uploaded';
                numUploads.done = 0;
            }
        }
    </script>

表单上载并向用户显示响应。

我想重置表单，因此表单会重置为其原始状态，因此当用户上传另一个文件时，它将不会再次上传相同的文件。现在，提交消息仍然存在，我不知道如何重置表格。

我是javascript的新手，我不知道如何调用该表单，有什么主意吗？TIA伙计们:)

德C

由于您的代码段仅包含input，您可以使用查找所有输入querySelectorAll并将其重置value。

下面的例子。当您单击按钮时，它将重置所有输入。

function resetAllInput() {
    const allInput = document.querySelectorAll('input');
    allInput.forEach( input => {
        input.value = "";
    })
}

function uploadFiles() {
    console.log('uploading files');
    resetAllInput();
  console.log('Resetted all inputs');
}

<form id="uploaderForm">
        <label for="uploaderForm">Photo Upload Form</label>
        <div>
            <input type="text" name="applicantName" id="applicantName" placeholder="Your Name">
        </div>
        <div>
            <input type="text" name="gradesection" id="gradesection" placeholder="Your Grade Level & Section">
        </div><br>
        <div>
            You can select multiple Photos upload!<br>
            <br>
            <input type="file" name="filesToUpload" id="filesToUpload" multiple>
            <br><br>
            <input type="button" value="Submit" onclick="uploadFiles()">
        </div>
    </form>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。