ホームページ・ビルダVersion6で注文書を作成中です。
*質問内容*
()内はソースで使用する名前です(勝手につけてみました。)
ファイル1(tyumon1.htm)にて
フォーム1(name=f1)内に
一行テキスト(name=size)
オプションメニュー(name=syohin)
(option=a)
(option=b)
(option=c)
(option=d)
チェックボックス(name=check)
を設定。
お客さんがこの(f1)に従い、入力したり選択したりし、(check)欄へ印をつけると、予め(tyumon1)の下記へ設定しといたフォーム2(name=f2)へと転送される。
又、一度転送されたら(check)欄は消え、注文内容を新たに選択し(check)欄へ印をつけると下記(f2)へ追加される様設定したい。
ちなみに(f2)のレイアウトは、
一行テキスト(name=No){オートナンバー「追加される毎に、数字が1・2・3となる様にしたい為」}
一行テキスト(name=size){転送}
一行テキスト(name=syohin){転送}
一行テキスト(name=memo){任意入力}
チェックボックス(name=sakujyo)
とこんな感じです。
この(f2)にある(sakujyo)へ印をつけると、その行は次の画面(kakunin.htm)で削除されて表示する様にしたい。最終的な注文内容の確認もここになります。つまり(f2)の内容を(kakunin.htm)の(f3)へ転送するという事です。
ここまでが質問内容です。
ここまで読んで理解して頂いた方、本当に有難う御座います。もし「これなら」という方がいらっしゃいましたら、是非スクリプトや長いソースになってしまうと思いますが、簡単で大丈夫なので、ご教示頂けましたら大変助かります。どうかどうか、宜しく御願い申し上げます。
No.1ベストアンサー
- 回答日時:
仕様不確定部分が多過ぎるため、暫定版ですがとりあえず作ってみました。
回答が遅すぎたかな。。。コピペして動かしてみてくださいな。
それで、問題があれば作り直します。
tyumon1.htm
↓↓↓↓↓ソースここから↓↓↓↓↓
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<script language="JavaScript">
<!--
//No初期値セット
g_No = 0;
function fncA(){
//ブランクチェック
if(document.f1.size.value==""){
alert("入力してください");
document.f1.check.checked=false;
document.f1.size.focus();
return;
}
//ナンバーカウントアップ
g_No = g_No+1;
//データセット
if(g_No==1){
wkNo = g_No;
wkSz = document.f1.size.value;
wkSy = document.f1.syohin.value;
}else{
wkNo = document.f2.No.value+"・"+g_No;
wkSz = document.f2.size.value+"・"+document.f1.size.value;
wkSy = document.f2.syohin.value+"・"+document.f1.syohin.value;
}
document.f2.No.value=wkNo;
//データ移動処理
document.f2.size.value=wkSz;
document.f2.syohin.value=wkSy;
//後処理
document.f1.size.value="";
document.f1.syohin.selectedIndex=0;
document.f1.check.checked=false;
alert("a");
}
function fncB(){
document.f2.submit();
}
-->
</script>
<body>
form1<br>
<form name="f1">
サイズ
<input type="text" name="size"><br>
商品
<select name="syohin">
<option value="a">a
<option value="b">b
<option value="c">c
<option value="d">d
</select><br>
チェック
<input type="checkbox" name="check" onclick="fncA()"><br>
</form>
form2<br>
<form name="f2" action="kakunin.htm" method="post">
ナンバー<input type="text" name="No"><br>
サイズ<input type="text" name="size"><br>
商品<input type="text" name="syohin"><br>
メモ<input type="text" name="memo"><br>
チェック <input type="checkbox" name="sakujyo" onclick="fncB()"><br>
</form>
</body>
</html>
↑↑↑↑↑ソースここまで↑↑↑↑↑
こちらからの質問項目
1、一行テキストってテキストボックスのことですよね?
2、普通はチェックボックスじゃなくボタン使うと思うんですけど、チェックボックスでいいんですよね?(笑
3、f2のフォームの削除機能はあまり意味が無い気がするのですが、、、これでいいのでしょうか?
4、次画面()の仕様が書かれていないので、作ってません。よろしければ詳細を教えてください。
この回答への補足
ご回答本当に有難うございます。
早速、質問項目について下記記入いたします。
1、そうです。テキストボックスの事です。
(HPビルダ6では初心者向けなのか、挿入の項目で「一行テキスト領域」・「複数行テキスト領域」かをクリックすると自然にそのテキストが出てきてくれる様になっているのです。今回使うのは、一行テキスト領域だったのでそう表現しました。)
2、どんなボタンでも機能が設定出来るのであれば、OKなのです。ならば質問はしなくても良いと思いましたが、「一般的に使われているボタン」という内容が気になったので、ならばそちらの方が良いのではないかと思いまして・・・。
→ボタンというのは、ラジオボタンの事ですか?
(ボタンの種類もたくさん選択出来て、以下があります。
プッシュボタン→送信ボタン
→リセットボタン
→画像ボタン
→一般ボタン
→拡張ボタン
ラジオボタン
チェックボックス
となっています。)ラジオボタンで宜しいのでしょうか?
3、OKです。
ただ、f1でチェックをつけて、f2に追加される箇所について、実は同じテキストの中に追加されるのでなく、ExcelやAccessの様にデータが1行目・2行目という感じで追加されてくれたらなぁと考えていたのです。これは、ムリなのですか?
例えば、以下の様にf2で設定する各テキストや削除ボタンが横一列に並んでると考えてみてください。
(表の中へテキストを埋め込んでみようかと思ってます。)
テキスト(No)|テキスト(size)|テキスト(syohin)|(memo)|ボタン(sakujyo)
f1でチェックを付けたら、上の項目欄に合わせて、行が次々に増えていくイメージです。
(よくある、「かいものかご」みたいなイメージなんですけどぉ。)
↓
1|25.0|サンダル|納期は?|削除ボタン
2|23.5|靴|返品できますか?|削除ボタン
3|27.0|サンダル| - |削除ボタン
4| - | - | - |削除ボタン
5| - | - | - |削除ボタン
6| - | - | - |削除ボタン
7| - | - | - |削除ボタン
この様な感じです。
この場合だと削除ボタンが必要かなぁと思ったので、設定したいのですが・・・・。
4、次画面は、注文内容の確認画面なので、tyumon1とはまた別で新しいファイルを展開する事になります。なので、「次の画面(kakunin.htm)」という表現方法にしたのです。
この画面の仕様は、tyumon1.htmのf2で表示された内容を再度確認する為、f2の内容をそのまま転送する画面です。その他この画面には、お客様の情報を入れて頂くフォームも作成していきたいと思ってます。
↓
テキスト(No)|テキスト(size)|テキスト(syohin)|(memo)
1|25.0|サンダル|納期は?
2|23.5|靴|返品できますか?
となります。
多分、tyumon1.htmが完成できそうであれば、kakunin.htmの画面は何とか自分で作成出来るかもわかりません。
以上です、また長ーくなってしまって申し訳ありませんが、宜しくお願い致します。
No.8
- 回答日時:
>「エラーが検出されたので、 自動修正します。
」というエラ・・・これだからア●ビ●エ●は・・・
おそらくビルダ内部で、命名規約とかがあってそれに引っかかって、エラーになってんでしょうね。
>お手上げですよね(泣)?
問題はビルダにありそうですね。
こちらでビルダが入手できれば、確認できるかもしれないのですが、ビルダは所持しておりませんので、回答出来るのもこれまでとなりそうですね。
>内容になる感じですか?
JavaScript部分だけですと、そうですね。
ビルダでファイルを開いた時点で、HTML部分のFormの名前とか、テキストボックスの名前とか、が自動的に変換されているような気がします。
No.7
- 回答日時:
う~ん、わからない。
なぜエラー出ちゃうんだろう。
ビルダに貼り付けてるのがまずいんですかね。
osもブラウザも一緒だったら、違うところって、実際ソース書いているところぐらいですよね。
でも、どうなんだろう、、、コピペ失敗してるわけじゃないのであれば、手の施しようがないかも。
でもよくわからないなぁ、、、消したのに同じエラーが出るなんて。
ソースに記述がないのに、同じエラーが出るのは反映されてないんじゃないですかねぇ。
ビルダに貼り付けない方法でやってみてもらっても良いですかね?
1.新規ファイルを作成しメモ帳で開く
2.No.4で記述してある「<!DOCTYPE HTM・・・」から「・・・</html>」までをコピー
3.1で作成したファイルに貼り付ける。
4.貼り付けたファイルを「tyumon1.htm」としてデスクトップに保存する。
5.IE(Internet Explorer)を開く
6.tyumon1.htmをドラッグして5で開いたIEに落とす。
これしても、ダメならもう、、、おてあげかも、、、
がんばってください。
この回答への補足
テキストファイルにコピペしてデスクトップからそのファイルを見ると作成して頂いたとおりの画面(多分)になりますし、「form2へデータ送信」もうまく行きました。でも、ビルダでそのファイルを開くと、「エラーが検出されたので、自動修正します。」というエラーが出るので、「OK」をクリックすると、一応作成画面は見れるんですが、form2のレイアウトはバラバタになっちゃうし、form2へデータ送信をクリックするとあのエラーメッセージが出てくるんです。
お手上げですよね(泣)?
ご支持頂いた通り削除すると以下の内容になる感じですか?
<SCRIPT language="JavaScript">
<!--
//No初期値セット
g_No = 0;
//表示件数初期値セット
g_Cn = 7;
function fncA(){
//ブランクチェック
if(document.f1.size.value==""){
alert("入力してください");
return;
}
//ナンバーチェック
if(g_No==g_Cn){
alert("これ以上は無理です");
return;
}
//ナンバーカウントアップ
g_No = g_No+1;
//データ移動処理
document.f2.elements['No[]'][g_No-1].value = g_No;
document.f2.elements['size[]'][g_No-1].value = document.f1.size.value;
document.f2.elements['syohin[]'][g_No-1].value = document.f1.syohin.value;
//後処理
document.f1.size.value="";
document.f1.syohin.selectedIndex=0;
document.f1.check.checked=false;
}
function fncB(){
document.f2.submit();
}
-->
</SCRIPT>
No.6
- 回答日時:
同じ環境下なのになんでエラーでないんだろう。
特殊なことしてないはずなのに、おかしいなぁ。
とりあえず、
document.f1.check.checked=false;
document.f1.size.focus();
この2行を二箇所消し見てみてください。
エラーは消えると思います。
新たなエラーが発生するかもしれないですが。
OSの件失礼しました、省略せずにちゃんと書けばよかったですね。ごめんなさい。
この回答への補足
すみません。
説明不足でした。
エラーが出るのは、
「form2へデータ送信」のボタンをクリックすると出てくるエラーなんです。
本当に何度もすみません。
ちなみに、
document.f1.check.checked=false;
document.f1.size.focus();
この2行を二箇所を消してみましたが、おなじ様なエラーが出てしまいました。
ライン:16(ここが17から16に変わっただけです。)
文字:1
エラー:'document.f1.sizu.valu'はNull又は、オブジェクトではありません。
という内容です。難しいです。
No.5
- 回答日時:
あら?でも、「sizu」なんて書いてないので、コピペミスかと思うのですが。
。。一応、稼動テストはしてあるはずなので、動くと思うのですが。
よろしければ環境教えていただけないですかね?
こちらはOS:WindowsXP ProのIE6で稼動確認してます。
この回答への補足
すみません。「sizu」は補足に記入する時、間違えてしまいました。
OSの件はOSの意味が分からず、回答出来なかったのですが、OS=オペレーションシステムという意味だったですね?
OS:Microsoft Windows XP Professional
Internet Explorer
Version:6.0.28001.1106xpsp2.0.0422-1633
て書いてあります。
よく分からないので全部送ってしまいました。
これでわかりますか?
No.4
- 回答日時:
参考程度にしてください。
g_Cnの初期値を変えると、表示件数が変わると思います。
以下ソースです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<script language="JavaScript">
<!--
//No初期値セット
g_No = 0;
//表示件数初期値セット
g_Cn = 7;
function fncA(){
//ブランクチェック
if(document.f1.size.value==""){
alert("入力してください");
document.f1.check.checked=false;
document.f1.size.focus();
return;
}
//ナンバーチェック
if(g_No==g_Cn){
alert("これ以上は無理です");
document.f1.check.checked=false;
document.f1.size.focus();
return;
}
//ナンバーカウントアップ
g_No = g_No+1;
//データ移動処理
document.f2.elements['No[]'][g_No-1].value = g_No;
document.f2.elements['size[]'][g_No-1].value = document.f1.size.value;
document.f2.elements['syohin[]'][g_No-1].value = document.f1.syohin.value;
//後処理
document.f1.size.value="";
document.f1.syohin.selectedIndex=0;
document.f1.check.checked=false;
}
function fncB(){
document.f2.submit();
}
-->
</script>
<body>
form1<br>
<form name="f1">
<table>
<tr>
<td>サイズ</td>
<td><input type="text" name="size"></td>
</tr>
<tr>
<td>商品</td>
<td>
<select name="syohin">
<option value="a">a
<option value="b">b
<option value="c">c
<option value="d">d
</select></td>
</tr>
<tr>
<td>チェック</td>
<td><input type="button" name="check" value="form2へデータ送信" onclick="fncA()"></td>
</tr>
<table>
</form>
<br>form2<br>
<form name="f2" action="kakunin.htm" method="post">
<table>
<tr>
<td>ナンバー</td>
<td>サイズ</td>
<td>商品</td>
<td>メモ</td>
<td>チェック</td>
</tr>
<script language="JavaScript">
<!--
for(i=0;i<g_Cn;i++){
document.write("<tr>");
document.write("<td><input type='text' name='No[]'></td>");
document.write("<td><input type='text' name='size[]'></td>");
document.write("<td><input type='text' name='syohin[]'></td>");
document.write("<td><input type='text' name='memo'></td>");
document.write("<td><input type='checkbox' name='sakujyo[]' onclick=''></td>");
document.write("</tr>");
}
-->
</script>
</table>
<input type="submit" name="check" value="次画面へデータ送信" onclick="fncB()"><br>
</form>
</body>
</html>
この回答への補足
ご教示頂き有難うございました。
早速、HPビルダ6へコピペさせて頂きましたが、スクリプトエラーが出てしまいました(泣)
エラー内容は、以下の通りです。
ライン:17
文字:1
エラー:'document.f1.sizu.valu'はNull又は、オブジェクトではありません。
という内容です。
どうしたらよいのでしょうか?
No.3
- 回答日時:
>1、テキストボックスの事です。
了解です。
>2、ボタンというのは、ラジオボタンの事ですか?
そうではなく、<input type="button">の事だったのですが。
チェックボタンにする必要性がわからないのです。そもそも、チェックボタンは複数の選択肢から
複数個の選択が可能な時に、使用するオブジェクトだと認識しております。
今回の要件からすると、複数から選択するわけではないですし、
チェック印が付いている事は無いわけなので、ボタンで良いのではと思っただけです。
「機能が設定できる」という意味がちょっと理解できないので、すれ違いがあるかもしれませんね。
>3、ムリなのですか?
document.writeを駆使すれば、無理じゃないかもしれませんが、処理が複雑になると思います。
また、これをJavaScriptで実装するよりはサーバサイドスクリプト(PHP,Java,Perl等)を利用
したほうが、良いのではないかと思うのですが、せめてウェブサーバの環境(OSや)がわかれば、アドバイスのしようもあるのですが。。。
最大表示Noの数があらかじめわかっているのであれば、最大行数分だけ表示しておいて、
それらに値をセットする事は可能だと思います。
>4、kakunin.htmの画面は何とか自分で作成出来るかもわかりません。
そうですか、頑張って下さい。
たくさんご教示頂き有難うございました。
スクリプトやその他のソースを丁寧にご教示頂いたので、現在作成したいHPに近づく様、出来る範囲まで作成してみようと思います。
またわからない事があると思いますので、その時はまた宜しくお願い致します。
有難う御座いました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- PHP PHPで入力フォームでデータを確認表示画面まで送る流れを日本語で理解したいのです。 1 2023/05/29 19:12
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ラジオボタンが選択されたらテ...
-
JavaScriptでテーブルのソート...
-
JavaScriptを使って九九の表を...
-
formで項目を連結したい
-
localStorageでのcheckbox制御
-
別ページからOnclickでテーブル...
-
DOM追加時に表示されるが自動削...
-
Javascriptで自動的に計算する...
-
JavaScriptでIEの自動ログイン...
-
チェックボックスのチェック処理
-
ラジオボタン選択で「複数ラジ...
-
javascriptで表(テーブル)の自...
-
チェックボックス付きのテーブ...
-
SCRIPT及びソースを教え...
-
画面表示とともにtableの指定の...
-
JavaScriptによる自動計算フォーム
-
文字数を数える際に空白、改行...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
TextBoxに半角数字以外を入れた...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
チェックボックス付きのテーブ...
-
localStorageでのcheckbox制御
-
複数のselect値で1つも選択され...
-
JavaScriptの「.querySelectorA...
-
Javascriptの電卓で最初の何も...
-
文字数を数える際に空白、改行...
-
formで項目を連結したい
-
jQueryで合計を出したい
-
Formのシリアライズができない
-
画面表示とともにtableの指定の...
-
テーブル内のチェックボックス...
-
入力チェックの外部スクリプト...
-
ラジオボタンが選択されたらテ...
-
VBSでの自動ログイン
-
Javascriptで自動的に計算する...
-
jQuery テキストボックス読み取...
-
同一nameの input type="text"...
-
ボタンクリックでフォーカス移動
-
画面の2重起動をチェックする...
-
送信ボタン連打を抑止したいです
おすすめ情報