コンタクトフォームをhtmlで作ってみたので、そこに入力された内容を「送信する」をクリックしたときにテキストファイルとしてダウンロードさせたいのですが、エラーはでないもののテキストファイルでの出力ができません。
ほぼ丸投げのようになってしまい申し訳ないのですが、どこがいけないのか全く分からず、アドバイスをいただけると幸いです。
html
1 <form action="" method="get" name="contact_form"> 2 <p>お名前 <font color="red">*</font><br> 3 <input type="text" name="name" id="name"> 4 </p> 5 <p id="notice-input-text-1" style="display: none; color: red;"> 【お名前を入力して下さい】</p> 6 <p>メールアドレス <font color="red">*</font><br> 7 <input type="text" name="mail" id="mail" cols="30"> 8 </p> 9 <p id="notice-input-text-2" style="display: none; color: red;"> 【メールアドレスを入力してください】</p> 10 <p>電話番号<br> 11 <input type="text" name="tel" id="tel" > 12 </p> 13 <p>お問い合わせ内容 <font color="red">*</font><br> 14 <textarea name="comment" id="comment" cols="100" rows="20"></textarea> 15 </p> 16 <p id="notice-input-text-3" style="display: none; color: red;"> 【内容を入力してください】</p> 17 <p> 18 <input id="createFile" download="outFile.txt" type="button" value="送信する" onclick="output();"/> 19 </p> 20 <p><font color="red">*</font>の部分は入力必須項目です。</p> 21 </form>
JavaScript
1function output() { 2 var flag = 0; 3 if (document.contact_form.name.value == "") { 4 flag = 1; 5 document.getElementById('notice-input-text-1').style.display = "block"; 6 } else { 7 document.getElementById('notice-input-text-1').style.display = "none"; 8 } 9 if (document.contact_form.mail.value == "") { 10 flag = 1; 11 document.getElementById('notice-input-text-2').style.display = "block"; 12 } else { 13 document.getElementById('notice-input-text-2').style.display = "none"; 14 } 15 if (document.contact_form.comment.value == "") { 16 flag = 1; 17 document.getElementById('notice-input-text-3').style.display = "block"; 18 } else { 19 document.getElementById('notice-input-text-3').style.display = "none"; 20 } 21 if (flag) { 22 window.alert('必須項目は全て入力して下さい。'); 23 return false; 24 } else { 25 var text = "'" + document.contact_form.name.value + "','" + document.contact_form.mail.value + "','" + document.contact_form.tel.value + "','" + document.contact_form.comment.value + "','" 26 var a = document.createElement('a'); 27 var blob = new Blob([text], { 28 "type": "text/plain;" 29 }); 30 if (window.webkitURL && window.webkitURL.createObject) { 31 a.href = window.webkitURL.createObjectURL(blob); 32 a.click(); 33 } 34 return true; 35 } 36} 37output()
HTMLとjavascriptを利用してFormの内容をファイルに出力する方法
上記サイトが全く同じことをしようとしていたため参考にして上記のjsのコードを以下のように書き換えたのですが、上記サイトのプログラムではきちんとテキストファイルにダウンロードが実行されるのに、書き換えたほうではうまく動きません。
変更後のコード
JavaScript
1function output() { 2 var flag = 0; 3//チェックコードは省略 4 if (flag) { 5 window.alert('必須項目は全て入力して下さい。'); 6 return false; 7 } else { 8 var text = "'" + document.contact_form.name.value + "','" + document.contact_form.mail.value + "','" + document.contact_form.tel.value + "','" + document.contact_form.comment.value + "','"; 9 var a = document.createElement('a'); 10 var blob = new Blob([text], { 11 "type": "text/plain;" 12 }); 13 if (window.navigator.msSaveBlob) { 14 window.navigator.msSaveBlob(blob, "outFileFromWindows.txt"); 15 } else { 16 document.getElementById("createFile").href = window.URL.createObjectURL(blob); 17 } 18 return true; 19 }
回答2件
あなたの回答
tips
プレビュー