JSのみで入力→確認→メールで送信させるには

締切済

質問者：tamakosato
質問日時：2009/12/03 09:27
回答数：2件

以下の流れのフローをJSのみで、DBを使わず作成したいのですが・・・
1.入力画面（ブランクチェック）→2.入力内容確認画面（戻る、送信ボタン）→3.完了画面
2.の入力内容はメールで送信させたいです。

以下、試みているのですが、うまくいきません・・・（；；）
すみません、どなたか助けていただけますでしょうか。。。m（_ _）m

<HTML>
<HEAD>

<script type="text/javascript" src="check.js"></script>
<link href="design.css" rel="stylesheet" type="text/css">
<TITLE>データ送信テスト</TITLE>
</HEAD>

<body onload="init()">

<FORM NAME="form1" METHOD="post" ACTION="" ENCTYPE="text/plain" OnSubmit="CheckData(this.form1)">
<TABLE>

<TR VALIGN="top">
<TD>お名前</TD>
<TD><INPUT TYPE="text" SIZE=50 NAME="username" ID="username"></TD>
</TR>

<TR VALIGN="top">
<TD>メール本文</TD>
<TD>
<TEXTAREA NAME="message" COLS=50 ROWS=5 WRAP="virtual" ID="message">
</TEXTAREA>
</TD>
</TR>

<TR>
<TD></TD>
<TD>

<INPUT TYPE="submit" VALUE="送信内容確認">
<INPUT TYPE="reset" VALUE="クリア">
</TD>
</TR>

</TABLE>
</FORM>
</body>
</HTML>

function init(){
username = document.form1.getElementById("username");
message = document.form1.getElementById("message");

//入力内容確認
function CheckData() {
var okflg;

okflg = 0;

if(username.length == 0){
datacheck(1);
okflg = 1;
}
if(message.length == 0){
datacheck(5);
okflg = 5;
}

try{
if(okflg == 0) {
document.form1.location = "04.html";
}
catch(error){
alert(error.number + "\n" + error.description);
}
}
}

function dataCheck(flag){
//データをチェックする関数
var tempStr = "は必ず入力してください。";

if (flag == 1) {
alert("お名前" + tempStr);
return false;
}
if (flag == 5) {
alert("メッセージ" + tempStr);
return false;
}

return true;
}
//データ送信
function WriteMail() {
try{
if(dataCheck()) {
document.form2.action = "mailto:test@test.co.jp";
contents = ('?subject=' + document.form2.sbj.value);
}
}catch(error){
alert(error.number + "\n" + error.description);
}
}

HTMLとJSを分けており、次の画面でメール送信させたいのですが・・
考え方としてあっていますでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： chochobizo
回答日時：2009/12/04 14:48

試したところ、submitされました。

確認メッセージが出たあと、送信されました。
alert("よんでる");があると２回ボタンを押さないとダメなようでしたので
コメントアウトして試しました。

OutlookExpress以外のメーラーではどうなるのかわかりませんが・・

- 0
- 件

通報する

この回答へのお礼

わざわざありがとうございました。
大変参考になりました。m(_ _)m

通報する

お礼日時：2009/12/07 10:07

No.1

回答者： yambejp
回答日時：2009/12/03 10:21

javascriptでメールを出せるのはブラウザやメーラーなど環境に依存し

不正確きわまりないためやめた方がいいでしょう。

やるならサーバーのメール機能をつかったものにすべきだと思います

この回答への補足

的確なアドバイス、ありがとうございます。
そのようにいたしますが、その説得のためにも動かしたいと思います。
サブミットされないのですが、どうしてでしょうか。。。
申し訳ありませんが、ご意見いただければ幸いです。m(_ _)m

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script>
function formload(){
var params = getParameter(decodeURI(location.search));
var str ="";
for(i=0; i < params.length; i++)
{
switch (i) {
case 0:
str += "お名前：" + params[i] + "<br>";
break;
case 1:
str += "メールアドレス：" + params[i] + "<br>";
break;
case 2:
str += "表題：" + params[i] + "<br>";
break;
case 3:
str += "本文：" + params[i] + "<br>";
//str += params[i] + "<br>";
break;
default:
break;
}
document.form2.message.value += params[i] + "\n";
}
// ここの段階で入力チェックをまとめてやっても良い
document.getElementById("result").innerHTML = "入力内容確認：<br>" + str;
}
// Query String から配列を返す
function getParameter(str){
var dec = decodeURIComponent;
var par = new Array, itm;
if(typeof(str) == 'undefined') return par;
if(str.indexOf('?', 0) > -1) str = str.split('?')[1];
str = str.split('&');
for(var i = 0; str.length > i; i++){
itm = str[i].split("=");
if(itm[0] != ''){
//par[itm[0]] = typeof(itm[1]) == 'undefined' ? true : dec(itm[1]);// 名前を添え字とする場合に有効にする
par[i] = typeof(itm[1]) == 'undefined' ? true : dec(itm[1]);
}
}
return par;
}
function WriteMail() {
alert("よんでる");
document.form2.action = "mailto:tamakosato@.co.jp";
contents = ('?subject=' + "テストメール");
//contents = ((document.mailer.who.options[document.mailer.who.selectedIndex].value) );
}

</script>
<link href="design.css" rel="stylesheet" type="text/css">
</HEAD>
<body onload="formload();" >
<title>test02-受信側</title>
<form name="form2" method="post" action="" enctype="text/plain" OnSubmit="(document.form2.action += contents)">
<div id="result"></div>
<br><br>

<TABLE>



<TR VALIGN="top">
<TD>上記内容でよろしければ、「メール送信」ボタンをクリックしてください</TD>
<TD>
</TD>
</TR>

<TR>
<TD><textarea name="message" cols=50 rows=5 wrap="virtual" onchange="WriteMail(this.form)" id="message">
</textarea>
</TD>
<TD>
</TD>
</TR>
<TR>
<TD><INPUT TYPE="submit" VALUE="メール送信">
<INPUT type="button" value="入力内容を修正" onClick="history.back()">
</TD>
<TD></TD>
</TR>
</TABLE>
</FORM>
</body>
</HTML>