将 html 表单的响应下载到文本文件

Question

我有一个 HTML 表单，其中有几个问题。当用户单击“提交”时回答每个问题后，我希望将响应下载为文本文件或 pdf 文件。我也没有在该文件中写入“null”。

<form class="contact100-form validate-form">

  <div id="source">

    <div class="wrap-input100 validate-input" required="required">

      <span class="label-input100"><h4>Name</h4></span>

      <input

        id="source"

        class="input100"

        type="text"

        name="name"

        placeholder="enter your full name..."

      />

    </div>

    <div class="wrap-input100 validate-input" required="required">

      <span class="label-input100"><h4>Your Birthday</h4></span>

      <input

        id="source"

        class="input100"

        type="text"

        name="name"

        placeholder="write your complete DOB dd-mm-yyyy..."

      />

    </div>

    <div class="wrap-input100 validate-input" required="required">

      <span class="label-input100"><h4>Contact Number (Primary)</h4></span>

      <input

        id="source"

        class="input100"

        type="text"

        name="name"

        placeholder="this is most important..."

      />

    </div>

    <div class="container-contact100-form-btn">

      <div class="wrap-contact100-form-btn">

        <div class="contact100-form-bgbtn"></div>

        <button type="button" id="save" title="Save as text file">

          Send

        </button>

      </div>

    </div>

  </div>

</form>

<script type="text/javascript">

      // when document is ready

      document.getElementById("save").onclick = function () {

        // when clicked the button

        var content = document.getElementById("source").getAttribute("value");

        // a [save as] dialog will be shown

        window.open(

          "data:application/txt," + encodeURIComponent(content),

          "_self"

        );

      };

    </script>

Answer 1

.getAttribute("value")value属性保存元素的默认值。当前值（即用户输入的值）保存在 value属性中。使用.value。

Answer 2

每个输入都需要不同的 ID（和名称）。您还需要将 .getAttribute("value") 替换为 .value以下代码有效：<form class="contact100-form validate-form">    <div id="source">        <div class="wrap-input100 validate-input" required="required">            <span class="label-input100"><h4>Name</h4></span>            <input id="name" class="input100" type="text" name="name" placeholder="enter your full name..." />         </div>        <div class="wrap-input100 validate-input" required="required">            <span class="label-input100"><h4>Your Birthday</h4></span>            <input id="birthday" class="input100" type="text" name="birthday" placeholder="write your complete DOB dd-mm-yyyy..." />        </div>        <div class="wrap-input100 validate-input" required="required">            <span class="label-input100"><h4>Contact Number (Primary)</h4></span>            <input id="contactNb" class="input100" type="text" name="contactNb" placeholder="this is most important..." />        </div>    <div class="container-contact100-form-btn">        <div class="wrap-contact100-form-btn">             <div class="contact100-form-bgbtn"></div>                <button type="button" id="save" title="Save as text file">Send</button>            </div>        </div>    </div></form><script type="text/javascript">    document.getElementById("save").onclick = function () {        var name = document.getElementById('name').value;        var birthday = document.getElementById('birthday').value;        var contactNb = document.getElementById('contactNb').value;        var content = " name: " + name + "\n birthday: " + birthday + "\n contact number: " + contactNb         window.open( "data:application/txt," + encodeURIComponent(content), "f.txt" );    };</script>