Загрузите ответы формы html в текстовый файл

Question

У меня есть форма HTML с несколькими вопросами. После ответа на каждый вопрос, когда пользователь нажимает кнопку «Отправить», я хочу, чтобы ответы загружались либо в текстовом, либо в PDF-файле. Я тоже не получаю «ноль» в этом файле.

<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 содержит значение default для элемента.

Текущее значение, которое будет пользователь набрал, содержится в значении свойство .

Использование .value.

Answer 2

Вам нужны разные идентификаторы (и имена) для каждого ввода.

Вам также необходимо заменить .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>

edit: чтобы выбрать имя файла, перейдите по этой ссылке: { ссылка }