已编辑

Question

我在将答案从HTML / JavaScript表单保存到.txt文件时遇到问题。如您所见，它将要求提供所有详细信息和文件名以将数据保存到其中，但是即使按了提交按钮，它也什至不做任何事情。因此，我不是100％知道发生了什么，并且我可能在代码中的某个地方弄错了。现在，我希望能够仅使用前端语言而无需服务器端知识来完成此操作。忽略表单操作中的main.php。我不确定100％是否不需要PHP就可以做到。

Build.html：

<!DOCTYPE html>
<html>
<head>
<title>Resumaker</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src = "main.js"></script>
</head>
<body>

<header> 
        <nav>
            <h1> RESUMAKER </h1>
            <ul>
                <li style="float:right"><a class = "active" 
                href="build.html" target="_blank"><span> Build a Resume 
                </span></a></li>
                <li><a href="createaccount.html" target="_blank"><span> 
                Create Account </span></a></li>
                <li><a href="signin.html" target="_blank"><span> Sign in 
                 </span></a></li>
                <li><a href="resources.html" target="_blank"><span> 
                Resources </span></a></li>
                <li><a href="contacts.html" target="_blank"><span> Talk to 
                us </span></a></li>
            </ul>
        </nav>
    </header>

<h1 class = "third"><strong> Build your resume here! </strong></h1>

<h2 class = "fourth"> YOUR PERSONAL INFO </h2>

<form autocomplete="on" method="post" class = "fourth">
    <label for = "first_name"> <b>First name:</b> </label>
    <input type="text" name="first_name" id = "first_name" 
    placeholder="John" autofocus /><br>
    <label for = "last_name"> <b>Last name:</b> </label>
    <input type="text" name="last_name" id = "last_name" placeholder="Doe" 
    /><br>
    <label for = "user_email"> <b>Email:</b> </label>
    <input type="email" name="user_email" id = "user_email" 
    placeholder="johndoe@gotham.com" autocomplete="off" /><br>
    <label for = "phone_number"> <b>Phone Number:</b> </label>
    <input name="phone_number" type="number" id = "phone_number" 
     placeholder="(987)-654-3210" /><br>
    <label for = "location"> <b>Location:</b> </label>
    <input type="text" name="location" id = "location" placeholder="Gotham 
    City" autofocus /><br>
    <label for = "linkedin"> <b>LinkedIn:</b> </label>
    <input type="url" name="linkedin" id = "linkedin" autofocus /><br>
    <label for="filename"> <b>Filename</b></label>
    <input type = "text" id="filename" value="" size="40" 
    placeholder="title.md">
    <br/><br/>
    <input onclick="saveFormAsTextFile()" type="button" value = "Make your 
     resume" />
    <input type="reset"><br><br>
</form>

</body>
</html>

main.js：

function saveFormAsTextFile()

    {
    alert('Hey');
    var textToSave =
      '---\n'+
      'First Name: ' + document.getElementById('first_name').value + '\n'+ 
      'Last Name: ' + document.getElementById('last_name').value + '\n' + 
      'Email: ' + document.getElementById('user_email').value + '\n' +
      'Phone Number: ' + document.getElementById('phone_number').value + 
      '\n' + 
      'Location: ' + '\n- ' + document.getElementById('location').value + 
      '\n' + 
      'LinkedIn: ' + '\n- ' + document.getElementById('linkedin').value + 
      '\n' + 

    var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    var fileNameToSaveAs = document.getElementById("filename").value;

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    downloadLink.href = textToSaveAsURL;
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);

    downloadLink.click();

    }

function destroyClickedElement(event)
{
document.body.removeChild(event.target);
}

主文件：Test.html

<head>
    <title>Resumaker</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>

    <header> 
        <nav>
            <h1 class = "second"> RESUMAKER </h1>
            <ul>
                <li><a href="build.html" target="_blank"><span> Build Your Resume </span></a></li>
                <li><a href="createaccount.html" target="_blank"><span> Create Account </span></a></li>
                <li><a href="signin.html" target="_blank"><span> Sign in </span></a></li>
                <li><a href="resources.html" target="_blank"><span> Resources </span></a></li>
                <li><a href="contacts.html" target="_blank"><span> Talk To Us </span></a></li>
            </ul>
        </nav>
    </header>

    <script type="text/javascript" src="main.js"></script>

</body>

Answer 1

（编辑：替换为第一个答案）

删除action="main.php"，它会调用不存在的内容

将type="submit"转换为type="button"

Answer 2

将输入类型更改为“按钮”。将其设置为“提交”即可提交表单，而无需触发onclick函数

已编辑

我进一步查看了代码，在第19行发现了一个不存在的元素

document.getElementById('content').value

新编辑

之前

var textToSaveAsBlob

您应将结尾的“ +”替换为“;”

将HTML / JavaScript中表单的答案保存到用户指定的.txt文件时遇到问题

2 个答案:

已编辑

新编辑