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