Download the responses of a html form to a text file

Question

I have an HTML form with a few questions. After answering each when the user clicks submit, I want the responses to get downloaded either in a text file or a pdf file. I'm not either getting "null" written in that file.

<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

You need different id (and name) for each input.

You also need to replace .getAttribute("value") with .value

The following code works:

<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: in order to choose the filename, follow this link: https://stackoverflow.com/a/7034818/3520059

Answer 2

.getAttribute("value")

The value attribute holds the default value for the element.

The current value, which will be what the user has typed in, is held in the value property.

Use .value.