フォームでメールを送るスクリプトVer3です。
確認画面に消費税と、総計が表示されるようになり、合計個数、小計、消費税、
総計も一緒にメールで送られて来るようになりました。
また項目名も日本語で送られますので、メールが見やすくなっています。
一つの商品は、最高２０個まで注文可能。
名前、郵便番号、住所、電話番号は必須項目。
必須項目に記入がない場合、自動的にカーソルがその項目に移動。
郵便番号、電話番号は半角数字以外は不正と見なします。
半角数字以外が入力された場合は、訂正してもらう為に自動でカーソルが該当項目へ移動します。
Click!ボタンを押すと、確認画面で入力項目と、総注文数、総金額が表示されます。
ボタンを押すと内容確認の画面が出るます。
これは確認画面が新しくブラウザを開いて表示するようになっています。
（追記）
数値データをカンマ区切りに変更しました。
◆◆注意◆◆
サンプルにはメールアドレスを設定していません。
設定しているのは、「メールアドレス」と言う文字列です。
ですから動作確認は出来ますが、実際にはメールは宛先不明で戻って来ます。
それはエラーメールですので、そのまま削除して下さいませ。
（実際に使用する際メールアドレスを設定しましたら、ちゃんと指定先へエラーメールとは違う形式でメールが届きます。）
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
goods_no = new Array();
goods_name = new Array();
goods_ryou = new Array();
goods_money = new Array();
goods_max = new Array();
goods_txt = new Array();
my_title = new Array();
my_property = new Array();
my_kind = new Array();
pay_selection = new Array();
//メールアドレスを指定する
mail_address = 'メールアドレス';
//メールタイトルを指定する
mail_title = '注文メール';
/**************************************************
商品データ
**************************************************/
//商品1
goods_no[0] = 'NO.1';
goods_name[0] = 'あいうえお';
goods_ryou[0] = '100g';
goods_money[0] = 1000;
goods_max[0] = 5;
goods_txt[0] = 'あ行です。';
//商品2
goods_no[1] = 'NO.2';
goods_name[1] = 'かきくけこ';
goods_ryou[1] = '200g';
goods_money[1] = 2000;
goods_max[1] = 5;
goods_txt[1] = 'か行です。';
//商品3
goods_no[2] = 'NO.3';
goods_name[2] = 'さしすせそ';
goods_ryou[2] = '300g';
goods_money[2] = 3000;
goods_max[2] = 5;
goods_txt[2] = 'さ行です。';
//商品4
goods_no[3] = 'NO.4';
goods_name[3] = 'たちつてと';
goods_ryou[3] = '400g';
goods_money[3] = 4000;
goods_max[3] = 5;
goods_txt[3] = 'た行です。';
//商品5
goods_no[4] = 'NO.5';
goods_name[4] = 'なにぬねの';
goods_ryou[4] = '500g';
goods_money[4] = 5000;
goods_max[4] = 5;
goods_txt[4] = 'な行です。';
/**************************************************
支払い方法
**************************************************/
/**************************************************
支払い方法は自由に設定できます。
ただし、「方法を選択できる」機能のみになっております。
クレジットカードやネットバンキング決済、
インターネット決済サービスの場合のIDや番号を必要と
する際は、別の方法をご利用下さい。
**************************************************/
pay_selection[0] = '銀行振込';
pay_selection[1] = '郵便振替';
pay_selection[2] = '代金引換';
pay_selection[3] = 'コンビニ払い';
/**************************************************
顧客データ
**************************************************/
/**************************************************
入力データの属性について
0→未入力を許可。入力値の制限無し。
1→入力必須。入力値の制限無し。
2→未入力を許可。半角数値のみ入力許可。
3→入力必須。半角数値のみ入力許可。
4→未入力を許可。半角英数字のみ入力許可。
5→入力必須。半角英数字のみ入力許可。
6→未入力を許可。半角文字のみ入力許可。
7→入力必須。半角文字のみ入力許可。
上記7種類があります。
指定したい属性を下記の各項目のmy_propertyで指定して下さい。
**************************************************/
/**************************************************
入力データの種類について
0→テキスト入力（短文用）
3→テキスト入力（長文用）
上記2種類があります。
指定したい属性を下記の各項目のmy_kindで指定して下さい。
**************************************************/
//項目名1を入力
my_title[0] = "御名前";
my_property[0] = 1;
my_kind[0] = 0;
//項目名2を入力
my_title[1] = "郵便番号";
my_property[1] = 5;
my_kind[1] = 0;
//項目名3を入力
my_title[2] = "御住所1";
my_property[2] = 1;
my_kind[2] = 0;
//項目名4を入力
my_title[3] = "御住所2";
my_property[3] = 0;
my_kind[3] = 0;
//項目名5を入力
my_title[4] = "お電話番号";
my_property[4] = 5;
my_kind[4] = 0;
//項目名6を入力
my_title[5] = "メール";
my_property[5] = 0;
my_kind[5] = 0;
//項目名7を入力
my_title[6] = "備考";
my_property[6] = 0;
my_kind[6] = 3;
start_title = new Array();
start_title[0] = '商品NO';
start_title[1] = '商品名';
start_title[2] = '容量';
start_title[3] = '金額';
start_title[4] = '注文個数';
keisan_title = new Array();
keisan_title[0] = '総注文数';
keisan_title[1] = '合計';
keisan_title[2] = '消 費 税';
keisan_title[3] = '総計';
kakunin_title = new Array();
kakunin_title[0] = '商品NO';
kakunin_title[1] = '商品名';
kakunin_title[2] = '個数';
kakunin_title[3] = '容量';
kakunin_title[4] = '単価';
kakunin_title[5] = '小計';
/**************************************************
ウィンドウデザイン
**************************************************/
//ウィンドウの背景色を指定
bg_color = '#ffffff';
//ウィンドウの文字色を指定
text_color = '#000000';
//ウィンドウのリンク色を指定
link_color = '#0000ff';
//ウィンドウのvlink色を指定
vlink_color = '#9932cc';
//ウィンドウのalink色を指定
alink_color = '#ff00ff';
/**************************************************
テーブルデザイン
**************************************************/
//テーブルの位置
//left、center、rightから選択
table_align = 'left';
//テーブルの枠
table_border = 0;
//テーブルのセル同士の隙間
table_cellspacing = 0;
//テーブルのセルの隙間
table_cellpadding = 5;
//テーブルの背景色を指定
table_bgcolor = '#ffffff';
//テーブルのthの背景色を指定
th_bgcolor = '#ffd9b7';
//テーブルのthの文字色を指定
th_textcolor = '#622f00';
//テーブルのthの文字サイズを指定
th_textsize = '3';
//テーブルのtdの背景色を指定
td_bgcolor = '#fbf6d3';
//テーブルのtdの文字色を指定
td_textcolor = '#64590a';
//テーブルのtdの文字サイズを指定
td_textsize = '3';
/**************************************************
確認ウィンドウデザイン
**************************************************/
//確認ウィンドウの戻る文章を指定
back_moji='<font size="3">内容に間違いはありませんか？<br>訂正したい場合は戻るボタンを押して下さい。<\/font>';
//確認ウィンドウの送信ボタン名を指定
button1='送る';
//確認ウィンドウの戻るボタン名を指定
button2='戻る';
//確認ウィンドウの横幅を指定
win_w=600;
//確認ウィンドウの縦の高さを指定
win_h=500;
data = new Array();
mojis = '';
data_syoukei = new Array();
data_tanka = new Array();
kounyuu_kazu = 0;
kounyuu_kinngaku = 0;
goods_data = new Array();
syouhizei = 0;
kazu_data = new Array();
th_design = ' bgcolor="' + th_bgcolor + '"><font color="' + th_textcolor + '" size="' + th_textsize + '">';
td_design = ' bgcolor="' + td_bgcolor + '"><font color="' + td_textcolor + '" size="' + td_textsize + '">';
function MailCheck()
{
errors = -1;
error_txt = "";
kounyuu_kazu = 0;
kounyuu_kinngaku = 0;
for(i = 0; i < goods_no.length; i++)
{
goods_data[i] = document.form1.elements[i].selectedIndex;
kounyuu_kazu += goods_data[i];
kounyuu_kinngaku += goods_data[i] * goods_money[i];
data_tanka[i] = goods_money[i];
data_tanka[i] = new String(data_tanka[i]);
data_len1 = data_tanka[i].length;
if(data_len1 % 3 == 0)comma_kazu1 = data_len1 / 3 - 1;
else comma_kazu1 = Math.floor(data_len1 / 3);
data_syoukei[i] = goods_data[i] * goods_money[i];
data_syoukei[i] = new String(data_syoukei[i]);
data_len2 = data_syoukei[i].length;
if(data_len2 % 3 == 0)comma_kazu2 = data_len2 / 3 - 1;
else comma_kazu2 = Math.floor(data_len2 / 3);
len_doko = 3;
for(j = 0; j < comma_kazu1; j++)
{
data_tanka[i] = data_tanka[i].substring(0,data_len1 - len_doko)+ "," + data_tanka[i].substring(data_len1 - len_doko,data_len1);
data_len1++;
len_doko++;
len_doko += 3;
}
len_doko = 3;
for(j = 0; j < comma_kazu2; j++)
{
data_syoukei[i] = data_syoukei[i].substring(0,data_len2 - len_doko) + "," + data_syoukei[i].substring(data_len2 - len_doko,data_len2);
data_len2++;
len_doko++;
len_doko += 3;
}
}
syouhizei = Math.floor(kounyuu_kinngaku / 100 * 5);
kazu_data = new Array(kounyuu_kazu , kounyuu_kinngaku , syouhizei , syouhizei + kounyuu_kinngaku);
for(i = 0; i < kazu_data.length; i++)
{
kazu_data[i] = new String(kazu_data[i]);
data_len = kazu_data[i].length;
if(data_len % 3 == 0)comma_kazu = data_len / 3 - 1;
else comma_kazu = Math.floor(data_len / 3);
len_doko = 3;
for(j = 0; j < comma_kazu; j++)
{
kazu_data[i] = kazu_data[i].substring(0,data_len-len_doko) + "," + kazu_data[i].substring(data_len-len_doko,data_len);
data_len++;
len_doko++;
len_doko += 3;
}
}
data = new Array();
k = goods_no.length + keisan_title.length;
for(i = 0; i < my_title.length; i++)
{
data[i] = document.form1.elements[k].value;
if(data[i].length == 0)
{
if(my_property[i] == 1 || my_property[i] == 3 || my_property[i] == 5 || my_property[i] == 7)
{
errors = i;
error_txt = my_title[i] + "が入力されていません。";
break;
}
}
else if((my_property[i] == 2 || my_property[i] == 3) && data[i].length > 0 && data[i].match(/\D/))
{
errors = i;
error_txt = my_title[i] + "の値が不正です。";
break;
}
else if((my_property[i] == 4 || my_property[i] == 5) && data[i].length > 0 && data[i].match(/\W/))
{
errors = i;
error_txt = my_title[i] + "の値が不正です。";
break;
}
else if((my_property[i] == 6 || my_property[i] == 7) && data[i].length > 0 && data[i].match(/\W/))
{
kekka = 0;
for(j = 0; j < data[i].length; j ++ )
{
dore = escape(data[i].charAt(j));
if(navigator.appName.indexOf("Netscape") != -1)
{
if(dore.length > 3 && dore.indexOf("%") != -1)kekka++;
}
else
{
if(dore.indexOf("%uFF") != -1 && '0x' + dore.substring(2 , dore.length) < 0xFF60)kekka++;
else if(data[i].match(/\W/g) != null && dore.length == 6)kekka++;
}
}
if(kekka > 0)
{
errors = i;
error_txt = my_title[i] + "の値が不正です。";
break;
}
}
if(data[i].length < 1 || data[i] == '')data[i] = "<br>";
k++;
}
pay = '';
k = goods_no.length + keisan_title.length + my_title.length;
for(i = 0; i < pay_selection.length; i++)
{
if(document.form1.elements[k].checked == true)
{
pay = document.form1.elements[k].value;
break;
}
k++;
}
if(kounyuu_kazu == 0 || kounyuu_kinngaku == 0)
{
alert("商品が何も選択されていません。");
}
else if(errors != -1)
{
alert(error_txt);
}
else if(pay == '')
{
alert("支払い方法が選択されていません。");
}
else
{
k = goods_no.length;
for(i = 0; i < keisan_title.length; i++)
{
document.form1.elements[k].value = kazu_data[i];
k++;
}
mojis = '<html>\n<head>\n<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">\n';
mojis += '<title>送信内容確認画面<\/title>\n';
mojis += '<script language="JavaScript">\n';
mojis += 'function MailSend(){window.opener.document.form1.submit();window.close();}\n';
mojis += 'function PageBack(){window.opener.focus();window.close();}\n';
mojis += '<\/script>\n<\/head>\n';
mojis += '<body text="' + text_color + '" bgcolor="' + bg_color + '" link="' + link_color + '" vlink="' + vlink_color + '" alink="' + alink_color + '">\n';
mojis += '<table width="100%" align="' + table_align + '" bgcolor="' + table_bgcolor + '" border="' + table_border + '" cellspacing="' + table_cellspacing + '" cellpadding="' + table_cellpadding + '">\n';
mojis += '<tr>\n';
mojis += '<th width="30%"' + th_design + kakunin_title[0] + '<\/font><\/th>\n';
mojis += '<th width="30%"' + th_design + kakunin_title[1] + '<\/font><\/th>\n';
mojis += '<th width="10%"' + th_design + kakunin_title[2] + '<\/font><\/th>\n';
mojis += '<th width="10%"' + th_design + kakunin_title[3] + '<\/font><\/th>\n';
mojis += '<th width="10%"' + th_design + kakunin_title[4] + '<\/font><\/th>\n';
mojis += '<th width="10%"' + th_design + kakunin_title[5] + '<\/font><\/th>\n';
mojis += '<\/tr>\n';
for(i = 0; i < goods_data.length; i++)
{
mojis += '<tr>\n';
mojis += '<td' + td_design + goods_no[i] + '<\/font><\/td>\n';
mojis += '<td' + td_design + goods_name[i] + '<\/font><\/td>\n';
mojis += '<td align="right"' + td_design + goods_data[i] + '<\/font><\/td>\n';
mojis += '<td' + td_design + goods_ryou[i] + '<\/font><\/td>\n';
mojis += '<td align="right"' + td_design + data_tanka[i] + '<\/font><\/td>\n';
mojis += '<td align="right"' + td_design + data_syoukei[i] + '<\/font><\/td>\n';
mojis += '<\/tr>\n\n';
}
mojis += '<tr>\n';
mojis += '<th colspan="2"' + th_design + keisan_title[1] + '<\/font><\/th>\n';
mojis += '<th' + th_design + kazu_data[0] + '<\/font><\/th>\n';
mojis += '<th colspan="2" nowrap' + th_design + keisan_title[1] + '<\/font><\/th>\n';
mojis += '<th align="right" nowrap' + th_design + '￥' + kazu_data[1] + '<\/font><\/th>\n';
mojis += '<\/tr>\n';
mojis += '<tr>\n';
mojis += '<th colspan="3"' + th_design + '<br><\/font><\/th>\n';
mojis += '<th colspan="2" nowrap' + th_design + keisan_title[2] + '<\/font><\/th>\n';
mojis += '<th align="right" nowrap' + th_design + kazu_data[2] + '<\/font><\/th>\n';
mojis += '<\/tr>\n';
mojis += '<tr>\n';
mojis += '<th colspan="2"' + th_design + keisan_title[0] + '<\/font><\/th>\n';
mojis += '<th' + th_design + kazu_data[0] + '<\/font><\/th>\n';
mojis += '<th colspan="2" nowrap' + th_design + keisan_title[3] + '<\/font><\/th>\n';
mojis += '<th align="right" nowrap' + th_design + kazu_data[3] + '<\/font><\/th>\n';
mojis += '<\/tr>\n';
mojis += '<\/table>\n\n';
mojis += '<br clear="all"><hr><br clear="all">\n\n';
mojis += '<table width="100%" align="' + table_align + '" bgcolor="' + table_bgcolor + '" border="' + table_border + '" cellspacing="' + table_cellspacing + '" cellpadding="' + table_cellpadding + '">\n';
for(i = 0; i < my_title.length; i++)
{
mojis += '<tr>\n';
mojis += '<th width="30%" align="left"' + th_design + my_title[i] + '<\/font><\/th>\n';
mojis += '<td' + td_design + data[i] + '<\/font><\/td>\n';
mojis += '<\/tr>\n';
}
mojis += '<tr>\n';
mojis += '<th width="30%" align="left"' + th_design + '支払い方法<\/font><\/th>\n';
mojis += '<td' + td_design + pay + '<\/font><\/td>\n';
mojis += '<\/tr>\n';
mojis += '<tr>\n';
mojis += '<td colspan="2" align="center">\n';
mojis += '<form name="you_form">\n';
mojis += '<input type="button" onClick="MailSend();" name="ok" value="' + button1 + '">\n';
mojis += ' <input type="button" onClick="PageBack();" name="no" value="' + button2 + '"><\/form>';
mojis += '<\/td>\n';
mojis += '<\/tr>\n';
mojis += '<\/table>\n<br clear="all">\n';
mojis += '<div align=center>\n' + back_moji + '<\/div><\/body><\/html>\n';
wins='width=' + win_w + ',height=' + win_w + ',scrollbars=yes';
mado=window.open("" , "" , wins);
mado.document.open();
mado.document.write(mojis);
mado.document.close();
}
}
function StartFormWrite()
{
mojis = '<body text="' + text_color + '" bgcolor="' + bg_color + '" link="' + link_color + '" vlink="' + vlink_color + '" alink="' + alink_color + '">\n';
mojis += '<table align="' + table_align + '" bgcolor="' + table_bgcolor + '" border="' + table_border + '" cellspacing="' + table_cellspacing + '" cellpadding="' + table_cellpadding + '">\n';
mojis += '<form name="form1" method="post" enctype="text/plain" action="mailto:' + mail_address + '?Subject=' + mail_title + '">\n';
mojis += '<tr>\n';
for(i = 0; i < start_title.length; i++)
{
mojis += '<th' + th_design + start_title[i] + '<\/font><\/th>\n';
}
mojis += '<\/tr>\n';
for(i = 0; i < goods_no.length; i++)
{
mojis += '<tr>';
mojis += '<td' + td_design + goods_no[i] + '<\/font><\/td>\n';
mojis += '<td' + td_design + goods_name[i] + '<\/font><\/td>\n';
mojis += '<td' + td_design + goods_ryou[i] + '<\/font><\/td>\n';
mojis += '<td' + td_design + goods_money[i] + '<\/font><\/td>\n';
mojis += '<td' + td_design + '<select name="' + goods_no[i] + goods_name[i] + '">\n';
for(j = 0; j < goods_max[i] + 1; j++)
{
if(j == 0){ mojis += '<option value="">'; }
else { mojis += '<option value="' + j + '">' + j; }
}
mojis += '<\/select><\/font><\/td>\n';
mojis += '<\/tr>\n';
mojis += '<tr>\n';
mojis += '<td colspan="5"' + td_design + goods_txt[i] + '<\/font><\/td>\n';
mojis += '<\/tr>\n';
}
for(i = 0; i < keisan_title.length; i++)
{
mojis += '<input type="hidden" name="' + keisan_title[i] + '" value="">\n';
}
for(i = 0; i < my_title.length; i++)
{
mojis += '<tr><th align="left"' + th_design + my_title[i] + '<\/font><\/th>\n';
if(my_kind[i] == 0)
{
mojis += '<td colspan="4"' + td_design + '<input type="text" name="' + my_title[i] + '" size="50"><\/font><\/td><\/tr>\n\n';
}
else
{
mojis += '<td colspan="4"' + td_design + '<textarea name="' + my_title[i] + '" cols="40" rows="5"><\/textarea><\/font><\/td><\/tr>\n';
}
}
mojis += '<tr>\n';
mojis += '<th' + th_design + '支払い方法<\/font><\/th>\n';
mojis += '<td colspan="4"' + td_design + '\n';
for(i = 0; i < pay_selection.length; i++)
{
mojis += '<input type="radio" name="支払い方法" value="' + pay_selection[i] + '">' + pay_selection[i] + '<br>\n';
}
mojis += '<\/font><\/td>\n';
mojis += '<\/tr>\n';
mojis += '<tr><td colspan="5" align="center">\n';
mojis += '<input type="button" value="確認" onClick="MailCheck();" name="kaku"><\/td><\/tr>\n';
mojis += '<\/form><\/table>\n';
document.write(mojis);
}
//-->
</script>
</head>
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
StartFormWrite();
//-->
</script>
<noscript><body></noscript>
</body></html>
[ 解説 ]
スクリプト内に1カ所、「メールアドレス」と書かれている部分があります。
この「メールアドレス」の文字列を、必ずメールを届けたいメールアドレスに変更して下さい。
変更しませんと、メールは届きません。
また、商品データ内で半角数値で記入している部分に関しては、
必ず半角数値を指定して下さい。
前科文字を指定した場合、エラーが生じます。
サンプルスクリプトでは画面上に5つの商品が設定されています。
もし、商品数を増やしたい場合は、まずスクリプト内の
//商品5
goods_no[4] = 'NO.5';
goods_name[4] = 'なにぬねの';
goods_ryou[4] = '500g';
goods_money[4] = 5000;
goods_max[4] = 5;
goods_txt[4] = 'な行です。';
を、コピーしてその真下に追加して下さい。
>
商品ＮＯ、商品名、容量、金額、コメント内容ははご自由に変更して下さい。
そして、必ず「[4]」と書かれた部分を、全て「[5]」にします。
この時、必ず半角数字でご記入下さい。
また、更にもう一つ商品を増やす場合は、同じようにコピーペーストし、
数値部分が「[6]」にご変更下さい。
その他の変更出来る箇所は注釈を付けておりますので、
そちらをご覧になってご変更下さい。
|
