JavaScriptを使ってコンタクトフォームに入力された内容をテキスト出力したい

Question

コンタクトフォームをhtmlで作ってみたので、そこに入力された内容を「送信する」をクリックしたときにテキストファイルとしてダウンロードさせたいのですが、エラーはでないもののテキストファイルでの出力ができません。
ほぼ丸投げのようになってしまい申し訳ないのですが、どこがいけないのか全く分からず、アドバイスをいただけると幸いです。

　　　<form  action="" method="get" name="contact_form">
        <p>お名前 <font color="red">*</font><br>
          <input type="text" name="name" id="name">
        </p>
        <p id="notice-input-text-1" style="display: none; color: red;"> 【お名前を入力して下さい】</p>
        <p>メールアドレス <font color="red">*</font><br>
          <input type="text" name="mail" id="mail" cols="30">
        </p>
        <p id="notice-input-text-2" style="display: none; color: red;"> 【メールアドレスを入力してください】</p>
        <p>電話番号<br>
          <input type="text" name="tel" id="tel" >
        </p>
        <p>お問い合わせ内容　<font color="red">*</font><br>
          <textarea name="comment" id="comment" cols="100" rows="20"></textarea>
        </p>
        <p id="notice-input-text-3" style="display: none; color: red;"> 【内容を入力してください】</p>
        <p>
        <input id="createFile" download="outFile.txt" type="button" value="送信する" onclick="output();"/>
      </p>
      <p><font color="red">*</font>の部分は入力必須項目です。</p>
    </form>

function output() {
  var flag = 0;
  if (document.contact_form.name.value == "") {
    flag = 1;
    document.getElementById('notice-input-text-1').style.display = "block";
  } else {
    document.getElementById('notice-input-text-1').style.display = "none";
  }
  if (document.contact_form.mail.value == "") {
    flag = 1;
    document.getElementById('notice-input-text-2').style.display = "block";
  } else {
    document.getElementById('notice-input-text-2').style.display = "none";
  }
  if (document.contact_form.comment.value == "") {
    flag = 1;
    document.getElementById('notice-input-text-3').style.display = "block";
  } else {
    document.getElementById('notice-input-text-3').style.display = "none";
  }
  if (flag) {
    window.alert('必須項目は全て入力して下さい。');
    return false;
  } else {
    var text = "'" + document.contact_form.name.value + "','" + document.contact_form.mail.value + "','" + document.contact_form.tel.value + "','" + document.contact_form.comment.value + "','"
    var a = document.createElement('a');
    var blob = new Blob([text], {
      "type": "text/plain;"
    });
    if (window.webkitURL && window.webkitURL.createObject) {
      a.href = window.webkitURL.createObjectURL(blob);
      a.click();
    }
    return true;
  }
}
output()

HTMLとjavascriptを利用してFormの内容をファイルに出力する方法
上記サイトが全く同じことをしようとしていたため参考にして上記のjsのコードを以下のように書き換えたのですが、上記サイトのプログラムではきちんとテキストファイルにダウンロードが実行されるのに、書き換えたほうではうまく動きません。

変更後のコード

function output() {
  　var flag = 0;
//チェックコードは省略
 　 if (flag) {
    window.alert('必須項目は全て入力して下さい。');
    return false;
  } else {
    var text = "'" + document.contact_form.name.value + "','" + document.contact_form.mail.value + "','" + document.contact_form.tel.value + "','" + document.contact_form.comment.value + "','";
    var a = document.createElement('a');
    var blob = new Blob([text], {
      "type": "text/plain;"
    });
    if (window.navigator.msSaveBlob) {
        window.navigator.msSaveBlob(blob, "outFileFromWindows.txt");
    } else {
        document.getElementById("createFile").href = window.URL.createObjectURL(blob);
    }
    return true;
  }

Comments

[m.ts10806]

.や()など連なっているところにスペースをあけないようにしてください。
可読性もよくありません。

[m.ts10806]

あとインデントはきちんと揃えてください。{}の対応などが見えづらくなると問題切り分けにも支障が出てきます。
お手元のコードを修正した上で質問に転記してください。

[x_x]

a要素をやめたのはなぜでしょうか？

[yys949]

inputでボタンを作ってあるためそれで代用できる思っていました。

Answer 1

<form  action="" id="id_form" name="contact_form">
        <label id="001">お名前 <font color="red">*</font></label><br>
          <input type="text" name="a001" value="">
        <p></p>
        <p id="notice-input-text-1" style="display: none; color: red;"> 【お名前を入力して下さい】</p>
        <label id="002">メールアドレス <font color="red">*</font></label><br>
          <input type="text" name="a002" cols="30" value="">
        <p></p>
        <p id="notice-input-text-2" style="display: none; color: red;"> 【メールアドレスを入力してください】</p>
        <label id="003">電話番号</label><br>
          <input type="text" name="a003" value="">
        <p></p>
        <label id="004">お問い合わせ内容　<font color="red">*</font></label><br>
          <textarea type="text" name="a004" id="a004" cols="100" rows="20" value=""></textarea>
        <p></p>
        <p id="notice-input-text-3" style="display: none; color: red;"> 【内容を入力してください】</p>
        <p>
      <a id="createFile" class="btn-square" href="#"  download="outFile.txt" onclick="output();">送信する</a>
      </p>
      <p><font color="red">*</font>の部分は入力必須項目です。</p>
      </form>

function output() {
  var flag = 0;
  if (document.contact_form.a001.value == "") {
    flag = 1;
    document.getElementById('notice-input-text-1').style.display = "block";
  } else {
    document.getElementById('notice-input-text-1').style.display = "none";
  }
  if (document.contact_form.a002.value == "") {
    flag = 1;
    document.getElementById('notice-input-text-2').style.display = "block";
  } else {
    document.getElementById('notice-input-text-2').style.display = "none";
  }
  if (document.contact_form.a004.value == "") {
    flag = 1;
    document.getElementById('notice-input-text-3').style.display = "block";
  } else {
    document.getElementById('notice-input-text-3').style.display = "none";
  }
  if (flag) {
    window.alert('必須項目は全て入力して下さい。');
    return false;
  } else {
    var text = 'お名前：\n' + document.contact_form.a001.value + "\n\nメールアドレス：\n" + document.contact_form.a002.value + "\n\n電話番号：\n" + document.contact_form.a003.value + "\n\nお問い合わせ内容：\n" + document.contact_form.a004.value + "";
    var blob = new Blob([text], {
      "type": "text/plain;"
    });
    if (window.navigator.msSaveBlob) {
        window.navigator.msSaveBlob(blob, "outFileFromWindows.txt");
    } else {
        document.getElementById("createFile").href = window.URL.createObjectURL(blob);
    }
  }
}

上記のように書き換えたところうまくいきました。

Answer 2

そのものズバリをやってくれているブログを見つけました。
参照してみてはいかがでしょうか？

【JavaScript】ローカルファイルにテキストを出力して保存

Comments

[yys949]

教えていただきありがとうございます。
教えていただきましたサイトも参考にしているのですが、どうにもうまくできません。